今天学习 vben 项目，尝试局域网部署的时候，发现了项目中的图标都是调用 https://api.iconify.design 或其他的接口调用的。我立马想到了以前尝试 2 种方案。
方案 1：使用 addCollection 将 @iconify/json 的 *.json 文件直接添加到合集中，这样打包的时候直接加进去了。这种方式一般用的比较多，在 issues 中也能看到不少。
import carbon from '@iconify/json/json/carbon.json'
import el from '@iconify/json/json/el.json'
import fa from '@iconify/json/json/fa.json'
import lucide from '@iconify/json/json/lucide.json'
import { addCollection } from '@iconify/vue'
addCollection(el)
addCollection(carbon)
addCollection(fa)
addCollection(lucide)方案 2：使用 Iconify API providers
自定义 API 服务，为此我以前写了个 @tomjs/vite-plugin-iconify 插件将 @iconify/json 或 @iconify-json/lucide 这种独立的包在打包的时候直接复制到 dist 目录，并在 index.html 添加了本地地址。
<script>
IconifyProviders = {
'': {
resources: ['/npm/@iconify/json@2.2.454','https://api.iconify.design'],
rotate: 1000,
},
};</script>在 internal/vite-config 中安装 pnpm add -D @tomjs/vite-plugin-iconify 引用
import iconifyPlugin from '@tomjs/vite-plugin-iconify';
然后在 internal/vite-config/src/plugins/index.ts 的 loadApplicationPlugins 方法中根据按需添加
{
condition: true,
plugins: () => [iconifyPlugin({
local: ['carbon', 'ep', 'fa','fa-solid', 'lucide','ant-design'],
})],
}在 internal/vite-config 运行 pnpm tsdown 编译 vite-config
结束语：编译后预览，我发现有些 element 的图标一 直加载不出来，走的是 api 方式，我傻愣愣的调试了 2 个小时，最后发现是把 element-plus 的 ep 当成 el 缩写了，然后在 issues 中都没找到这个加载不出来的原因🥲，我还猜测是不是哪个库写死了 api 接口。
今天学习 vben 项目，尝试局域网部署的时候，发现了项目中的图标都是调用 https://api.iconify.design 或其他的接口调用的。我立马想到了以前尝试 2 种方案。
方案 1：使用 addCollection 将
@iconify/json的*.json文件直接添加到合集中，这样打包的时候直接加进去了。这种方式一般用的比较多，在issues中也能看到不少。方案 2：使用 Iconify API providers
自定义 API 服务，为此我以前写了个 @tomjs/vite-plugin-iconify 插件将
@iconify/json或 @iconify-json/lucide 这种独立的包在打包的时候直接复制到dist目录，并在index.html添加了本地地址。在
internal/vite-config中安装pnpm add -D @tomjs/vite-plugin-iconify引用然后在
internal/vite-config/src/plugins/index.ts的loadApplicationPlugins方法中根据按需添加在
internal/vite-config运行pnpm tsdown编译vite-config结束语：编译后预览，我发现有些 element 的图标一 直加载不出来，走的是 api 方式，我傻愣愣的调试了 2 个小时，最后发现是把 element-plus 的
ep当成el缩写了，然后在issues中都没找到这个加载不出来的原因🥲，我还猜测是不是哪个库写死了 api 接口。