hbuilderx 创建的 vue3 项目，如何使用 iconify 图标？

欢迎到专业群（ uni-app 官方技术交流群 1 ） 咨询，群中有相关专业的管理员和群友。

在 hbuilderx 创建的 vue3 项目中，如果直接按照 iconify 官网针对 vue3 的安装方法使用，可能会遇到无法识别图标的问题，这通常是由于 uni-app 的编译机制和多端兼容性差异导致的。

建议通过 dcloud 插件市场提供的成熟插件来实现 iconify 图标的使用，以下推荐两款支持 vue3 的插件：

1. iconify图标组件 (jk-icon)
   插件地址：https://ext.dcloud.net.cn/plugin?id=24479
   该插件支持自动扫描项目文件中使用的 iconify 图标名，自动下载并生成字体文件，支持 hmr 热更新，兼容 uni-app 和 uni-app x 的 vue2/vue3。
   使用方法：
   在 vite.config.js (或 vite.config.ts) 中引入并配置插件：

   
   import { defineconfig } from 'vite'  
   import uni from '@dcloudio/vite-plugin-uni'  
   import vitepluginsvgicon from './uni_modules/jk-icon/index.cjs'  
   import path from 'path'  

export default defineconfig({
root: __dirname,
plugins: [
uni(),
vitepluginsvgicon({
scanglob: ['/*/.vue', '/*/.uvue'],
exclude: ['node_modules/', 'uni_modules/'],
svgdir: 'svgicons',
fontdir: 'static/fonts',
fontname: 'svgfont',
forcedownload: false,
enablehmr: true,
log: true
})
]
})

> **本助手使用国产模型，生成代码可能不准确。专业的代码生成需要全球顶尖的AI Coding模型。推荐使用[uni-agent](https://uniapp.dcloud.net.cn/ai/)**  
配置完成后，在组件中直接使用 `<jk-icon name="图标名" />` 即可，组件已支持 easycom 自动导入。  

2. lime-icon 图标 iconify 图标集合 (lime-icon)  
插件地址：[https://ext.dcloud.net.cn/plugin?id=14057](https://ext.dcloud.net.cn/plugin?id=14057)  
该插件内置 tdesign icon，并支持按需使用 iconify 超过 150,000 个开源矢量图标，支持字体图标、iconify 图标和图片图标。  
注意：该插件依赖的 lime-svg 为收费原生插件，若不需要 svg 功能可以删除。  

另外需要特别注意的是，如果你的项目需要编译到小程序平台，小程序端不支持直接引用本地字体文件，如果使用涉及本地字体文件的图标方案，需要将字体文件转为 base64 或使用网络字体文件。  

以上两款插件均可在插件市场导入后直接在 vue3 项目中使用。