iconify和iconify-api私有化部署方案

iconify的github地址：https://github.com/iconify/iconify

iconify-api的github地址：https://github.com/iconify/api

为什么要用iconify而不用阿里的iconfont呢？问了下AI大致的一些优点如下：

主要得益于其在图标资源、加载机制、使用灵活性、多平台支持、设计协作等方面的优势，具体如下：

1、海量图标集合：Iconify 整合了超过 150 个开源图标集，提供超过 20 万枚图标，覆盖网页、移动端和小程序等多种场景。相比之下，iconfont 虽然也有丰富的图标资源，但 Iconify 的图标数量和来源更为广泛。
2、按需加载机制：Iconify 采用智能按需加载机制，只有实际使用的图标才会被加载，极大减少了资源体积，避免打包所有图标，有助于提升页面加载速度。而 iconfont 如果是全量引入，可能会造成额外的包体积。
3、多格式支持与代码集成能力：Iconify 支持直接生成 SVG、React、Vue、Flutter 等框架代码，支持一键复制，代码集成能力可大幅缩短开发周期。iconfont 虽然也支持多种格式，但在代码集成方面可能不如 Iconify 便捷。
4、动态配色与样式定制：Iconify 支持在线调整图标颜色与尺寸，实时预览效果，开发者可以通过 CSS 来修改图标的颜色、大小、阴影等视觉效果，提供了高度的灵活性。iconfont 虽然也支持颜色和样式的定制，但在动态配色方面可能不如 Iconify 灵活。
5、跨平台与跨框架支持：Iconify 适用于 React、Vue、Svelte 等主流前端框架，且服务端渲染友好，完美支持 SSR 应用。iconfont 虽然也支持多平台应用，但在跨框架支持方面可能不如 Iconify 全面。
6、设计协作与维护成本：Iconify 支持从 Figma 等设计工具直接导入图标，省去了学习特定设计规范的心智负担，前端研发和 UI 设计可以直接打通，无需使用第三方平台作为中转。而 iconfont 需要设计侧了解其设计规范，按规范设计图标，维护自定义图标库，然后将图标上传到 iconfont，增加了设计侧的工作量。
7、开源与免费：Iconify 是开源项目，大多数图标集都采用宽松的许可协议，个人与商业项目均可免费使用，无需署名。iconfont 虽然也有免费资源，但在某些情况下可能需要考虑版权和许可问题。

 

一、我先介绍下整个使用流程是怎么用的，已私有化部署的使用场景为例，前端用的react+vite+ts

1.1. 前端项目准备工作(安装react的iconify的包）

 npm install @iconify/react --save

1.2. 处理私有化前端api配置 （在入口文件，app.tsx里）

import { addAPIProvider, Icon } from '@iconify/react';

// 这个local名字可以随意起，表示这个私有化部署的标识前缀名，识别到这个就会去请求到resources里面的接口地址
addAPIProvider('local', {
  resources: ['http://localhost:3000'], // 这里我本地启动iconify-api项目，地址就写的这个，3000端口根据自己启动项目设置的来，发线上换下这里地址为线上
});

// 下面就可以直接使用自己私有化部署的icon了,
/**
local:test-icons:up
local 表示图标集是本地或自定义的,在上面 addAPIProvider 里传的第一个参数的名字就是的。
test-icons 是自定义图标集的名称。是需要后面在iconify-api后端node项目里去处理要在其icons里面写入一个名为 test-icons.json的文件
up 是该图标集中图标的名称。是需要在 test-icons.json里存在一个类似这样的描述svg的文件json {“prefix”: "test-icons", "icons": { "up": { "body": "<path ....0-364.08888888 z\" fill=\"#515151\" p-id=\"1310\"/>""}}}

*/

  export default function App() {

　　......

　　return (

　　　　.....

　　　　<Icon icon="local:test-icons:up" />

       <Icon icon="local:ant-design:account-book-filled" />

　　　　.....

　　)

　}

1.3. 如何知道要使用的icon的这些名称？

* 私有化的部署的话，这里能搜的库看node怎么改的，可以是全部也可以是部分，也可以不用开源的那些库；

进入网页 https://icon-sets.iconify.design/ ，然后搜索需要的开源icon库，例如ant-design的库

 

 

 

 

 

二、iconify-api私有化部署的内容

* 先把上面github上的iconify-api的代码拉到本地；

 一些关键的环境变量：

1. ICONIFY_SOURCE ： 'full' | 'split' | 'none'

　　

full ： 表示使用所有的现在收集到的开源的那个icon库，会把对应的json下载到node项目
         的cache目录里，例如ant design的，
         不同的值会调用不同的代码里的import方法，full是调用的fullPackageImporter；
         src\config\importers\full-package.ts

split：和full的区别是，不会下载所有的icon库，而是包含了所有图标文件集合的列表信息，
         它更像是一个“索引”或“清单”，用于告知开发者有哪些图标集可供选择和使用。
         需要在项目中动态地加载和管理图标集

none: 不使用开源的那些库；

 

2.运行

npm run build

npm run start

运行上面两个指令后，服务就起来了，可以直接访问 类似： http://localhost:3000/test-icons.json?icons=up

 

3.部署到线上

需要改一个docker的配置