vue-svg-loader
Use SVG files as Vue Components
Last updated 5 months ago by visualfanatic .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install vue-svg-loader 
SYNC missed versions from official npm registry.

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

FOSSA Status

Current Tags

  • 0.16.0                                ...           latest (5 months ago)
  • 0.12.0-alpha.1                                ...           next (2 years ago)

18 Versions

  • 0.16.0                                ...           5 months ago
  • 0.15.0                                ...           8 months ago
  • 0.14.0                                ...           8 months ago
  • 0.13.0                                ...           8 months ago
  • 0.12.0                                ...           a year ago
  • 0.12.0-alpha.1                                ...           2 years ago
  • 0.11.0                                ...           2 years ago
  • 0.10.0                                ...           2 years ago
  • 0.9.0                                ...           2 years ago
  • 0.8.0                                ...           2 years ago
  • 0.7.0                                ...           2 years ago
  • 0.6.0                                ...           2 years ago
  • 0.5.0                                ...           2 years ago
  • 0.4.0                                ...           3 years ago
  • 0.3.0                                ...           3 years ago
  • 0.2.0                                ...           3 years ago
  • 0.1.2                                ...           4 years ago
  • 0.1.1                                ...           4 years ago

Copyright 2014 - 2016 © taobao.org |