vue中 svg图标的使用

项目地址:https://github.com/cenkai88/v...求star～～

个人的第一个vue组件，希望大家多多支持啦～

基于vue-awesome扩展而来

其实想到写这个的原因主要是在开发中常常需要用到图标，这一块经历了四个阶段。

用的awesomeFont之类的库

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

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

在写这个组件之前，发现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文件名（不需扩展名）

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

4. 在网页中使用icon标签就可以啦！

注意

在illustrator中编辑svg图片时

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