vue-svg-loader

webpack loader that lets you use SVG files as Vue components

Documentation - FAQ

Installation

npm i -D vue-svg-loader vue-template-compiler

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

Basic configuration

webpack

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

Vue CLI

module.exports = {
  chainWebpack: (config) => {
    const svgRule = config.module.rule('svg');

    svgRule.uses.clear();

    svgRule
      .use('babel-loader')
      .loader('babel-loader')
      .end()
      .use('vue-svg-loader')
      .loader('vue-svg-loader');
  },
};

Nuxt.js (1.x / 2.x)

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 usage

<template>
  <nav>
    <a href="https://github.com/vuejs/vue">
      <VueLogo />
      Vue
    </a>
    <a href="https://github.com/svg/svgo">
      <SVGOLogo />
      SVGO
    </a>
    <a href="https://github.com/webpack/webpack">
      <WebpackLogo />
      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>

License

Current Tags

• 0.17.0-beta.2                                ...           beta (4 years ago)
• 0.16.0                                ...           latest (5 years ago)
• 0.12.0-alpha.1                                ...           next (6 years ago)

21 Versions

• 0.17.0-beta.2                                ...           4 years ago
• 0.17.0-beta.1                                ...           4 years ago
• 0.17.0-beta.0                                ...           4 years ago
• 0.16.0                                ...           5 years ago
• 0.15.0                                ...           5 years ago
• 0.14.0                                ...           5 years ago
• 0.13.0                                ...           5 years ago
• 0.12.0                                ...           6 years ago
• 0.12.0-alpha.1                                ...           6 years ago
• 0.11.0                                ...           6 years ago
• 0.10.0                                ...           6 years ago
• 0.9.0                                ...           6 years ago
• 0.8.0                                ...           6 years ago
• 0.7.0                                ...           6 years ago
• 0.6.0                                ...           6 years ago
• 0.5.0                                ...           7 years ago
• 0.4.0                                ...           7 years ago
• 0.3.0                                ...           7 years ago
• 0.2.0                                ...           7 years ago
• 0.1.2                                ...           8 years ago
• 0.1.1                                ...           8 years ago