一步步创建vue-element-admin框架实现007-图标svg使用

一步步创建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文件的名字一样就可以匹配上使用了