[ Vue ] vue-cli3生成项目下的自定义 svg 图标库

前置步骤：添加依赖

yarn add svg-sprite-loader -D

[可选] yarn add svgo svgo-loader -D

依赖说明：

svg-sprite-loader

sprites 会被自动渲染和注入页面，您只需通过 <svg><use xlink:href="#id"></use></svg>

工作原理是: 利用svg的symbol元素，将每个icon包括在symbol中，通过use元素使用该symbol.

 svgo svgo-loader

用于精简 svg 代码

第一步：创建图标库文件夹

第二步：配置 vue.config.js

const { resolve } = require('path')

module.exports = {
  chainWebpack: config => {
    // 在 svg 规则中排除我们的图标库文件夹目录
    config.module
      .rule('svg')
      .exclude.add(resolve('src/icons'))
      .end()
    // 创建 icons 规则，设置文件夹包含我们的图标库文件夹目录
    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()
      .use('svgo-loader')
      .loader('svgo-loader')
      .options({
        plugins: [{ removeXMLNS: true }]
      })
      .end()
  }
}

第三步:  编写 SvgIcon 组件

<template>
  <svg class="svg-icon"
    aria-hidden="true"
    v-on="$listeners"
    :style="svgStyles">
    <use :xlink:href="iconName" />
  </svg>
</template>

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

@Component
export default class SVGIcon extends Vue {
  @Prop({ required: true })
  readonly name!: string

  @Prop({ default: 20 })
  readonly size!: number

  @Prop(String)
  readonly color!: string

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

  get svgStyles() {
    return {
      width: this.size + 'px',
      height: this.size + 'px',
      fill: this.color
    }
  }
}
</script>

第四部: 在入口文件 main.js 批量引入图标，并注册全局组件

/**
 * 注册SVG图标库和图标组件
 * @param Vue
 */
function registerMZIcon(Vue: VueConstructor) {
  const svgs = require.context('@/icons', false, /\.svg$/)
  const requireAll = (requireContext: __WebpackModuleApi.RequireContext) =>
    requireContext.keys().map(requireContext)
  requireAll(svgs)
  Vue.component('mz-icon', SvgIcon)
}

效果：

你会在 body 的第一个子 dom 看到下图效果

使用 svg 图标组件的地方

总结

这种方法有点像 css 的 class， 先声明了样式(图标)，在挂载的这个 class(use[xlink:href]) 的 dom 上就会有同样的样式(图标)。