项目优化：vue2实现统一管理icon

实现步骤：

一、基本实现

1、创建放置icon的文件夹 ./src/icons

icons
  |-svg

2、使svg-sprite-loader解析 svg文件

• 安装 svg-sprite-loader 用于解析 svg 文件
• 添加webpack配置

// ...
{
  test: /\.svg$/,
  loader: 'svg-sprite-loader',
  include: [resolve('src/icons')],
  options: {
    symbolId: 'icon-[name]'
  }
},
// ...

需要注意的地方：

1. 因为我们只处理指定文件夹下的svg文件，所以要加上include配置
2. 因为vue-cli(版本2.9.6)中默认使用file-loader处理svg文件，所以我们的要添加exclude以下配置

config.module
  .rule('svg')
  .exclude.add(resolve('src/icons'))
  .end()

这个时候我们就可以使用svg格式的icon了

3、使用方法

// 引入图标
import '@/src/icons/svg/qq.svg'

// 使用图标
<svg><use xlink:href="#icon-qq" /></svg>

二、实现icon的自动导入

1、注册全局组件 svg-icon

组件代码

<template>
  <svg class="svg-icon" aria-hidden="true">
    <use :xlink:href="iconName"></use>
  </svg>
</template>

<script>
export default {
  name: 'icon-svg',
  props: {
    iconClass: {
      type: String,
      required: true
    }
  },
  computed: {
    iconName() {
      return `#icon-${this.iconClass}`
    }
  }
}
</script>

<style>
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

全局注册

//引入svg组件 
import IconSvg from '@/components/IconSvg' 

//全局注册icon-svg 
Vue.component('icon-svg', IconSvg)

2、在./src/icons添加index.js

icons
  |- svg
  |- index.js // +

index.js代码如下

import Vue from 'vue'
import SvgIcon from '@/components/svg-icon'

Vue.component('svg-icon', SvgIcon)

const req = require.context('./svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)

3、在入口文件 main.js 中引入 ./icons/index.js

import './icons'

4、使用方法

<icon-svg icon-class="password"></icon-svg>

参考： juejin.cn/post/684490…