vue如何封装自己的Svg图标组件库(svg-sprite-loader)

封装自己的Svg图标组件库可以让我们在项目中更加方便地使用图标，同时也提高了代码的复用性。下面是封装Svg图标组件库(svg-sprite-loader)的完整攻略及示例说明：

1. 安装依赖

首先，我们需要安装一些依赖：

npm install svg-sprite-loader -D
npm install svg4everybody -S

svg-sprite-loader：用于打包 Svg 图标文件。
svg4everybody：用于处理 IE 兼容性问题。

2. 配置webpack

接下来，我们需要在 webpack 配置文件中进行如下配置：

const path = require('path')

module.exports = {
  module: {
    rules: [
      {
        test: /\.svg$/,
        loader: 'svg-sprite-loader',
        include: path.resolve(__dirname, 'src/assets/icons'), // 图标文件所在的目录
        options: {
          symbolId: '[name]-[hash]'
        }
      }
    ]
  }
}

test：用于匹配需要打包的 Svg 图标文件。
include：图标文件所在的目录。
symbolId：对生成的 Symbol 定义一个唯一的 ID。

3. 封装 Svg 组件

接下来，我们可以封装自己的 Svg 组件。以 Vue.js 为例：

<template>
  <svg :class="svgClass" aria-hidden="true">
    <use :href="`#${iconName}`"></use>
  </svg>
</template>

<script>
export default {
  name: 'SvgIcon',
  props: {
    name: {
      type: String,
      required: true
    },
    classList: { // 添加类名
      type: Array,
      default: () => []
    }
  },
  computed: {
    svgClass() {
      return ['svg-icon'].concat(this.classList)
    },
    iconName() {
      return `icon-${this.name}`
    }
  }
}
</script>

<style scoped>
svg {
  pointer-events: none;
  width: 1em;
  height: 1em;
  fill: currentColor;
  vertical-align: middle;
}
</style>

以上是一个简单的 Vue 组件的实现过程，其接收一个 name 属性，用于指定图标文件的名称。在模板中使用 use 元素引用生成的 Symbol。

4. 使用 Svg 组件

封装完 Svg 组件后，我们可以在项目中使用该组件。以 Vue.js 为例：

先在入口文件中引入 svg4everybody：

import svg4everybody from 'svg4everybody'
svg4everybody()

接下来，我们就可以在模板中使用我们封装的 Svg 组件：

<template>
  <div>
    <svg-icon name="home"></svg-icon>
    <svg-icon name="settings"></svg-icon>
  </div>
</template>

<script>
import SvgIcon from './SvgIcon.vue'

export default {
  components: {
    SvgIcon
  }
}
</script>

示例说明

这里介绍两个 Svg 图标示例的使用方法：

示例一：缩放图标

假设我们需要使用一个缩放图标来表示放大/缩小操作，我们可以利用 Sketch 把这个图标转化为 Svg 文件（svg 文件示例代码见下方）。然后我们就可以把这个 Svg 文件放到 src/assets/icons 目录下，然后在需要使用该图标的地方使用自己封装的 SvgIcon 组件，如下：

<svg-icon name="zoom"></svg-icon>

解析后实现的效果如图所示：

zoom-icon

Svg 文件代码示例：

<svg viewBox="0 0 22 22">
  <g transform="translate(3.000000, 2.000000)">
    <path d="M12.5,9.5 L9.5,9.5 L9.5,12.5"></path>
    <circle cx="7.5" cy="7.5" r="7.5"></circle>
    <path d="M7.5,0 C3.879,0 0.932,2.927 0.722,6.482 L0.5,7.5"></path>
    <path d="M7.5,15 C11.121,15 14.068,12.073 14.278,8.518 L14.5,7.5"></path>
  </g>
</svg>

示例二：加载图标

假设我们需要使用一个加载图标来表示加载中状态，同样地，我们可以利用 Sketch 把这个图标转化为 Svg 文件，并把这个 Svg 文件放到 src/assets/icons 目录下。然后我们就可以在需要使用该图标的地方使用自己封装的 SvgIcon 组件，如下：

<svg-icon name="loading"></svg-icon>