在JeecgBoot-Vue3项目中使用Iconify图标的完整指南

一、检查依赖安装

 通过package.json验证

在项目根目录打开package.json文件，搜索以下依赖项：

"dependencies": {
    "@iconify/json": "^2.2.320",
    "@iconify/vue": "^4.3.0",
  },

或安装在devDependencies中

"devDependencies": {
    "@iconify/json": "^2.2.107",
    "@iconify/vue": "^4.1.0",
}

二、加载在线图标

要求：服务器能访问外网

1. 组件位置说明

src/components/Icon

2. 基础使用示例

<template>
  <div>
    <!-- 基础用法 -->
    <Icon icon="fa-solid:abacus" />
    
    <!-- 带样式配置 -->
    <Icon 
      :icon="fa-solid:abacus" 
      color="#1890ff" 
      :size="24"
    />
  </div>
</template>

三、离线加载图标

1. 基础使用示例

使用@iconify/vue下的组件Icon

引入离线图标库

使用@iconify/vue中的addCollection方法加载图标库

<template>
  <div>
    <!-- 图标名称的获取见第4点 -->
    <Icon icon="fa-solid:abacus" color="#ff0000" size="30" />
  </div>
</template>

<script setup lang="ts">
// 必须引入Icon组件才能显示离线图标，src/components下的Icon不能显示离线图标
import { Icon, addCollection } from '@iconify/vue'; 
import fasolid from "@iconify/json/json/fa-solid.json"; // 引入离线图标库
onMounted(() => {
  addCollection(fasolid);
});
</script>

离线图标库所在位置：node_modules/@iconify/json/json目录下，有很多图标库，只需加载用到的图标库。

可以断网试一下哦。

问题来了，图标名称从哪里来呢？

四、获取图标名称

1、node_modules/@iconify从/json/json/下的文件中获取。

以fa-solid.json为例，

"前缀:图标名"即为最终引用的图标名称，如fa-solid:abacus。

但这种方式并不知道图标具体长什么样，所以还有第二种方式。

2、线上获取。

在 IconifyIconify - home of open source iconsIconify或Icônes上查询

以第一个网址为例，选择Font Awesome 5 Solid图标库，对应node_modules/@iconify/json/json/fa-solid.json图标库，界面如下：

每个图标库有很多不同的图标。

点击图标，弹出以下界面显示图标详情，图中红色框内的为图标名称，传递给组件Icon即可。