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: 8 months 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 (about 9 years ago)
- Default Branch: dev
- Last Pushed: 2024-03-01T16:16:29.000Z (almost 2 years ago)
- Last Synced: 2025-04-13T05:08:37.250Z (8 months ago)
- Topics: javascript, nuxt, svg, vue, vue-components, vue3, webpack
- Language: JavaScript
- Homepage: https://vue-svg-loader.js.org
- Size: 816 KB
- Stars: 645
- Watchers: 7
- Forks: 85
- Open Issues: 70
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
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
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
[](https://app.fossa.io/projects/git%2Bgithub.com%2Fvisualfanatic%2Fvue-svg-loader?ref=badge_large)