vue-svg-loader

Use SVG files as Vue components

Example →

Easily styleable

This loader inlines the SVGs which enables you to style aspects like for example stroke/fill color.

Optimized

Each SVG you import is optimized on-the-fly using powerful SVGO without you having to do anything.

SSR ready

You can import the SVG components inside the code that is going to be rendered on the server side.

yarn add -D vue-svg-loader vue-template-compiler

# Configuration

WARNING

Make sure that your current configuration is not already processing the SVG files. Check this FAQ section if you want to use both inline and external SVGs.

module.exports = {
  module: {
    rules: [
      {
        test: /\.svg$/,
        use: ['babel-loader', 'vue-svg-loader'],
      },
    ],
  },
};

Similarly to Vue CLI, you need to modify existing rule (in nuxt.config.js) that processes the SVG files:

module.exports = {
  build: {
    extend: (config) => {
      const svgRule = config.module.rules.find(rule => rule.test.test('.svg'));

      svgRule.test = /\.(png|jpe?g|gif|webp)$/;

      config.module.rules.push({
        test: /\.svg$/,
        use: ['babel-loader', 'vue-svg-loader'],
      });
    },
  },
};

# Example

# Preview

# Code

<template>
  <nav>
    <a href="https://github.com/vuejs/vue" class="btn btn-vue">
      <VueLogo class="logo" />
      Vue
    </a>
    <a href="https://github.com/svg/svgo" class="btn btn-svgo">
      <SVGOLogo class="logo" />
      SVGO
    </a>
    <a href="https://github.com/webpack/webpack" class="btn btn-webpack">
      <WebpackLogo class="logo" />
      webpack
    </a>
  </nav>
</template>
<script>
import VueLogo from './public/vue.svg';
import SVGOLogo from './public/svgo.svg';
import WebpackLogo from './public/webpack.svg';

export default {
  name: 'Example',
  components: {
    VueLogo,
    SVGOLogo,
    WebpackLogo,
  },
};
</script>
<style scoped>
.btn {
  display: inline-flex;
  align-items: center;
  margin-right: 10px;
  padding: 6px 10px;
  border-radius: 6px;
  border: 2px solid currentColor;
}

.btn-vue { color: #4fc08d; }
.btn-svgo { color: #2364c0; }
.btn-webpack { color: #1d78c1; }

.logo {
  width: 28px;
  height: 28px;
  margin-right: 10px;
}
</style>