当前位置：首页 > web >正文

Vue 3 项目中引入 Iconify

web 2025/9/7 10:13:18

Iconify 简介

Iconify 是一个开源的图标管理工具，它提供了超过 100,000 个高质量图标，来自自 100 多个流行图标集（如 Material Icons、Font Awesome、Ant Design Icons 等）。与传统图标库不同，Iconify 采用按需加载方式，只加载你实际使用的图标，大幅减少资源体积。

主要特点：

包含海量图标，覆盖几乎所有常见图标集
支持多种格式（SVG、JSON 等）
无需完整导入整个图标库，按需加载
支持自定义颜色、大小等样式
与主流前端框架无缝集成

在 Vue 3 项目中使用 Iconify

1. 安装必要的包

首先需要安装 Iconify 核心库和 Vue 3 组件：

npm install @iconify/iconify @iconify/vue
# 或使用 yarn
yarn add @iconify/iconify @iconify/vue

2. 基本使用方法

在 Vue 组件中引入并使用 Icon 组件：

<template><div><!-- 使用 Material Icons 的 home 图标 --><Icon icon="material-symbols:home" class="icon" /><!-- 使用 Font Awesome 的 user 图标 --><Icon icon="fa:user" class="icon" /><!-- 使用 Ant Design 的 setting 图标 --><Icon icon="ant-design:setting-outlined" class="icon" /></div>
</template><script setup>
import { Icon } from '@iconify/vue';
</script><style>
.icon {width: 24px;height: 24px;color: #333;margin-right: 16px;
}
</style>

3. 自定义图标

可以通过 props 自定义图标属性：

<Icon icon="mdi:heart" :width="32" :height="32" color="#ff0000" :rotate="180" flip="horizontal"
/>

4. 离线使用图标（可选）

如果需要在离线环境使用，可以提前安装特定图标集：

# 安装 Material Icons 图标集
npm install @iconify/icons-material-symbols# 安装 Font Awesome 图标集
npm install @iconify/icons-fa

然后直接引入使用：

<template><Icon :icon="homeIcon" />
</template><script setup>
import { Icon } from '@iconify/vue';
import homeIcon from '@iconify/icons-material-symbols/home';
</script>