@capawesome/电容资产

生成一个的图标并放出屏幕 电容 iOS,Android和进步的Web Apps的应用,来自单一的标志或自有的源图像.

这是维护的叉子 @ capacor/ 资产 以 帅呆了。这是一个即时替换:只有软件包名称改变了。 见 从 @ concessor/ 资产中迁移。 。 。 .

开始

1. 安装软件包 :

   npm install --save-dev @capawesome/capacitor-assets
   

2. 来个 logo.png 至少为 1024x1024px, 最好是具有透明背景, 变成 assets/ 在项目根中的文件夹.

3. 为您的项目中的每个平台生成资产 :

   npx @capawesome/capacitor-assets generate
   

图标和溅出屏幕直接写入你的iOS,Android和网络项目. 当标志更改时, 重新运行命令 .

要设置你的品牌颜色,看 简单模式。要使用自己的图标和溅出屏幕而不是标志,请参见 自定义模式。 。 。 .

源文件

该工具读取其源文件 assets/ 在工程根中的文件夹,或来自 resources/ 如果存在的话。 使用 --assetPath 以指向另一个文件夹。 有二法能取补.

简单模式

Easy Mode从一个标志生成一切. 这是推荐的方法:减少你的工作,结果在每个平台上都是一样的。 它为了方便而交易定制性.

assets/
├── logo.png
├── logo-dark.png
├── icon-monochrome.png
└── icon-maskable.png

该标志被放入图标的背景颜色上,并放入另一个喷出屏幕上. 通过您的品牌颜色作为选项 :

npx @capawesome/capacitor-assets generate --iconBackgroundColor '#eeeeee' --splashBackgroundColor '#eeeeee' --splashBackgroundColorDark '#111111'

在溅射屏幕上,默认标志为宽度的五分之一. 换一个 --logoSplashScale 或者说 --logoSplashTargetWidth,参见 选项。 。 。 .

自定义模式

自定义 模式赋予你全能控制:您提供图标层,而溅出屏幕本身.

assets/
├── icon-only.png
├── icon-foreground.png
├── icon-background.png
├── icon-monochrome.png
├── icon-maskable.png
├── splash.png
└── splash-dark.png

自定义文件胜过标志 。 如果文件夹持有两者,则自定义文件会覆盖同一输出生成的标志. logo.png 加号 splash.png例如,从徽标中给出图标,从 splash.png。 。 。 .

平台专用文件

文件在 assets/ios/ 财务报告和审定财务报表 assets/android/ 仅适用于一个平台,并优先于文件 assets/ 产生相同的输出。 名称匹配, 但有一个例外: 应用程序图标是 icon-only.png 内 assets/不过 ios/icon.png 财务报告和审定财务报表 android/icon.png 在平台文件夹中( 一个根) icon.png 是一个 Easy Mode 标志.

产生的资产

没有平台选项, generate 运行项目中找到的每个平台。 过 --ios, (中文(简体) ), --android 或者说 --pwa 选择平台 :

npx @capawesome/capacitor-assets generate --ios --android

iOS系统

写入 ios/App/App/Assets.xcassets/ (修改项目路径为: --iosProject:

• AppIcon.appiconset/: 1024×1024px 应用程序图标, 外加暗色和有色变体 ios/icon-dark 财务报告和审定财务报表 ios/icon-tinted 已存在。 图标放在 --iconBackgroundColor,因为iOS需要一个不透明的图标.
• Splash.imageset/: 2732×2732px通用溅射屏幕以1x,2x和3x为正色和暗色. 这个 Contents.json 文件被更新,模板图像被删除.

机器人

写入 android/app/src/main/res/ (修改项目路径为: --androidProject 和风味 --androidFlavor:

• mipmap-<density>/ic_launcher_foreground.png, (中文(简体) ), ic_launcher_background.png 财务报告和审定财务报表 ic_launcher_monochrome.png,与 mipmap-anydpi-v26/ic_launcher.xml 财务报告和审定财务报表 ic_launcher_round.xml:适应图标. 单色层只有在单色源文件存在时才会被引用. 血层满出血 源头在 --androidAdaptiveIconScale 层(1 用于绘制到Android108dp模板的源.
• mipmap-<density>/ic_launcher.png 财务报告和审定财务报表 ic_launcher_round.png:为Android 7.1及更年长的后遗症发射器图标. 在 Easy 模式下, 标识被放置在 --iconBackgroundColor。 。 。 .
• drawable-<orientation>[-night]-<density>/splash.png: 显示于 Splash 屏幕插件。 。 。 .
• AndroidManifest.xml数字 : android:icon 财务报告和审定财务报表 android:roundIcon 点到生成的图标.

Android 12+ 发射屏幕

Android 12并后从活动主题中绘制出发射屏幕:一个以坚固颜色为中心而成的图标,而不是全屏图像. 在主题点到图标之前,系统显示发射器图标,以及 splash.png 仅在之后通过 Splash 屏幕插件出现 。 因此,该工具还:

• 写入 drawable[-night]-<density>/ic_splash.png:中间的36%的喷出物作为288dp平方. Android把它遮住到一个192dp的圆圈, 所以把艺术品放在中间的24%的溅出。 以简单模式保存 --logoSplashScale 在或低于 0.24,或 --logoSplashTargetWidth 在或低于 655。 。 。 .
• 写出颜色 splash_background 改为 values[-night]/colors.xml:喷出物上左上像素的颜色. 文件内的其他颜色被保存.
• 套装 windowSplashScreenBackground 财务报告和审定财务报表 windowSplashScreenAnimatedIcon 编辑 AppTheme.NoActionBarLaunch 样式 values/styles.xml,并删除其 android:background 如果是的话 @drawable/splash:在Android 12下方,它用全屏喷出来覆盖图标. 样式必须延伸 Theme.SplashScreen,它从4号控制器开始做。 如果没有,工具会打印出警告并离开 styles.xml 一个人.

随着标志以平坦的背景为中心,发射屏幕再看起来就像iOS上的喷出屏幕.

通知图标

若为 assets/android/notification-icon.png 存在, 工具写入 drawable-<density>/ic_notification.png 在24、36、48、72和96px时。 Android只使这个图标的α通道,所以在透明的背景上使用白色像素. 使用 --androidNotificationIconName 以更改资源名称.

然后点出您的通知插件 :

• @capacitor/push-notifications 财务报告和审定财务报表 @capacitor-firebase/messaging: 将此添加到 <application> 要素 android/app/src/main/AndroidManifest.xml数字 :

  <meta-data android:name="com.google.firebase.messaging.default_notification_icon" android:resource="@drawable/ic_notification" />
  

• @capacitor/local-notifications设置 smallIcon 改为 ic_notification 在插件配置中.

• @onesignal/capacitor-plugin: OneSignal 读取了固定资源名称, 因此生成该名称下的图标 :

  npx @capawesome/capacitor-assets generate --androidNotificationIconName ic_stat_onesignal_default
  

  要在Android 12上加上这个图标 <application> 元素(无 #:

  <meta-data android:name="com.onesignal.NotificationAccentColor.DEFAULT" android:value="FF00FF00" />
  

巴布亚新几内亚

网页目录是 public, (中文(简体) ), src 或者说 www,以先存在为准。 图像是写给它的 assets/icons/ 如果网页目录有 assets/ 文件夹,除此之外 icons/ 文件夹。 该工具写道:

• icon-<size>.png 与 purpose: "any" 财务报告和审定财务报表 icon-maskable-<size>.png 与 purpose: "maskable",用于48,72,96,128,192,256和512等尺寸. 在 Easy 模式下, 标记被放置在 --iconBackgroundColor,所以图标是不透明的。 习惯 icon-only.png 用于: any 图标。 习惯 icon-maskable.png 用于: maskable 图标。 没有它,可遮掩的图标 将艺术品插入大约四分之三的图标上 --iconBackgroundColor,所以它能活过发射口罩;到达角落的艺术品仍然可以被圆口罩剪去.
• apple-splash-<width>-<height>@<density>.png: iOS 飞溅屏幕(apple-touch-startup-image),用于基于: 苹果人界面准则 并更新该工具的新版本。 在 Easy 模式下, 标记被放置在 --splashBackgroundColor,或打开 --splashBackgroundColorDark 用于暗模式.
• 名单(manifest.webmanifest,或 manifest.json 如果有的话)用图标创建或更新,以及何时 --splashBackgroundColor 给出,使用 background_color启用 --pwaManifestPath 指向特定文件.

选项

标记和颜色 :

颜色是十六进制值。 引用它们,所以你的外壳不读 # 作为评论: '#eeeeee'。 。 。 .

参见命令行的完整列表 :

npx @capawesome/capacitor-assets generate --help

从 @ concessor/ 资产中迁移

npm uninstall @capacitor/assets
npm install --save-dev @capawesome/capacitor-assets

替换 @capacitor/assets 与 @capawesome/capacitor-assets 在您的脚本。 源文件和选项相同. 改变了什么:

• PWA 图标为 icon-<size>.png 财务报告和审定财务报表 icon-maskable-<size>.png,单独 any 财务报告和审定财务报表 maskable 在清单中输入。 早期版本将PNG数据写入 icon-<size>.webp 带有综合目的的文件。 旧文件从清单中删除并删除 icons/ 接下来的比赛 例如,更新参考文献 apple-touch-icon 链接中 index.html。 。 。 .
• 在"Easy Mode"中,标志是每个平台上溅出量的五分之一. 更早的版本在iOS上以自有的宽度来缩放,并自画出每个Android密度.
• Android适应性图标层出血多,以一些发射器大小来固定下部和右边缘的一黑线. 重出所出圣像.
• --pwaNoAppleFetch 没有效果。 Apple移除了用于取取的工具的屏幕大小表,因此大小来自内置列表.

见 更改日志 用于所有从叉子开始添加的东西.

捐款

见 捐款额。 。 。 .

许可证

见 自由主义。 。 。 .