基于Vue实现自定义组件的方式引入图标

当我们在Vue项目中需要使用图标时，通常的做法是通过引入第三方的iconfont或者使用SVG等方式，但是如果项目需要使用自定义的图标时，我们需要基于Vue实现自定义组件的方式引入图标，下面是该过程的完整攻略：

1. 创建Vue组件

首先，我们需要创建一个Vue组件，该组件的目的是用来渲染我们自定义的图标。组件代码如下：

<template>
  <svg v-bind="$attrs" :class="[iconClass]">
    <use :href="iconHref"></use>
  </svg>
</template>

<script>
export default {
  name: 'Icon',
  props: {
    name: {
      type: String,
      required: true
    },
    prefix: {
      type: String,
      default: 'iconfont'
    }
  },
  computed: {
    iconClass() {
      return `${this.prefix} ${this.prefix}-${this.name}`
    },
    iconHref() {
      return `#${this.iconClass}`
    }
  }
}
</script>

<style scoped>
/* 这里可以定义自定义图标的样式 */
</style>

该组件接受两个props，分别为图标的名称（name）和图标的前缀（prefix），其中前缀的默认值为iconfont。computed属性中根据传入的name和prefix生成两个动态变量iconClass和iconHref，分别用来设置图标的class和href属性。

1. 导入自定义图标

我们可以将所有的自定义图标都放在一个单独的svg文件中，然后通过Vue Cli提供的svg-sprite-loader插件将这些图标打包成一个雪碧图。下面是示例代码：

<template>
  <div>
    <icon name="icon-heart" />
    <icon name="icon-star" />
  </div>
</template>

<script>
import Icon from './Icon.vue' // 导入自定义图标组件
export default {
  name: 'App',
  components: {
    Icon
  }
}
</script>

<style>
/* 可以在这里统一设置所有图标的样式 */
</style>

<svg xmlns="http://www.w3.org/2000/svg" style="display:none">
  <!-- 自定义图标列表 -->
  <symbol id="icon-heart" viewBox="0 0 1024 1024">
    <!-- 此处省略自定义图标的path定义 -->
  </symbol>
  <symbol id="icon-star" viewBox="0 0 1024 1024">
    <!-- 此处省略自定义图标的path定义 -->
  </symbol>
</svg>

在上面的示例中，我们首先导入自定义图标组件Icon.vue，然后在代码中使用标签引用自定义图标，并通过name属性来指定图标的名称。最后，将自定义图标列表放在一个SVG文档中，并将该文档的display属性设置为none，从而将SVG文档隐藏。

1. 在Vue项目中使用自定义图标

最后，我们只需要在Vue项目的任何地方使用自定义图标即可。例如：

<template>
  <div>
    <icon name="icon-heart" />
    <icon name="icon-star" />
  </div>
</template>

<script>
import Icon from '../components/Icon.vue' // 导入自定义图标组件
export default {
  name: 'App',
  components: {
    Icon
  }
}
</script>

<style>
/* 可以在这里统一设置所有图标的样式 */
</style>

在这个示例中，我们在App.vue组件中使用了自定义图标组件，然后使用name属性来指定图标的名称。最后，我们将Icon组件导入并注册，这样就可以在Vue项目中使用自定义图标了。

通过这种方式，我们可以轻松地将自定义图标集成到Vue项目中，并且可以使用Vue的组件化开发方式来灵活管理和使用这些图标。