https://github.com/damianstasik/vue-svg-loader

🔨 webpack loader that lets you use SVG files as Vue components
https://github.com/damianstasik/vue-svg-loader

javascript nuxt svg vue vue-components vue3 webpack

Last synced: about 1 month ago
JSON representation

🔨 webpack loader that lets you use SVG files as Vue components

• Host: GitHub
• URL: https://github.com/damianstasik/vue-svg-loader
• Owner: damianstasik
• License: mit
• Created: 2016-12-06T13:50:24.000Z (over 7 years ago)
• Default Branch: dev
• Last Pushed: 2023-03-15T16:08:03.000Z (about 1 year ago)
• Last Synced: 2024-01-28T21:47:56.402Z (4 months ago)
• Topics: javascript, nuxt, svg, vue, vue-components, vue3, webpack
• Language: JavaScript
• Homepage: https://vue-svg-loader.js.org
• Size: 816 KB
• Stars: 638
• Watchers: 7
• Forks: 88
• Open Issues: 69
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Lists

• awesome-vue - vue-svg-loader - webpack loader that lets you use SVG files as Vue components (Components & Libraries / Utilities)

README

        


vue-svg-loader

webpack loader that lets you use SVG files as Vue components



  Documentation -

  FAQ



## Installation

``` bash

npm i -D vue-svg-loader@beta

yarn add --dev vue-svg-loader@beta

```

## Basic configuration

### webpack

``` js

module.exports = {

  module: {

    rules: [

      {

        test: /\.svg$/,

        use: [

          'vue-loader',

          'vue-svg-loader',

        ],

      },

    ],

  },

};

```

### Vue CLI

``` js

module.exports = {

  chainWebpack: (config) => {

    const svgRule = config.module.rule('svg');

    svgRule.uses.clear();

    svgRule

      .use('vue-loader')

      .loader('vue-loader') // or `vue-loader-v16` if you are using a preview support of Vue 3 in Vue CLI

      .end()

      .use('vue-svg-loader')

      .loader('vue-svg-loader');

  },

};

```

### Nuxt.js (1.x / 2.x)

``` js

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: [

          'vue-loader',

          'vue-svg-loader',

        ],

      });

    },

  },

};

```

## Example usage

``` vue

  

    

      

      Vue

    

    

      

      SVGO

    

    

      

      webpack

    

  

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,

  },

};

```

## License

[![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2Fvisualfanatic%2Fvue-svg-loader.svg?type=large)](https://app.fossa.io/projects/git%2Bgithub.com%2Fvisualfanatic%2Fvue-svg-loader?ref=badge_large)