【Vue开发】在Vite+Vue3项目中实现离线Iconify图标方案

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

项目背景

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

技术环境

框架: Vue 3
构建工具: Vite

核心依赖 :

javascript 复制代码

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

实现步骤

1. Vite配置

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

typescript 复制代码

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组件作为统一的图标渲染入口：

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. 实现渲染工具函数

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

javascript 复制代码

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组件中引入并使用：

vue 复制代码

<template>
  <TheIcon icon="material-symbols:add" :size="18" class="mr-5" />
</template>

<script setup>
import TheIcon from '@/components/icon/TheIcon.vue'
</script>

方案优势

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

注意事项

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