vue-svg-loader
webpack loader that lets you use SVG files as Vue components
Installation
npm i -D vue-svg-loader vue-template-compileryarn add --dev vue-svg-loader vue-template-compiler
Basic configuration
webpack
moduleexports =module:rules:test: /\.svg$/use:'babel-loader''vue-svg-loader';
Vue CLI
moduleexports ={const svgRule = configmodule;svgRuleusesclear;svgRule;};
Nuxt.js (1.x / 2.x)
moduleexports =build:{const svgRule = configmodulerules;svgRuletest = /\.$/;configmodulerules;};
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>