Install vue-svg-loader.
npm install --save-dev vue-svg-loaderEdit build/webpack.base.conf.js.
...module.exports = { ... module: { ... // EDIT: add this { test: /\.svg$/, loader: 'vue-svg-loader', // `vue-svg` for webpack 1.x options: { // optional [svgo](https://github.com/svg/svgo) options svgo: { plugins: [ {removeDoctype: true}, {removeComments: true} ] } } }, { // EDIT: remove svg from the following // test: /\.(png|jpe?g|gif|svg)(\?.*)?$/ test: /\.(png|jpe?g|gif)(\?.*)?$/, loader: 'url-loader', options: { limit: 10000, name: utils.assetsPath('img/[name].[hash:7].[ext]') } }, ... }, ...}...Code.
<template> <nav id="menu"> <span class="badge lua-badge-pomodoro">20 <PomodoroIcon></PomodoroIcon></span> </nav></template><script>import PomodoroIcon from '@/assets/svg/twemoji/1f345.svg'export default { name: 'test', components: { PomodoroIcon, },};</script><style>.badge { &.lua-badge-pomodoro { font-size: 90%; padding: 0; > svg { width: 16px; vertical-align: middle; opacity: 0.85; } }}</style>NOTE: I utilize SVG files from twemoji and store them at @/assets/svg/twemoji/. You can use CSS to configure the size.
NOTE: If you prefer something like FontAwesome (where SVG is of single color and use CSS to control the color), you should try vue-svgicon. If you use vue-svgicon for an icon with colour, it will become monotone black by default.