Package |
您所在的位置：网站首页 › install(vue) › Package |
Package
|
webpack loader that lets you use SVG files as Vue components Documentation - FAQ Installation npm i -D vue-svg-loader vue-template-compiler yarn add --dev vue-svg-loader vue-template-compiler Basic configuration webpack module.exports = { module: { rules: [ { test: /\.svg$/, use: [ 'babel-loader', 'vue-svg-loader', ], }, ], }, }; Vue CLI module.exports = { chainWebpack: (config) => { const svgRule = config.module.rule('svg'); svgRule.uses.clear(); svgRule .use('babel-loader') .loader('babel-loader') .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: [ 'babel-loader', 'vue-svg-loader', ], }); }, }, }; Example usage Vue SVGO webpack 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
|
【本文地址】