图标集创建工具（Icon Set Creator）使用教程

图标集创建工具（Icon Set Creator）使用教程

icon-set-creator CLI for creating React Native app icons 项目地址: https://gitcode.com/gh_mirrors/ic/icon-set-creator

1. 项目的目录结构及介绍

icon-set-creator 的目录结构如下：

icon-set-creator/
├── assets/                    # 存放图标资源文件
├── example/                   # 示例图标文件
├── lib/                       # 项目核心代码
├── utils/                     # 工具函数
├── .gitignore                 # Git 忽略文件
├── .npmignore                 # npm 忽略文件
├── CHANGELOG.md               # 更新日志
├── LICENSE                    # 开源协议
├── README.md                  # 项目说明文件
├── index.ts                   # 入口文件
├── package-lock.json          # npm 依赖锁定文件
├── package.json               # 项目配置文件
└── tsconfig.json              # TypeScript 配置文件

• assets/：存放项目所需的图标资源文件。
• example/：包含了一些示例图标文件，用于参考。
• lib/：包含了项目的核心代码，实现图标集的生成逻辑。
• utils/：包含了一些辅助性的工具函数，用于代码中。
• .gitignore：定义了哪些文件和目录应该被 Git 忽略。
• .npmignore：定义了哪些文件和目录在打包发布时应该被 npm 忽略。
• CHANGELOG.md：记录了项目的更新日志，包括每个版本的更改和改进。
• LICENSE：项目使用的开源协议文件，本项目使用 MIT 协议。
• README.md：项目的说明文件，包含了项目介绍、安装和使用方法。
• index.ts：项目的入口文件，启动图标集创建工具的脚本。
• package-lock.json：记录了项目依赖的确切版本，用于确保环境一致性。
• package.json：项目的配置文件，定义了项目的元数据和脚本。
• tsconfig.json：TypeScript 的配置文件，用于设置项目的编译选项。

2. 项目的启动文件介绍

项目的启动文件是 index.ts。该文件负责解析命令行参数，并调用相应的功能模块来创建图标集。使用 npx 或者本地安装的 iconset 命令，可以启动图标集的创建流程。

以下是 index.ts 文件的部分示例代码：

// 引入必要的模块和库
import { cac } from 'cac';
import { createIconSet } from './lib/icon-set-creator';

// 创建命令行解析器
const cli = cac();

// 定义命令行参数和选项
cli
  .command('create [image-path]', '生成新的图标集')
  .option('--android [icon-name]', '为 Android 生成图标集')
  .option('--ios', '为 iOS 生成图标集')
  .option('--help', '显示帮助信息')
  .action((imagePath: string, options: { android?: string, ios?: boolean }) => {
    createIconSet(imagePath, options);
  });

// 输出帮助信息
cli.help();

// 解析命令行参数
cli.parse();

3. 项目的配置文件介绍

icon-set-creator 支持多种格式的配置文件，包括 JavaScript、JSON 和 package.json。配置文件可以定义项目的各种设置，如图标路径、是否禁用启动器图标、图标名称、背景色等。

以下是一个 JavaScript 格式的配置文件示例 .iconsetrc.js：

module.exports = {
  imagePath: './assets/icon.png',
  adaptiveIconBackground: './assets/icon-background.png',
  adaptiveIconForeground: './assets/icon-foreground.png'
};

在这个配置文件中，我们定义了图标的路径、自适应图标的背景和前景。

JSON 格式的配置文件 .iconsetrc.json 可能看起来像这样：

{
  "imagePath": "./assets/icon.png",
  "adaptiveIconBackground": "./assets/icon-background.png",
  "adaptiveIconForeground": "./assets/icon-foreground.png"
}

在 package.json 中，可以在 iconsetConfig 属性下定义配置：

{
  "name": "your-project",
  "version": "1.0.0",
  "iconsetConfig": {
    "imagePath": "./assets/icon.png",
    "adaptiveIconBackground": "./assets/icon-background.png",
    "adaptiveIconForeground": "./assets/icon-foreground.png"
  }
}

项目将按照 .iconsetrc.js、.iconsetrc.json、package.json 的顺序查找并使用配置文件。

icon-set-creator CLI for creating React Native app icons 项目地址: https://gitcode.com/gh_mirrors/ic/icon-set-creator