用途:在任意 Vite + Vue3 项目中快速接入与 pure-admin 思路一致的 Iconify 图标体系,让业务层只关心传什么图标,不关心底层是离线、在线还是组件对象。
主要能力:提供 IconifyIconOffline(离线图标)、IconifyIconOnline(在线图标)、useRenderIcon(统一分流渲染)、offlineIcon(本地离线图标映射与兼容别名),以及 useIconEffect 为 SVG 图标注入多色渐变填充和呼吸动画。
使用方式:安装依赖 pnpm add -D @iconify/json @iconify/vue unplugin-icons vite-svg-loader,可选 pnpm add @pureadmin/utils;在 vite.config.ts 配置 unplugin-icons 插件;按映射表复制 6 个 ReIcon 文件到 src/components/ReIcon;可选在入口注册 setupIcon。业务中模板直出用 <IconifyIconOffline icon="ep/menu" /> 或 <IconifyIconOnline icon="ri:home-4-line" />,配置驱动用 useRenderIcon。使用 GSAP 动画策略需 pnpm add gsap。
适用场景:新项目首次接入 iconify、老项目统一图标渲染入口、菜单/路由/表格配置驱动返回 Component 类型图标、需要兼容旧 IconXxx 命名。
限制:资料未提供具体版本兼容范围与性能数据;离线图标扩充需手动维护 offlineIcon.ts;旧 IconXxx 仅作兼容层,新代码不建议使用;集成改造应最小补丁,避免整文件覆盖丢失注释。