unplugin-icons封装icon组件

unplugin-icons 是一个用于管理和导入 SVG 图标的 Vue.js 插件。借助 unplugin-icons，您可以轻松地将 SVG 图标导入到您的 Vue.js 项目中，并将其作为组件使用。

要使用 unplugin-icons，您需要安装并配置它。您可以使用 npm 或 yarn 安装 unplugin-icons，然后将其添加到您的 Vue.js 项目中。您需要在 Vue.js 项目中创建一个 icons.js 文件，并在其中导入您想要使用的 SVG 图标。最后，您可以在您的 Vue.js 组件中使用这些 SVG 图标作为组件。

以下是一个简单的示例：

1. 安装 unplugin-icons：

npm install unplugin-icons

2. 在 Vue.js 项目中创建 icons.js 文件，并导入您想要使用的 SVG 图标：

import { defineIcons } from 'unplugin-icons'

// 导入 svg 图标
import { mdiFacebook, mdiTwitter, mdiInstagram } from '@mdi/js'

// 定义图标
const icons = defineIcons({
  facebook: mdiFacebook,
  twitter: mdiTwitter,
  instagram: mdiInstagram,
})

export default icons

3. 在 Vue.js 组件中使用 SVG 图标作为组件：

<template>
  <div>
    <facebook-icon />
    <twitter-icon />
    <instagram-icon />
  </div>
</template>

<script>
import icons from './icons'

export default {
  components: icons,
}
</script>

在上面的代码中，我们首先在 icons.js 文件中定义了三个 SVG 图标：facebook、twitter 和 instagram。然后，我们将这些 SVG 图标作为组件导入到 Vue.js 组件中，并在组件中使用它们。

使用 unplugin-icons，您可以轻松地在 Vue.js 项目中管理和使用 SVG 图标。