A solution for svg icon in vue2.0

Downloads in past


1.3.27 years ago7 years agoMinified + gzip package size for vue2-svg-icon in KB




  1. install

npm install vue2-svg-icon --save-dev

  1. put your svg into src/assets/svg/

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

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

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

  1. use the svg icon in your vue!

  • name: svg file name
  • w: width (accept String or Number)
  • h: height (accept String or Nnmber)
<icon name="chameleon" :w="24" :h="24"></icon>

Trouble Shooting

  1. cannot find corresponding .svg file in vue2-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@vue2-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 

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