在Vite+Vue3项目中实现离线Iconify图标方案

项目背景

当前项目需要部署到无网络连接的离线环境，因此需要将Iconify图标集打包到项目构建结果中，实现完全离线使用。

技术环境

• 框架: Vue 3
• 构建工具: Vite
• 核心依赖:

  "@iconify/json": "^2.2.228",    // 提供完整的图标集合
  "@iconify/vue": "^4.1.1",       // Vue图标组件
  "@tomjs/vite-plugin-iconify": "^1.2.1"  // Vite插件，用于打包图标
  

实现步骤

1. Vite配置

在vite.config.ts中进行配置，将图标集打包到最终产物中：

import { defineConfig } from 'vite'
import iconify from '@tomjs/vite-plugin-iconify'export default defineConfig({plugins: [iconify({ local: true // 将所有图标集打包进dist目录// local: ['ep'] // 可选：只打包指定图标集(如element-plus)}) ]
})

图标集选择说明：所有可用图标集可在node_modules/@iconify/json/collections.json中查看。在线预览图标可访问icones.js.org。

2. 封装图标组件

创建TheIcon.vue组件作为统一的图标渲染入口：

<script setup>
import { renderIcon } from '@/utils'defineProps({icon: {type: String,required: true,},size: {type: Number,default: 14,},color: {type: String,default: undefined,},
})
</script><template><component :is="renderIcon(icon, { size, color })" />
</template>

3. 实现渲染工具函数

在工具函数文件中添加图标渲染逻辑：

import { h } from 'vue'
import { Icon } from '@iconify/vue'
import { NIcon } from 'naive-ui'export function renderIcon(icon, props = { size: 12 }) {return () => h(NIcon, props, { default: () => h(Icon, { icon }) })
}

4. 在项目中使用

在任意Vue组件中引入并使用：

<template><TheIcon icon="material-symbols:add" :size="18" class="mr-5" />
</template><script setup>
import TheIcon from '@/components/icon/TheIcon.vue'
</script>

方案优势

1. 完全离线支持：所有图标资源打包到构建结果中，不依赖网络请求
2. 灵活选择：可按需打包全部或部分图标集，控制构建体积
3. 统一接口：通过封装组件提供一致的调用方式
4. 类型安全：通过Props定义确保使用规范

注意事项

1. 打包全部图标集会显著增加构建体积，建议根据实际需求选择必要图标集
2. 图标命名格式为集合名:图标名，可在icones.js.org查找可用图标
3. 此方案也可用于有网络环境，作为性能优化手段减少外部请求