目录
一步步创建vue-element-admin框架实现007-图标svg使用
使用说明:
一步步创建vue-element-admin框架是基于vue-element-admin和vue-admin-template基础版的代码来实现的,文章会经常说直接拷贝项目的文件
一、安装插件
npm install svg-sprite-loader -D
npm install svgo -D
安装成功之后在vue.config.js配置
module.exports = {
...,
chainWebpack(config) {
// set svg-sprite-loader
config.module
.rule('svg')
.exclude.add(resolve('src/icons'))
.end()
config.module
.rule('icons')
.test(/\.svg$/)
.include.add(resolve('src/icons'))
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'icon-[name]'
})
.end()
}
二、配置必要组件文件
1)新增文件夹src\icons
直接拷贝vue-admin-template的:src\icons文件夹里全部文件
- svg文件夹
- index.js
- svgo.yml
2)新增组件文件:src\components\SvgIcon\index.vue
直接拷贝vue-admin-template的
3)在main.js,引入配置
三、使用svg图标
1)src\layout\components\Sidebar\SidebarItem.vue
直接拷贝vue-admin-template的
2)配置菜单图标
把src\layout\components\Sidebar\SidebarItem.vue,引用Item组件
3)在路由配置图标使用:src\router\index.js
icon和svg文件的名字一样就可以匹配上使用了