Vuejs Embed SVG Inline

February 22, 2018

Install vue-svg-loader.

npm install --save-dev vue-svg-loader

Edit 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.

This work is licensed under a
Creative Commons Attribution-NonCommercial 4.0 International License.