vue中如何自定义svg图标

前言

svg图标的好处就是可伸展，可自定义图标的颜色。码字不易，欢迎大家批评指导，互相学习。

image.png

1. 在iconfont中将自己待使用的图标添加入库

image.png

2. 选择好所有图标后，点击右上角的购物车

image.png

3. 添加到项目中，做为新项目的图标库

中间会让你登陆账号，新建项目名称，名称可以随便取，做为图标库的标识区分

image.png

4. 新建添加到项目之后会出现一下界面

注意： 如果你要上传公司ui自己制作的svg图标，你需要点击上传图标至项目，可将本地的svg图标放到项目中使用

image.png

5. 生成图标库js文件

生成svg图标库的三种方式，我平时在vue项目中会使用第三种（Symbol）的方式，具体三种方式可查看iconfont的生成说明
点击Symbol 点击生成在线链接

image.png

出现红色字样：暂无代码，点击生成，那就点击一下

image.png

点击复制代码到浏览器新开网页打开这个链接地址

image.png

6. 将生成的js文件复制到vue项目中

我这里是存在新建文件夹里，并命名icon.js

image.png

7. 引入svg的图标库文件

svg图标组件封装如下；通过icon属性传入图标的名称（注意：图标传入的名称不用再写icon）；相关的图标名称参考下图

image.png

8. css属性值 currentColor 的应用

我封装的组件中使用 currentColor属性值做为svg图标的填充色，这样的好处就是图标的颜色跟着当前字体的颜色变动，比如鼠标hover时的变色时不用单独定义图标颜色，只需要写hover样式的字体颜色即可。

如果觉得写得好，请给点个赞打赏一下。