vue-svg-loader

webpack loader that lets you use SVG files as Vue components

## 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 ``` ## 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)