@svgv/webpack

Webpack loader to transform SVGs into Vue components.

Installation

npm install @svgv/webpack --save-dev

Usage

webpack.config.js

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

vue.config.js

module.exports = {
  chainWebpack: (config) => {
    const svgRule = config.module.rule('svg');
    svgRule.uses.clear();
    svgRule
      .use('vue-loader')
      .loader('vue-loader')
      .end()
      .use('@svgv/webpack')
      .loader('@svgv/webpack')
      .end();
  },
};

App.vue

<template>
  <div>
    <Star />
  </div>
</template>

<script>
import Star from './star.svg';

export default {
  components: {
    Star,
  },
};
</script>

Using with url-loader or file-loader

Note: This is an experimental feature.

webpack.config.js

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

vue.config.js

module.exports = {
  chainWebpack: (config) => {
    const svgRule = config.module.rule('svg');
    svgRule.uses.clear();
    svgRule
      .use('vue-loader')
      .loader('vue-loader')
      .end()
      .use('@svgv/webpack')
      .loader('@svgv/webpack')
      .end()
      .use('url-loader')
      .loader('url-loader')
      .end();
  },
};

App.vue

<template>
  <div>
    <img :src="Star" />
    <Star />
  </div>
</template>

<script>
import Star from './star.svg';

export default {
  components: {
    Star,
  },
  data() {
    return {
      Star,
    };
  },
};
</script>

Examples

See examples.

License

MIT