前面我们介绍了通过先将 svg 模板加载到 body 中，然后再通过 use 标签去实例化 svg 的方式去加载 svg；见 Vue 加载 svg icon
这里介绍另一种方式 vue-svg-loader，用起来还是挺方便的，配置也简单，直接参考官方 readme 就可以搞定；
Vue CLI 官方关于 webpack 相关 替换一个规则里的 Loader 举的一个例子，也是用的这个loader；
首先是安装
npm i -D vue-svg-loader
然后是配置loader
配置分cli2 和 cli3
- cli2 创建工程中 webpack 配置
module.exports = {
module: {
rules: [
{
test: /\.svg$/,
use: [
'vue-loader',
'vue-svg-loader',
],
},
],
},
};
- cli3
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');
},
};
最后就能像使用普通Vue组件那样使用 svg icon 了
<template>
<div>
<VueLogo />
</div>
</template>
<script>
// VueLogo 可以随意 rename
import VueLogo from './public/vue.svg';
export default {
name: 'Demo',
components: {
VueLogo
}
};
</script>
