一个 Vue2 的多色图标方案:vue-svg-icon

2,898 阅读2分钟

示例: cenkai88.github.io/vue-svg-ico…

项目地址: github.com/cenkai88/vu… 求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)

wechat.jpg

alipay.jpg

demo.gif
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中所有的矩形线段等等需转成复合路径再保存。


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


    save.gif
  • 需要通过css动态设置颜色等部分请将填充色设为纯黑(#000000),如果想设置黑色但不受svg的color影响请将填充色设为(#000001)

  • 推荐svg尺寸为200*200

如果你读到这了,那么这个插件八成适合你,请移步vue-svg-icon


本文对你有帮助?欢迎扫码加入前端学习小组微信群: