在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. 此方案也可用于有網絡環境，作為性能優化手段減少外部請求