iconify/vue

### 如何在 Vue 项目中使用 Iconify 图标库

#### 安装依赖包
为了能够在 Vue 项目中使用 Iconify 图标库，首先需要安装 `@iconify/vue` 这个官方提供的组件库。

npm install --save-dev @iconify/vue

此命令会下载并配置好所需的开发环境以便后续操作[^4]。

#### 配置 Vite 插件
对于采用 Vite 构建工具的 Vue 3 应用程序来说，在项目的根目录下找到 vite.config.ts 文件，并引入 Icons 插件来简化图标导入过程：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Icons from 'unplugin-icons/vite'

export default defineConfig({
  plugins: [
    vue(),
    Icons({})
  ]
})

这段代码片段展示了如何设置 Vite 的插件选项以支持自动识别和优化图标资源文件[^3]。

#### 使用图标
完成上述准备工作之后就可以很方便地在模板里直接引用所需的具体图标了。例如要显示 Carbon 设计系统的 accessibility 图标，则可以在 .vue 组件内这样写：

<template>
  <div>
    <!-- 直接通过标签形式调用 -->
    <IconAccessibility />
    
    或者
    
    <!-- 动态绑定 props 属性 -->
    <component :is="'IconAccessibility'" />
  </div>
</template>

<script setup lang="ts">
// 如果是 TypeScript 项目则需声明类型定义
import type { Component } from "vue";
const IconAccessibility = "~icons/carbon/accessibility" as unknown as Component;
</script>

这里给出了两种不同的方式用于展示单个图标实例；一种是以静态 HTML 标签的形式呈现，另一种则是利用动态组件特性实现更灵活的应用场景[^1]。