网上已经有很多文章写了相似的例子,不过自己实践之后还是把过程记录下来,这样知识就是自己的了。
版本:@vue/cli 4.4.1
实现内容:1.vue载入svg 2.能够更改svg样式 3.svg无限旋转
1.使用的loader:svg-sprite-loader、svgo-loader
我们在vue.config.js
文件里找到chainWebpack
属性,添加如下代码:
chainWebpack: config => {
// ......
config.module
.rule('svg')
.exclude.add(resolve('src/assets/icons/svg'))
.end();
config.module
.rule('icons')
.test(/\.svg$/)
.include.add(resolve('src/assets/icons/svg'))
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'icon-[name]',
})
.end();
// .......
2.需要安装的loader:svg-sprite-loader、svgo-loader
npm i svg-sprite-loader svgo-loader -D
3.引入svg图片
我们在src/assets
下新建icons文件夹,文件夹里再新建svg文件夹,将svg图片放至svg文件夹里。(具体路径可根据自己习惯配置)
4.统一引入svg图片
在src下新建icons文件夹,新建index.js文件(要注意路径的配置):
const req = require.context('@/assets/icons/svg/', false, /\.svg$/);
const requireAll = requireContext => requireContext.keys().map(requireContext);
requireAll(req);
5.在main.js中引入
import './icons';
6.在组件中使用
<!-- #icon- 为icon的前缀,XXX为icon名称 -->
<svg>
<use