我们在开发项目中总会或多或少的用到图标，网上很多UI库都提供了他们的图标库，但是如何才能方便的使用自己想要的图标呢？当然，最简单的方法是直接使用PNG图标，但是在开发中，我们需要定义不同的大小、颜色等。图标。使用PNG图片的时候，不是很方便。有时候，别人提供的东西不是我们喜欢用的，那么我们该如何应对呢？最好的是自己定义一个图标组件，在需要的地方调用；
我这里用的是阿里提供的iconfont图标库，主要是方便演示。当然也可以使用自己设计的图标(可以参考iconfon帮助文档)。下面让我开始我的制作过程。
1.首先在图标字体上选择你最喜欢的图标，并将其添加到你的库中。
2.将选定的图标添加到项目中。
3.输入您新添加的图标，并选择符号模式。
4、这一步很重要，要不然自定义颜色的时候不起作用：选择批量操作，然后全选所有图标，然后批量去色，这样后面得到的代码才可以自定义颜色；
5.移除颜色后，您可以单击Update来获取您选择的所有图标的js代码。
通过上面的步骤，我们已经可以在我们的项目中使用我们的图标了，但是使用起来不是很方便。让我们进入下一步，VUE组件。
在上一篇文章中，我们已经建立了一个项目和一些文件夹结构。现在我们在src-views-component下设置一个图标文件夹。
在图标下分别建立了icon.vue、icon.js、icon.scss、iconfont.js四个文件。
第一步：将项目下生成的符号代码复制到iconfont.js
步骤2:将常规css代码添加到icon.scss文件中。lis-icon { width : 1em；height: 1em垂直对齐：-0.15 em；fill:当前颜色；飞越：隐藏；}第三步：拾取对应的图标并获取类名，应用到页面icon.vue页面模板SVG class=' lis-icon ' aria-hidden=' true ' use xlink 3360 href=' # XXX '/use/SVG/template经过上面iconfont推荐的三步基本内容基本建立。现在我们要完善相应的内容。
步骤1:将icon.vue中的代码改为模板SVG class=' lis-icon ' aria-hidden=' true ' 3360 style=' { color 3360 color，width 3360size，height 3360size，cursor 3360pointer？'指针' 3360 '默认' } ' use 3360 href=' icon name '/use/SVG/template这里需要注意的一点是，xlink:href需要
要改为:href要不然不能接收到图标的名称（我用的是vue3）下面为自定义代码
<script> //引入图标jsimport './iconfont'//引入图标样式import './icon.scss'export default { name: 'lis-icon', props: { name: {//图标名称 type: String, default: '' }, color: { // 字体颜色 type: String, default: '' }, size: {//字体大小 type: String, default: '24px'//默认值 }, pointer: { // 默认不开启鼠标手状 type: Boolean, default: false } }, computed: { iconName () { return `#${this.name}` }, }}</script>到了这里 我们的组件就封装完成了，那我们要把他作为通用组件全局来调用呢，直接在mian.js调用也是可以的，不过不推荐这样，后续制作的组件越来越来多每次多在mian.js里面添加，那也太多重复代码了，我们需要做一个统一的注册
第一步：在src-views-component下面建立一个index.js文件import Icon from "./icons/icon";//这里以后可以加入制作的各种组件const components = < Icon>;//vue。use使用时，必须要有install方法。参数就是vue。const install = (Vue) => { for (var key in components) { Vue.component(components
import {createApp} from "vue";import App from "./App.vue";import router from "./router";import store from "./store";//引入自定义UI组件库import lisui from "./views/component/"createApp(App).use(store).use(router).use(lisui).mount("#app");然后我们就可以在我们需用到图标的页面调用了，调用方法为
<lis-icon name="cangchucangku" color="#000000" size="32px"></lis-iconname="cangchucangku"为图标名称
color="#000000"为图标颜色
size="32px"
到这里图标的封装就基本完成了，这种方式有点小瑕疵就是当我 改变图标时候 要重新生成一次图标的js代码，但我个人还是能接受的，这种工作量比较不大，就是更新下js而已，网上还有调用本地svg文件的方式，嗯，下次好好学习下
上一篇：「学习笔记」Vue3自定义UI组件库之-基础样式变量（base.scss）
