一个vue2的多色图标方案：vue-svg-icon

示例: https://cenkai88.github.io/vu...

项目地址: https://github.com/cenkai88/v... 求star～～
我的的第一个vue组件，但愿你们多多支持啦～?
基于vue-awesome扩展而来
其实想到写这个的缘由主要是在开发中经常须要用到图标，这一块经历了四个阶段。

1. 用的awesomeFont之类的库

2. 发现iconfont以后，每用到一个图标就去搜一个加入到工程中，自定义程度更高，也减小图标引入。

3. 从iconfont下了图标以后用illustrator编辑形状或者颜色以后达到更高的定制性。

4. 在写这个组件以前，发现SVG图片其实就是XML格式的标签，其中fill属性六位颜色值的路径会根据值渲染颜色，而fill为空的可被HTML中该SVG节点css3的**color
   **属性控制，这样的话咱们能够为图标赋予两种状态。

组件特色:

• 可即时在illustrator中编辑svg图片

• 可经过css的color属性动态地调整svg中某一部分的颜色

• 能够经过上面所提到的两种状态方便地完成一些功能（如tabbar）

1. 安装

npm install vue-svg-icon --save-dev

2. 将svg图片放入src/svg

这里安利一个svg图片库iconfont

• src/svg路径暂时不可配置

• src文件夹应和node_modules在同一个文件夹下

3. 在项目的main.js入口引入vue-svg-icon和须要使用的svg文件名（不需扩展名）

import Icon from 'vue-svg-icon/Icon.vue';Vue.component('icon', Icon);
Icon.inject('chameleon'); // SVG图片名字（无扩展名）

4. 在网页中使用icon标签就能够啦！

<icon name="chameleon" scale="20"></icon>

注意

在illustrator中编辑svg图片时

• 注意illustrator中全部的矩形线段等等需转成复合路径再保存。

• 编辑完保存时，请选择"另存为"，在"高级选项"中将"css属性"设置成演示文稿属性
  

• 须要经过css动态设置颜色等部分请将填充色设为纯黑(#000000)，若是想设置黑色但不受svg的color影响请将填充色设为(#000001)

• 推荐svg尺寸为200*200

若是你读到这了，那么这个插件八成适合你，请移步vue-svg-icon