当前位置：首页 > news >正文

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

news 2025/8/20 7:25:14

在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>