组件 vue2-svg-icon的使用

vue2-svg-icon 是一个 Vue.js 的 SVG 图标组件，可以用于快速加载和使用 SVG 图标。以下是使用步骤：

1. 安装 vue2-svg-icon

可以使用 npm 或 yarn 进行安装：

npm install vue2-svg-icon --save

或者

yarn add vue2-svg-icon

2. 引入组件

在你的 Vue.js 组件中引入 vue2-svg-icon：

import SvgIcon from 'vue2-svg-icon'
Vue.component('svg-icon', SvgIcon)

3. 使用组件

在模板中使用 `svg-icon` 标签，并指定 `icon` 属性为对应的图标名称：

<svg-icon icon="arrow-up"></svg-icon>

其中 `arrow-up` 是图标的名称，具体的图标名称需要查看你所使用的 SVG 图标库。

4. 配置 SVG 图标库

vue2-svg-icon 默认使用的是 [icomoon](https://icomoon.io/) 的 SVG 图标库，你可以在 `SvgIcon` 组件中通过 `set` 方法来配置使用其他的 SVG 图标库。

例如，如果你想使用 [fontawesome](https://fontawesome.com/) 的 SVG 图标库，可以这样配置：

import SvgIcon from 'vue2-svg-icon'
import { library } from '@fortawesome/fontawesome-svg-core'
import { faCoffee } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

library.add(faCoffee)
Vue.component('font-awesome-icon', FontAwesomeIcon)

SvgIcon.set({
  name: 'fontawesome',
  classPrefix: 'fa-',
  classSuffix: '',
  defaultWidth: '1em',
  defaultHeight: '1em'
})

这里我们使用了 `@fortawesome/fontawesome-svg-core` 和 `@fortawesome/free-solid-svg-icons` 来引入 fontawesome 的 SVG 图标库，并且配置了 `SvgIcon` 组件使用 `fontawesome` 图标库，并指定了图标的 class 前缀为 `fa-`，这样我们就可以在模板中使用 `fa-coffee` 这个图标了：

<svg-icon icon="fa-coffee"></svg-icon>

更多关于 vue2-svg-icon 的使用方法，可以参考它的官方文档：https://github.com/cenkai88/vue-svg-icon#readme