A Vue2 multicolor icon scheme: VUE-SVG-icon

Example: cenkai88. Making. IO/vue – SVG – ico…

Project address: github.com/cenkai88/vu… 😄 is based on the vue-awesome extension. The main reason for writing this is that ICONS are often used in development, which goes through four stages.

1. AwesomeFont or something like that
2. After the discovery of iconfont, every icon used was searched and added to the project, which improved the degree of customization and reduced the introduction of ICONS.
3. Create ICONS from IconFont and edit shapes or colors in Illustrator for greater customization.
4. Before writing this component, we found that SVG images are actually tags in XML format, where the path of the six-bit color value of the fill attribute renders the color according to the value, and empty fill is controlled by the color attribute of the SVG node CSS3 in HTML, so we can assign two states to the icon.

Component features:

• Edit SVG images in Illustrator instantly
• You can dynamically adjust the color of a part of SVG through the COLOR property of CSS
• Some functions (such as Tabbar) can be easily accomplished through the two states mentioned above

wechat.jpg

alipay.jpg

demo.gif

1. Install

npm install vue-svg-icon --save-devCopy the code

2. Place the SVG image in SRC/SVG

Here is an SVG image library iconFont

• The SRC/SVG path is temporarily unavailable
• The SRC folder should be in the same folder as node_modules

3. Import vuE-SVG-icon and the required SVG file name (no extension required) in the main.js entry of the project

import Icon from 'vue-svg-icon/Icon.vue'; Vue.component('icon', Icon);
Icon.inject('chameleon'); // SVG image name (no extension)Copy the code

4. Use icon tags in web pages.

<icon name="chameleon" scale="20"></icon>Copy the code

Pay attention to

When editing SVG images in Illustrator

• Note that all rectangular line segments etc. in Illustrator need to be converted to compound paths before saving.

  
  
  
  
  

  change.gif

• After editing, select “Save as” and set “CSS Properties” to presentation properties in “Advanced Options”

  
  
  
  
  

  save.gif

• Set the fill color to black (#000000) if you want to set the color to black but not affected by the color of SVG (#000001)

• The recommended SVG size is 200 x 200

If you’ve read this far, this plugin is probably for you. Go to VUE-SVG-icon