在vue-cli3中优雅的使用 icon

　首先我们得有图标
- 这里我们从网上下载svg文件或者UI给你导出svg文件
- 我们在src 文件下新建一个放置svg 文件的文件夹 @/src/icons.将所有 icon 放在这个文件夹下。

　创建 icon-component 组件

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


<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';

@Component({ components: {} })
export default class SvgIcon extends Vue {
  @Prop({ default: null, type: String })
  iconClass!: String;

  @Prop({ default: '', type: String })
  className!: String;

  @Prop({ default: null, type: String })
  svgColor!: String;

  get iconName() {
    return `#icon-${this.iconClass}`;
  }

  get svgClass() {
    if (this.className) return `svg-icon ${this.className}`;
    return 'svg-icon';
  }
}
</script>

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

　在icons 文件夹放一个index.js 这个js 的作用是引入 icon组件并全局注册并实现自动引入 @/src/icons 下面所有的图标了
- 之后我们就要使用到 webpack 的 require.context。很多人对于 require.context可能比较陌生，直白的解释就是
  - 　　require.context("./test", false, /.test.js$/); 这行代码就会去 test 文件夹（不包含子目录）下面的找所有文件名以 .test.js 结尾的文件能被 require 的文件。更直白的说就是我们可以通过正则匹配引入相应的文件模块。
- ```
import Vue from 'vue';
import IconSvg from '@/components/IconSvg/IconSvg.vue';

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


// requires and returns all modules that match
const requireAll = requireContext => requireContext.keys().map(requireContext);
// import all svg
const req = require.context('./svg', true, /\.svg$/);
requireAll(req);
```

　svg-sprite-loader 依赖 install

它是一个 webpack loader ，可以将多个 svg 打包成 svg-sprite 。
我们发现vue-cli默认情况下会使用 url-loader 对svg进行处理，会将它放在/img 目录下，所以这时候我们引入svg-sprite-loader 会引发一些冲突。

//默认`vue-cli` 对svg做的处理，正则匹配后缀名为.svg的文件，匹配成功之后使用 url-loader 进行处理。
 {
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    loader: 'url-loader',
    options: {
      limit: 10000,
      name: utils.assetsPath('img/[name].[hash:7].[ext]')
    }
}

- 解决方案有两种，最简单的就是你可以将 test 的 svg 去掉，这样就不会对svg做处理了，当然这样做是很不友善的。
  - 你不能保证你所有的 svg 都是用来当做 icon的，有些真的可能只是用来当做图片资源的。
  - 不能确保你使用的一些第三方类库会使用到 svg。
- 所以最安全合理的做法是使用 webpack 的 exclude 和 include ，让svg-sprite-loader只处理你指定文件夹下面的 svg，url-loaer只处理除此文件夹之外的所以 svg，这样就完美解决了之前冲突的问题。代码如下
- 这只是cli2 的配置， cli3 配置都在vue.config.js 里面详情参看文档 webpack相关 | vue-cli3
- 这里吧我自己写的给贴出来
- ```
module.exports = {
  lintOnSave: true,
  baseUrl: './',
  productionSourceMap: process.env.NODE_ENV !== 'production',
  chainWebpack: (config) => {
    config.resolve.alias.set('@images', resolve('./src/assets/images'));
    config.resolve.alias.set('@svg', resolve('./src/icons/svg'));
    config.module.rules.delete('svg'); // 重点:删除默认配置中处理svg,
    config.module
      .rule('svg-sprite-loader')
      .test(/\.svg$/)
      .include
      .add(resolve('src/icons/svg')) // 处理svg目录
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]',
      });
  },
......
```

　　这样配置好了,开始使用了.

<icon-svg
    icon-class="send"
    className="icon"
/>

效果

参考链接: 手摸手，带你优雅的使用 icon

更详细的可以去看看上面链接,大神带你飞

在vue-cli3中优雅的使用 icon

推荐阅读