Place all svg
files/icons to one dir, e.g. <root-dir>/static/svg/
Install vue-svgicon
:
npm install vue-svgicon --save-dev
Add to package.json
scripts:
"scripts": {
"gensvg": "vsvg -s ./static/svg/ -t ./src/icons"
},
Run:
npm run gensvg
Add next to main.js
:
...
import svgicon from 'vue-svgicon'
Vue.use(svgicon, {
tagName: 'svgicon'
});
...
In components/Comp.vue
file scripts
section:
<scripts>
import '../icons'
...
In .vue
html:
<div id="wclose">
<svgicon icon="close-icon" width="50" height="50"></svgicon>
</div>
CSS:
.wclose {
color: #ccc;
}
.wclose:hover {
color: yellow;
}
More options here https://www.npmjs.com/package/vue-svgicon