Vue中icon图标问题的解决过程

公司组件做法

将地债实现相关代码记录下来方便之后使用，环境为 vue2 + webpack4

• 安装svg-sprite-loader，在vue.config.js中添加如下数据

  module.exports = {
  
    chainWebpack: config => {
      // 对svg的处理 具体实现 <svg-icon icon-class="nav"></svg-icon> 有样式要求：<svg-icon class-name="className"  icon-class="nav"></svg-icon>
      config.module.rules.delete('svg') // 重点:删除默认配置中处理svg
      config.module
        .rule('svg-sprite-loader')
        .test(/\.svg$/)
        .include
        .add(resolve('src/icons')) // 处理svg目录
        .end()
        .use('svg-sprite-loader')
        .loader('svg-sprite-loader')
        .options({
          symbolId: 'icon-[name]'
        }).end()
  }

• 在 src/icons下创建 svg 文件夹和index.js文件，svg文件夹用于放置下载好的svg文件，而index.js用于批量引入已经全局注册组件，因此需要在 main.js下添加 import './icons',index.js 内容如下

  import Vue from 'vue'
  import SvgIcon from '@/components/SvgIcon'// svg组件
  
  // 全局注册svg组件
  Vue.component('svg-icon', SvgIcon)
  
  const req = require.context('./svg', false, /\.svg$/)
  const requireAll = requireContext => requireContext.keys().map(requireContext)
  requireAll(req)

• 创建src/components下创建svgIcon组件

  <template>
    <svg :class="svgClass" aria-hidden="true">
      <use :xlink:href="iconName"/>
    </svg>
  </template>
  
  <script>
  export default {
    name: 'SvgIcon',
    props: {
      iconClass: {
        type: String,
        required: true
      },
      className: {
        type: String,
        default: ''
      }
    }
    computed: {
      iconName() {
        return `#icon-${this.iconClass}`
      },
      svgClass() {
        if (this.className) {
          return 'svg-icon ' + this.className
        } else {
          return 'svg-icon'
        }
      }
    }
  }
  </script>
  
  <style scoped>
  .svg-icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
  }
  </style>