在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]',

      });

  },

......

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

　　在vue-cli3中优雅的使用 icon

<icon-svg

    icon-class="send"

    className="icon"
/>

效果在vue-cli3中优雅的使用 icon

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

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

秒客网

在vue-cli3中优雅的使用 icon

相关文章