Skip to content
πŸ”¨ webpack loader that lets you use SVG files as Vue components
Branch: master
Clone or download
Latest commit 55f5a1e Nov 24, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs Updated example for Nuxt.js 2.x Sep 29, 2018
.gitignore VuePress dist folder added to .gitignore Jul 20, 2018
.npmignore Ignore docs from package Sep 5, 2018
LICENSE v0.5.0 Jan 30, 2018
README.md Merge pull request #53 from JorgenVatle/patch-1 Nov 24, 2018
index.js Move core to another package: `svg-to-vue` Sep 24, 2018
package.json Update vuepress Nov 24, 2018
yarn.lock Update vuepress Nov 24, 2018

README.md

vue-svg-loader

webpack loader that lets you use SVG files as Vue components

Documentation - FAQ

Installation

npm i -D vue-svg-loader

yarn add --dev vue-svg-loader

Basic configuration

webpack

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

Vue CLI

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

    svgRule.uses.clear();

    svgRule
      .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$/,
        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

FOSSA Status

You can’t perform that action at this time.