创建svg
-
在iconfont上复制svg代码
-
在vue-cli4的public中新建一个icons文件夹，新建svg文件，把复制的svg代码粘贴进去
public里创建一个index.js实现svg自动导入，然后在main.js中引入这个index.js
//图标自动导入
//利用webpack的require.context
//返回的req是指去加载svg目录中的模块的函数
const req = require.context('./icons',false,/\.svg$/)
console.log(req.keys())
req.keys().map(req)
配置vue.config.js
-
先通过vue inspect --rule svg看看默认的svg规则
可以看到，规则是通过正则来匹配后缀名为svg的文件，通过file-loader去加载，以及输出目录
- 因为要自己指定检测规则，所以要让默认规则不要检测我们的svg文件，通过exclude来排除检测，同时注意用path模块输出文件绝对路径，避免出错
const path = require('path')
//将传入的相对路径转换为绝对路径
function resolve(dir) {
return path.join(__dirname, dir);//__dirname为当前文件所在路径,dir是传递进来的相对路径
}
module.exports = {
chainWebpack:(config)=>{
config.module.rule('svg')
.exclude.add(resolve('public/icons'))
}
}
再查看一下规则
- 下载svg-sprite-loader，创建新规则icons
const path = require('path')
//将传入的相对路径转换为绝对路径
function resolve(dir) {
return path.join(__dirname, dir);//__dirname为当前文件所在路径,dir是传递进来的相对路径
}
module.exports = {
chainWebpack:(config)=>{
config.module.rule('svg')
.exclude.add(resolve('public/icons'))
//添加svg-sprite-loader
config.module.rule('icons')
.test(/\.svg$/)//设置匹配正则
.include.add(resolve('public/icons'))//加入svg文件目录
.end()//add完上下文进入了include数组,需要回退
.use('svg-sprite-loader')//添加loader
.loader('svg-sprite-loader')//切换上下文到loader
.options({symbolId: 'icon-[name]'})//指定使用的方式
}
}
规则如下
- vue文件中引入svg
<svg>
<use xlink:href="#icon-cookie"></use>
</svg>
<svg>
<use xlink:href="#icon-icecream"></use>
</svg>
效果：
