vue-svg-icon

a solution for multicolor svg icons in vue2 轻量的Vue2多色动态svg图标方案 中文版说明

v1.2.9

demo: https://cenkai88.github.io/vue-svg-icon/demo/
features:

• no need to inject SVG in main.js anymore
• support path, circle, ellipse, rect, line, polyline, polygon tag of SVG
• support grouped tags in SVG
• real-time svg editing in illustrator or sketch
• dynamically set the color of ONE PART of the svg through css 'color' property
  an awesome SVG icon site iconfont

Usage

1. install

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

1. put your svg into src/svg/

• this dir are not supported to be configured now
  src folder should be in the same folder with nodemodules

1. import vue-svg-icon in your main.js

import Icon from 'vue-svg-icon/Icon.vue';
Vue.component('icon', Icon);  

1. use the svg icon in your vue!

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

Edit svg pictures in illustrator

• Notice all the rect or line should be converted to path.(not anymore since v1.1.0)
  When saving the SVG, please choose 'Save As' and set CSS Properties as 'Presentation Attributes' in advanced settings.
• Pls set the color of the part that can be changed through css as #000000 in illustrator，if you want to use black in SVG but don't want it to be altered by css, pls set it as #000001
• the color of stroke can be controlled through stroke property of icon if set as #000000 (since v1.1.0).
• recommended size of SVG is 200200

Trouble Shooting

1. cannot find corresponding .svg file in vue-svg-icon/svg when you inject it in main.js, please keep the name in main.js and the filename exactly same.

``` ```

1. cannot find the "svg" fold in src folder

This dependency was not found:
   
   * !xml-loader!../../src/svg in ./~/.6.4.1@babel-loader/lib!./~/.11.1.4@vue-loader/lib/selector.js?type=script&index=0!./~/.1.2.8@vue-svg-icon/Icon.vue
   
   To install it, you can run: npm install --save !xml-loader!../../src/svg

1. pls check the .babelrc file of root folder

Module build failed: ReferenceError: Unknown plugin "transform-runtime"
 specified in "/Users/test/Desktop/Dev/github/.babelrc" at 0, attempted to resolve relative to 
 "/Users/test/Desktop/Dev/github"

中文版本说明

示例: https://cenkai88.github.io/vue-svg-icon/demo/   特点:

• 不再需要通过inject注册SVG
• 支持SVG文件中path, circle, ellipse, rect, line, polyline, polygon 标签
• 支持SVG文件中存在编组的标签
• 可即时在illustrator中编辑svg图片
• 可通过css的color属性动态地调整svg中某一部分的颜色

1. 安装

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

1. 将svg图片放入src/svg/

这里安利一个svg图片库iconfont

• src/svg路径暂时不可配置
• src文件夹应和nodemodules在同一个文件夹下

1. 在项目的main.js入口引入vue-svg-icon

import Icon from 'vue-svg-icon/Icon.vue';
Vue.component('icon', Icon); 

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

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

在illustrator中编辑svg图片时

• 注意illustrator中所有的矩形线段等等需转成复合路径再保存。（v1.1.0后不再需要)
• 第一次编辑完保存时，请选择"另存为"，在"高级选项"中将"css属性"设置成演示文稿属性
  需要通过css动态设置颜色等部分请将填充色设为纯黑(#000000)，如果想设置黑色但不受SVG的color影响请将填充色设为(#000001)
• 描边的颜色同样可在illustrator或sketch中设为纯黑(#000000)，然后通过icon的CSS中stroke属性来动态控制 (自v1.1.0起)。
• 推荐SVG尺寸为200200

For detailed explanation on how things work, checkout the guide and docs for vue-loader.