Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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 3 hours 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 (almost 8 years ago)
- Default Branch: dev
- Last Pushed: 2024-03-01T16:16:29.000Z (7 months ago)
- Last Synced: 2024-04-14T21:08:49.131Z (5 months ago)
- Topics: javascript, nuxt, svg, vue, vue-components, vue3, webpack
- Language: JavaScript
- Homepage: https://vue-svg-loader.js.org
- Size: 816 KB
- Stars: 640
- Watchers: 7
- Forks: 87
- 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@betayarn 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
``` vueimport 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)