Vuejs Embed SVG Inline

Feb 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]( 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]')      }    },    ...  },  ...}...


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

❤️ Is this article helpful?

Buy me a coffee ☕ or support my work via PayPal to keep this space 🖖 and ad-free.

Do send some 💖 to @d_luaz or share this article.

✨ By Desmond Lua

A dream boy who enjoys making apps, travelling and making youtube videos. Follow me on @d_luaz

👶 Apps I built

Travelopy - discover travel places in Malaysia, Singapore, Taiwan, Japan.