推荐一个实现设计稿的时候，遇到很多小icon的解决方案
最后更新于
最后更新于
大家有没有遇到过这种情况啊
就是
UI给分享的设计稿
里边有很多这样的小图标
然后这些小图标呢
也没有专门的放到一个iconfont（aliyun）
的图标库里边
我们自己往里边上传呢
还需要审核之类的就比较麻烦
所以呢
一般的话我们就只能把这些小图标啊
导图片放到项目里
但是呢
对于有些图标其实他可能是有交互的
悬停上去是要换个颜色的
所以呢
我们可能需要导出两种颜色的图标
就比较麻烦
那今天啊
我在这个el-admin（一个开源的管理后台脚手架）里面
学到了一个解决方案
觉得特别好给大家分享一下啊
首先我们先来看一下效果
我已经把代码拿到了我这个demo项目里边
比如说我想用这个加号
那我把这个加号右键
拷贝成svg格式
拷贝好之后呢我们回到项目里
看看我这有一个svg目录
然后呢新建一个比如叫plus.svg
然后把刚才复制的粘过来
注意粘过来现在就能用了
但是有点问题我们先来看一下啊
然后呢我在项目里边
这里用这个文件名去掉后缀叫PLUS
好保存一下
大家看就能用了
但是呢他这个颜色没有跟随
我现在页面的颜色
这就是我刚才说的有点问题
所以怎么处理呢
我们在粘贴过来之后啊
需要找到他这个fill
填充的颜色
他自带的颜色都给它去掉
（有两个大家看）
去掉以后呢
这样就可以了
那关于刚才去掉的这两个属性呢
等一下
我给大家分享有更快捷的方法哈
我们先来看
一下怎么封装的这个组件哈
首先呢我们需要导入一个包
svg sprite loader
这个组件的作用是什么呢
它可以把我们项目里的svg文件啊
通通的列在页面上
以这种的形式
然后大家看它有一个id是什么
什么就是你那个文件名
然后再用的时候呢
就可以直接去引用这个ID了
所以呢我们需要在这个
vue.config.js里边啊（没用vue的，直接找webpack）
去配置一下这个组件
他去扫描哪个路径啊
然后包括这个 symbolId 的这个规则
大家看 我这有个myicon
注意啊后面会提到
配置好他之后呢
我们再把这个封装好的组件复制过来
在这 components
然后svg icon
这里边
原封不动复制过去就行
只不过呢
他注意那个刚才说那个 symbolId 的规则
大看这有一个myicon
在这要跟他保持一致就行了
那其实这样正常来说就能用了
只不过用的时候
除了要把这个组件导到页面上
还需要把你用到的icon导到页面上
所以呢他又封装了一个js文件
在这里 icons 里边有一个index
他首先要把这个组件注册到全局
然后呢通过这几行代码
他把所有的svg都倒到页面上备用了
这样的话想用的时候随时就能用了
然后最后把这index啊
在main里边去做一个引入就可以了
这样的话呢
我们在vue文件里就可以直接这样用了
回过头来再来说刚才这个替换到
fill 的这个问题哈
这个怎么处理呢
大家看 我们手工处理也行
如果嫌麻烦的话呢
还可以在这个package里
面导一个这个svgo
然后呢在上面这个写个脚本
是vgo 像这样写
然后呢这个config文件里面怎么写呢
大家看
这里边我们
可以指定让他移除掉哪些属性
这是以正则的形式替换掉的
然后呢我们就可以在项目里边
这样的话他就会替我们自动去处理
而且呢他会把空格换行什么都去掉
做一个压缩
那关于这个demo的项目
还是放到github
这个地方哈
大家有需要的话可以自己来找一下