vue-svg-loader

    0.16.0 • Public • Published

    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

    Install

    npm i vue-svg-loader

    DownloadsWeekly Downloads

    124,225

    Version

    0.16.0

    License

    MIT

    Unpacked Size

    10.6 kB

    Total Files

    5

    Last publish

    Collaborators

    • visualfanatic