vue-svg-loader
webpack loader that lets you use SVG files as Vue components
Installation
npm i -D vue-svg-loader@beta
yarn add --dev vue-svg-loader@betaBasic configuration
webpack
module.exports = {
module: {
rules: [
{
test: /\.svg$/,
use: [
'vue-loader',
'vue-svg-loader',
],
},
],
},
};Vue CLI
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)
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
<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>