Skip to content

🔨 A webpack loader that allows to use SVG files as Vue Components.

License

Notifications You must be signed in to change notification settings

henriqemalheiros/vue-svg-loader

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

52 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

module.exports = {
  build: {
    extend: (config) => {
      const svgRule = config.module.rules.find(rule => rule.loader === 'url-loader');

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

      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">
      <SVGOIcon />
      SVGO
    </a>
    <a href="https://github.com/webpack/webpack">
      <WebpackIcon />
      webpack
    </a>
  </nav>
</template>
<script>
import VueLogo from './public/vue.svg';
import SVGOIcon from './public/svgo.svg';
import WebpackIcon from './public/webpack.svg';

export default {
  name: 'Example',
  components: {
    VueLogo,
    SVGOIcon,
    WebpackIcon,
  },
};
</script>

About

🔨 A webpack loader that allows to use SVG files as Vue Components.

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 100.0%