一步步创建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）新增文件夹srcicons

直接拷贝vue-admin-template的：srcicons文件夹里全部文件

svg文件夹 index.js svgo.yml

2）新增组件文件：srccomponentsSvgIconindex.vue

直接拷贝vue-admin-template的

3）在main.js，引入配置

三、使用svg图标

1）srclayoutcomponentsSidebarSidebarItem.vue

直接拷贝vue-admin-template的

2）配置菜单图标

把srclayoutcomponentsSidebarSidebarItem.vue，引用Item组件

3）在路由配置图标使用：src outerindex.js

icon和svg文件的名字一样就可以匹配上使用了