Vite 中使用 iconify 图标

在线使用

参考 iconify-for-vue 使用文档

pnpm install --save-dev @iconify/vue

<script setup>
import { Icon } from "@iconify/vue";
</script>

<template>
<Icon icon="mdi:home" />
</template>

在线使用的缺点：需要联网才能展示图标。

离线使用

pnpm install --save @iconify/vue

# 并且需要安装要使用的图标库的 json 文件。
# 比如：这里使用 ant-design, element-plus(ep), Remix(ri) 三个图标库
pnpm install --save @iconify-json/ant-design @iconify-json/ep @iconify-json/ri

然后在 main.js 中预加载所有图标

// 预加载全部 ep、ri、ant-design 图标，以实现离线使用 iconify
import { addCollection, Icon } from '@iconify/vue'
import epIcons from '@iconify-json/ep/icons.json'
import riIcons from '@iconify-json/ri/icons.json'
import antDesignIcons from '@iconify-json/ant-design/icons.json'
addCollection(epIcons)
addCollection(riIcons)
addCollection(antDesignIcons)

// 全局注册 @iconify/vue 中的 Icon 组件，避免多次导入
app.component('Icon', Icon)

最后正常使用即可

<script setup>
// 全局导入 Icon 组件后，这里就不需要导入了
// import { Icon } from "@iconify/vue";
</script>

<template>
<Icon icon="mdi:home" />
</template>