New command: android-png-icons by AlexeyBarabash · Pull Request #1184 · brave/leo

AlexeyBarabash · 2025-09-08T09:11:12Z

This repository has all icons set in svg format.
Now there is already android-icons command which is applied during build command and it generates Android xml drawable.

The moment here that Chromium still has bunch of icons which are still png bitmaps. If we need to replace them with own images, we should use also the same format to avoid bunch of direct gn/gni patches.

This PR adds command android-png-icons which converts svg into pngs of xxxhdpi/xxhdpi/xhdpi/hdpi/mdpi resolutions.

Usage: npm run android-png-icons -- <icon_name.svg> [new_color] [new_file_base_name]

Example

npm run android-png-icons -- product-private-window.svg   454746   incognito_simple.png

generates these files ready to replace the Chromium's pngs

drawable-hdpi/incognito_simple.png
drawable-mdpi/incognito_simple.png
drawable-xhdpi/incognito_simple.png
drawable-xxhdpi/incognito_simple.png
drawable-xxxhdpi/incognito_simple.png

src/scripts/gen-android-png-icons.ts

bsclifton · 2025-09-08T20:31:23Z

cc: @Olipro

fallaciousreasoning

This looks great - once security has okay'd sharp lets land it!

package.json

Usage: npm run android-png-icons -- <icon_name.svg> [new_color]

github-actions · 2025-09-10T12:04:37Z

👋 Thanks for Submitting! This PR is available for preview at the link below.

✅ PR tip preview: https://1184.pr.nala.bravesoftware.com/
✅ Commit preview: https://1184.pr.nala.bravesoftware.com/commit-7865dff8a6c2409253dd62a3c945b76134006ac8/

- ./tokens/css/variables-android.old.css: 7390 bytes
+ ./tokens/css/variables-android.css: 7390 bytes
---
- ./tokens/css/variables-browser.old.css: 6644 bytes
+ ./tokens/css/variables-browser.css: 6644 bytes
---
- ./tokens/css/variables-ios.old.css: 8180 bytes
+ ./tokens/css/variables-ios.css: 8180 bytes
---
- ./tokens/css/variables-marketing.old.css: 13501 bytes
+ ./tokens/css/variables-marketing.css: 13501 bytes
---
- ./tokens/css/variables-news.old.css: 526 bytes
+ ./tokens/css/variables-news.css: 526 bytes
---
- ./tokens/css/variables-newtab.old.css: 1933 bytes
+ ./tokens/css/variables-newtab.css: 1933 bytes
---
- ./tokens/css/variables-search.old.css: 2409 bytes
+ ./tokens/css/variables-search.css: 2409 bytes
---
- ./tokens/css/variables-web3.old.css: 893 bytes
+ ./tokens/css/variables-web3.css: 893 bytes
---
- ./tokens/css/variables.old.css: 124825 bytes
+ ./tokens/css/variables.css: 124825 bytes

Variables Diff: variables-android.diff

--- ./tokens/css/variables-android.old.css	2025-09-10 12:03:15.177357019 +0000
+++ ./tokens/css/variables-android.css	2025-09-10 12:02:38.317892103 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon Sep 08 2025 21:39:49 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Sep 10 2025 12:02:38 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-browser.diff

--- ./tokens/css/variables-browser.old.css	2025-09-10 12:03:15.588362169 +0000
+++ ./tokens/css/variables-browser.css	2025-09-10 12:02:38.306891960 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon Sep 08 2025 21:39:49 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Sep 10 2025 12:02:38 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-ios.diff

--- ./tokens/css/variables-ios.old.css	2025-09-10 12:03:15.821365084 +0000
+++ ./tokens/css/variables-ios.css	2025-09-10 12:02:38.332892299 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon Sep 08 2025 21:39:49 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Sep 10 2025 12:02:38 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-marketing.diff

--- ./tokens/css/variables-marketing.old.css	2025-09-10 12:03:16.067368167 +0000
+++ ./tokens/css/variables-marketing.css	2025-09-10 12:02:38.349892520 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon Sep 08 2025 21:39:49 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Sep 10 2025 12:02:38 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-news.diff

--- ./tokens/css/variables-news.old.css	2025-09-10 12:03:16.307371174 +0000
+++ ./tokens/css/variables-news.css	2025-09-10 12:02:38.382892951 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon Sep 08 2025 21:39:49 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Sep 10 2025 12:02:38 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-newtab.diff

--- ./tokens/css/variables-newtab.old.css	2025-09-10 12:03:16.522373868 +0000
+++ ./tokens/css/variables-newtab.css	2025-09-10 12:02:38.389893042 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon Sep 08 2025 21:39:49 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Sep 10 2025 12:02:38 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-search.diff

--- ./tokens/css/variables-search.old.css	2025-09-10 12:03:16.729376459 +0000
+++ ./tokens/css/variables-search.css	2025-09-10 12:02:38.377892886 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon Sep 08 2025 21:39:49 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Sep 10 2025 12:02:38 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-web3.diff

--- ./tokens/css/variables-web3.old.css	2025-09-10 12:03:16.842377876 +0000
+++ ./tokens/css/variables-web3.css	2025-09-10 12:02:38.393893094 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon Sep 08 2025 21:39:49 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Sep 10 2025 12:02:38 GMT+0000 (Coordinated Universal Time)
  */
 
 @media (prefers-color-scheme: light) {

Variables Diff: variables.diff

--- ./tokens/css/variables.old.css	2025-09-10 12:03:17.181382124 +0000
+++ ./tokens/css/variables.css	2025-09-10 12:02:38.177890277 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon Sep 08 2025 21:39:49 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Sep 10 2025 12:02:38 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

src/scripts/gen-android-png-icons.ts

fallaciousreasoning · 2025-09-11T20:52:54Z

src/scripts/gen-android-png-icons.ts

+import path from 'path'
+import sharp from 'sharp'
+
+const ICONS_FOLDER = 'icons/'


Hey, so this will only resolve when the script is run from the root dir of leo - I think the other scripts get away with this 'cause they're always run as part of the prepare script, but yours will end up being run by a target in brave-core.

We should make sure this path is relative to this script, rather than the CWD:

// something like this, I think const filename = fileURLToPath(import.meta.url) const dirname = path.dirname(filename) const iconsFolder = path.join(dirname, '..', '..', 'icons')

AlexeyBarabash self-assigned this Sep 8, 2025

AlexeyBarabash requested review from AlanBreck, fallaciousreasoning and petemill as code owners September 8, 2025 09:11

github-actions bot reviewed Sep 8, 2025

View reviewed changes

src/scripts/gen-android-png-icons.ts Show resolved Hide resolved

github-actions bot added the needs-security-review label Sep 8, 2025

github-actions bot assigned kdenhartog and thypon Sep 8, 2025

fallaciousreasoning reviewed Sep 8, 2025

View reviewed changes

package.json Outdated Show resolved Hide resolved

AlexeyBarabash marked this pull request as draft September 10, 2025 10:21

AlexeyBarabash added 3 commits September 10, 2025 15:01

Added a command android-png-icons to generate android drawable set

0b109ce

Usage: npm run android-png-icons -- <icon_name.svg> [new_color]

Added optional new_file_base_name parameter for instant rename

1688dc9

Pinned sharp lib deps and moved to devDependencies

7865dff

AlexeyBarabash force-pushed the android-png-icons-command branch from 8ce6d41 to 7865dff Compare September 10, 2025 12:02

AlexeyBarabash marked this pull request as ready for review September 10, 2025 15:16

fallaciousreasoning reviewed Sep 11, 2025

View reviewed changes

src/scripts/gen-android-png-icons.ts Outdated Show resolved Hide resolved

fallaciousreasoning reviewed Sep 11, 2025

View reviewed changes

New argument target_directory

5219e17

kdenhartog added needs-security-review and removed needs-security-review labels Sep 17, 2025

kdenhartog unassigned thypon and kdenhartog Sep 18, 2025

kdenhartog approved these changes Sep 18, 2025

View reviewed changes

thypon approved these changes Nov 13, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

New command: android-png-icons#1184

New command: android-png-icons#1184
AlexeyBarabash wants to merge 4 commits intomainfrom
android-png-icons-command

AlexeyBarabash commented Sep 8, 2025

Uh oh!

Uh oh!

bsclifton commented Sep 8, 2025

Uh oh!

fallaciousreasoning left a comment •

edited

Loading

Uh oh!

Uh oh!

github-actions bot commented Sep 10, 2025

Uh oh!

Uh oh!

fallaciousreasoning Sep 11, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Conversation

AlexeyBarabash commented Sep 8, 2025

Uh oh!

Uh oh!

bsclifton commented Sep 8, 2025

Uh oh!

fallaciousreasoning left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

github-actions bot commented Sep 10, 2025

Uh oh!

Uh oh!

fallaciousreasoning Sep 11, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

fallaciousreasoning left a comment •

edited

Loading