【源码】基于React的iconfont图标自动生成器

项目简介

本项目是基于React的iconfont图标自动生成工具，可将iconfont图标批量转换为React组件。无需依赖字体文件，支持多色彩图标渲染，还能灵活定制图标颜色和尺寸，适合在React项目中快速集成和管理iconfont图标的开发者。

项目的主要特性和功能

1. 纯React组件：生成的图标组件为纯React组件，不依赖其他库或框架。
2. 无字体依赖：不依赖字体文件，直接生成React组件，减小项目体积。
3. 多色彩支持：支持多色彩图标，能原样渲染iconfont中的多色图标。
4. 颜色定制：支持单色和多色图标，颜色可通过属性灵活配置。
5. 尺寸单位支持：支持px和rpx两种尺寸单位，适应不同场景需求。

安装使用步骤

1. 安装插件

通过Yarn或Npm安装iconfont-to-tsx插件： ```bash yarn add iconfont-to-tsx --dev

npm install iconfont-to-tsx --save-dev ```

2. 生成配置文件

使用以下命令生成配置文件iconfont.json： bash npx iconfont2Tsx-init 配置文件内容如下： json { "symbol_url": "请参考README.md，复制 http://iconfont.cn 官网提供的JS链接", "save_dir": "./src/Iconfont", "icon_all_name": "Iconfont", "is_signle": true, "use_rpx": false, "trim_icon_prefix": "", "default_icon_size": 16, "design_width": 750 }

3. 配置参数说明

• symbol_url：填写iconfont官网提供的JS链接。
• save_dir：生成的组件存放目录。
• icon_all_name：全量图标的组件名。
• is_signle：是否生成单个图标组件。
• use_rpx：是否使用rpx单位。
• trim_icon_prefix：去除图标前缀。
• default_icon_size：默认图标大小。
• design_width：设计稿宽度，默认为750px。

4. 生成组件

使用以下命令生成图标组件： bash npx iconfont2Tsx-generate 生成后，查看save_dir目录中是否包含所有图标组件。

5. 使用图标组件

在React页面中使用生成的图标组件： ```jsx // 原色彩

// 单色：红色

// 多色：红色+橘色 ```

6. 更新图标

当iconfont中的图标有变更时，只需更新symbol_url字段，然后重新执行生成命令即可。

注意事项

1. 确保symbol_url字段填写正确，为iconfont官网提供的JS链接。
2. 每次生成组件之前，请确保save_dir文件夹被清空。
3. 暂不支持rgba颜色写法，需要使用encodeURIComponent转码。

下载地址

点击下载 【提取码: 4003】【解压密码: www.makuang.net】