如何使用 Ignite app-icon 生成器为 iOS、Android 与 Expo 批量生成启动器图标【免费下载链接】igniteInfinite Reds battle-tested React Native project boilerplate, along with a CLI, component/model generators, and more! 9 years of continuous development and counting.项目地址: https://gitcode.com/GitHub_Trending/ig/ignite启动器图标是移动端项目里最繁琐的部分之一iOS、Android、Expo 各自需要一组不同尺寸、不同命名的图标文件还要同步更新对应的配置文件。Ignite CLI 内置的app-icon生成器可以解决这个问题它从ignite/templates/app-icon/读取 4 张 1024×1024 的输入图批量生成各平台所需的全部图标尺寸并自动更新 iOS 的Contents.json、Android 的ic_launcher.xml或 Expo 的app.json。适用前提你已经在用npx ignite-cli new创建的 Ignite 项目根目录中工作目录里存在./ignite。创建项目时CLI 会把包括app-icon在内的生成器模板复制进项目的./ignite/templates/目录生成器只读取项目内的这份模板。准备输入图片4 个文件名和尺寸都有硬性要求生成器的输入固定在项目的ignite/templates/app-icon/目录下对应 Generators 文档 中列出的 4 个文件输入文件用途输出位置ios-universal.png生成 iOS 所需的全部应用图标vanilla./ios/**/Images.xcassets/AppIcon.appiconset/含Contents.jsonexpo./assets/images/及根目录./app.jsonandroid-legacy.png生成 Android 7.1 及以下机型的 legacy 启动器图标vanilla./android/app/src/main/res/含mipmap-anydpi-v26/ic_launcher.xmlexpo./assets/images/及./app.jsonandroid-adaptive-background.png生成 Android 8.0 及以上 adaptive 图标的背景层目录与 legacy 图标一致同上android-adaptive-foreground.png生成 Android 8.0 及以上 adaptive 图标的前景层目录与 legacy 图标一致同上定制时有两条硬性约束违反任一条生成器都会拒绝执行文件名必须保持上述原名尺寸必须是 1024×1024px。官方文档提供了一个 Sketch 模板文件下载入口见 Generators 文档 的 App Icon generator 一节改完图标后隐藏网格再导出即可。android-legacy.png中不要自带 padding 和圆角。生成器会自动为 legacy 图标添加所需的 padding 与圆角输入图里自己做了这些处理反而会变形。各平台的具体输出尺寸和文件名由生成器内部的规则集决定完整定义见 APP_ICON_RULESETiOS 按Icon-{size}-{idiom}{scale}.png命名并覆盖 iphone/ipad/ios-marketing 各倍率Android 输出mipmap-{dpi}/ic_launcher.png、ic_launcher_round.png、ic_launcher_background.png、ic_launcher_foreground.png覆盖 mdpi 到 xxxhdpi 各密度Expo 输出app-icon-ios.png、app-icon-android-legacy.png、adaptive 前/背景图、app-icon-all.png和app-icon-web-favicon.png。运行生成命令在 Ignite 项目根目录执行npx ignite-cli generate app-icon ios第二个参数只接受 4 个预定义值ios、android、expo、all传其他值会被拒绝并提示The option xxx is not valid for generator app-icon。三个目标平台都要生成时用all生成器会依次对 iOS、Android、Expo 各跑一遍npx ignite-cli generate app-icon all # g 是 generate 的简写等价 npx ignite-cli g app-icon all几点适用条件expo参数除了生成./assets/images/下的图标文件还会把 Ignite boilerplate 中标准的 icon 配置字段合并写入项目根目录的./app.json即icon、android.icon、android.adaptiveIcon、ios.icon、web.favicon。字段与生成文件的对应关系可以直接对照 boilerplate 的 app.json例如icon: ./assets/images/app-icon-all.png、web: { favicon: ./assets/images/app-icon-web-favicon.png }。如果项目没有根目录app.json而是使用动态配置app.config.js/app.config.ts生成器不会替你改配置只会在控制台打印出应手动添加的 icon 配置 JSON。某个平台的输出目录不存在时例如 vanilla 项目缺android/app/src/main/res生成器打印⚠️ No output directory found for ... Skipping...后跳过该平台继续处理其余平台。默认模板签名校验生成器为什么可能直接退出生成器默认会比对模板目录里每张输入图的签名与 Ignite 默认图标的签名。只要你还没替换过图片它就会直接退出并逐文件打印警告目的是逼你在真正生成前把图标换成自己的。警告形如以下为生成器输出的示例⚠️ ignite/templates/app-icon/ios-universal.png: • looks like youre using our default template; customize the file with your own icon first另外两类失败也会以同样格式逐文件报出文件缺失• the file is missing、尺寸不对• the file is the wrong size (expected 1024x1024px)。如果确实想直接用 Ignite 默认图标覆盖当前应用的图标文档给出的路径是先用--update重置模板目录再带--skip-source-equality-validation标志重新生成npx ignite-cli g app-icon --update npx ignite-cli generate app-icon all --skip-source-equality-validation注意副作用--update会把 Ignite 侧最新的 app-icon 模板覆盖回项目的ignite/templates/app-icon/你已做的定制会被抹掉。Generators 文档 建议在更新前先在版本控制里做一次 commit方便回滚。验证生成结果生成成功时终端先逐个列出生成的图标文件示例输出✅ app-icon-ios.png ✅ app-icon-android-legacy.png ... ✅ app.json App icons generated!随后生成器会明确提示查看变更的方式Uninstall the application from your simulator/emulator and re-build your app to see the changes!也就是说模拟器/模拟器里已安装的应用不会自动换新图标必须卸载后重新构建。落盘后可以再核对三处iOSvanilla./ios/**/Images.xcassets/AppIcon.appiconset/下的Icon-*.png与Contents.jsonAndroidvanilla./android/app/src/main/res/mipmap-{dpi}/下的各密度图标与mipmap-anydpi-v26/ic_launcher.xmlExpo./assets/images/下 6 张app-icon-*.png以及根目录app.json中 icon 相关字段已更新为上述标准路径。运行前遇到报错先查这两处提示⚠️ Generator app-icon isnt installed.说明当前项目的ignite/templates/里没有这个生成器可能项目是旧版本创建的。按终端提示执行npx ignite-cli generate app-icon --update把生成器装进项目然后重跑生成命令即可。提示⚠️ Not in an Ignite project root.生成器要求在 Ignite 项目根目录含./ignite目录执行换到正确目录再运行。总结一下这个生成器的边界输入永远是那 4 个固定文件名、固定 1024×1024 的图legacy 图标输入不能自带 padding/圆角默认开启与 Ignite 默认图的等价性校验跳过它必须显式加--skip-source-equality-validation。更多生成器用法--case、--dir、自定义模板见 Generators 文档。【免费下载链接】igniteInfinite Reds battle-tested React Native project boilerplate, along with a CLI, component/model generators, and more! 9 years of continuous development and counting.项目地址: https://gitcode.com/GitHub_Trending/ig/ignite创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考