在Vue3中使用一款新的图标库-IconPark浅谈__Vue.js
发布于 1 个月前 作者 banyungong 189 次浏览 来自 分享
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利

theme: condensed-night-purple highlight: atom-one-dark

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动

在日常的开发中,或是为了提高开发效率,或是为了换种方案解决问题,我们可能会需要借助一些工具,所谓"工欲善其事,必先利其器"。话不多说,我们切入正题!

它是谁

说到图标,很难绕过iconfont,今天介绍的是由字节开源的图标库-iconPark

官网

image.png

iconPark的官方图标库提供了2437个图标,能够满足大部分场景下的使用相比于IconFont给我最直观的感受就是图标的统一性很强,分类清晰,最重要的是很强大,这套图标库可以用于Vue/React端,由于我在工作中使用的是vue技术桟,正巧在最近的Vue3项目中使用了IconPark,下面我们就来聊聊。

注:以下例子仅在Vue3项目中使用,Vue2.X用法相似,可阅读官方文档了解

怎么用

这里我们使用npm包的方式引入,首先我们需要建立一个Vue3的项目(使用webpack)

npm安装

npm install @icon-park/vue-next

按需引入

找到项目根目录下的 babel.config.js添加如下代码

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    [
      'import',
      {
        libraryName: '@icon-park/vue-next',
        libraryDirectory: 'es/icons',
        camel2DashComponentName: false
      },
      'icon'      // 多个组件库时需要加上这个属性,不重复即可。
    ]
  ]
}

需要注意的是,你如果要按需引入多个组件库,那么就需要为组件库注明name,否则会报错。

渐入佳境

由于在main.js中引入大量组件代码可能不太美观,我将这部分抽离出去放在一个js中维护

src目录下新增 plugins目录,用ES6语法引入并注册

image.png

import { Play } from '@icon-park/vue-next'
export function IconPark (app) {
  app.component('Play', Play)
}

main.js里

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import { IconPark } from '@/plugins/iconPark'
const app = createApp(App)
IconPark(app)
app.use(store).use(router).mount('#app')

可以看到,上面的IconPark函数传入一个参数app,执行了app.component,引入的图标以组件的形式被全局注册,于是意味着这些图标会以组件的形式使用。

来个图标

<play theme="filled" size="60" fill="#3a5de7" />

渲染到页面上 image.png

当然,颜色,大小,格式等等,官网都提供了灵活的配置,可以自行选择,如果你觉得这2000多个图标还不够用,或者说没你想要的,可以给官方给出补充建议。好吧,我们聊到这里。

版权声明:著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 作者: 不知名网友 原文链接:https://juejin.im/post/7012145094216122399

回到顶部