Prefer vector app icon rendering

Author: zhaobozhen

packages/shared/src/apk.js

@@ -881,6 +881,11 @@ async function readBestIconCandidate(source, resources, resourceId, candidates,
     return adaptiveIcon;
   }
 
+  const vectorIcon = await readVectorIconFromXmlCandidates(source, resources, candidates);
+  if (vectorIcon) {
+    return vectorIcon;
+  }
+
   const candidate = selectBestIconCandidate(source.zipEntries, candidates);
   if (!candidate) {
     return readBestIconFromXmlCandidates(source, resources, candidates, seen);
@@ -947,6 +952,33 @@ async function readBestIconFromXmlCandidates(source, resources, candidates, seen
   return null;
 }
 
+async function readVectorIconFromXmlCandidates(source, resources, candidates) {
+  const xmlCandidates = selectIconXmlCandidates(source.zipEntries, candidates);
+  for (const candidate of xmlCandidates) {
+    const entry = source.zipEntries.get(candidate.path);
+    if (!entry) {
+      continue;
+    }
+
+    try {
+      const xmlBytes = await extractSourceEntry(source, entry);
+      const vectorIcon = await renderVectorDrawableIcon(xmlBytes, source, resources, candidate);
+      if (vectorIcon) {
+        return vectorIcon;
+      }
+
+      const shapeIcon = renderShapeDrawableIcon(xmlBytes, resources, candidate);
+      if (shapeIcon) {
+        return shapeIcon;
+      }
+    } catch {
+      // Unsupported XML should not block bitmap fallbacks.
+    }
+  }
+
+  return null;
+}
+
 async function readAdaptiveIconFromXmlCandidates(source, resources, candidates, seen) {
   const xmlCandidates = selectIconXmlCandidates(source.zipEntries, candidates);
   for (const candidate of xmlCandidates) {
@@ -1363,6 +1395,30 @@ async function renderVectorDrawableIcon(xmlBytes, source, resources, candidate)
 
   const svg = renderStandaloneVectorSvg(layer);
   const bytes = new TextEncoder().encode(svg);
+  if (bytes.byteLength > MAX_APP_ICON_BYTES) {
+    return null;
+  }
+
+  return {
+    resourceId: null,
+    path: candidate.path,
+    mimeType: "image/svg+xml",
+    size: bytes.byteLength,
+    dataUri: `data:image/svg+xml;base64,${bytesToBase64(bytes)}`,
+  };
+}
+
+function renderShapeDrawableIcon(xmlBytes, resources, candidate) {
+  const layer = buildShapeDrawableSvgLayer(xmlBytes, resources, candidate);
+  if (!layer) {
+    return null;
+  }
+
+  const svg = renderStandaloneShapeSvg(layer);
+  const bytes = new TextEncoder().encode(svg);
+  if (bytes.byteLength > MAX_APP_ICON_BYTES) {
+    return null;
+  }
 
   return {
     resourceId: null,
@@ -1377,6 +1433,7 @@ export const __apkTestInternals = {
   collectNativeLibraries,
   parseElfInfo,
   parseZipEntries,
+  readBestIconCandidate,
   renderVectorDrawableIcon,
 };
 
@@ -1550,6 +1607,16 @@ function renderStandaloneVectorSvg(layer) {
   ].join("");
 }
 
+function renderStandaloneShapeSvg(layer) {
+  const size = ADAPTIVE_ICON_SIZE;
+  return [
+    `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${size} ${size}">`,
+    layer.defs,
+    `<rect x="0" y="0" width="${size}" height="${size}" fill="${escapeXmlAttribute(layer.paint)}"/>`,
+    "</svg>",
+  ].join("");
+}
+
 function parseDrawableXmlElements(xmlBytes) {
   const bytes = toUint8Array(xmlBytes);
   if (readUint16(bytes, 0) !== RES_XML_TYPE) {

packages/shared/test/apk-icon.test.mjs

@@ -58,6 +58,65 @@ test("preserves vector even-odd fill rules", async () => {
   assert.match(svg, /clip-rule="evenodd"/u);
 });
 
+test("prefers renderable vector drawables over bitmap app icon candidates", async () => {
+  const vectorPath = "res/mipmap-anydpi-v26/ic_launcher.xml";
+  const bitmapPath = "res/mipmap-xxxhdpi/ic_launcher.png";
+  const source = createIconSource({
+    [vectorPath]: textEncoder.encode(`
+      <vector xmlns:android="http://schemas.android.com/apk/res/android"
+          android:width="108dp"
+          android:height="108dp"
+          android:viewportWidth="24"
+          android:viewportHeight="24">
+        <path
+            android:pathData="M12,2l9,20h-18z"
+            android:fillColor="#2f80ed"/>
+      </vector>
+    `),
+    [bitmapPath]: createPngHeaderBytes(),
+  });
+  const icon = await __apkTestInternals.readBestIconCandidate(
+    source,
+    createIconResources(),
+    0x7f010001,
+    [
+      createIconCandidate(bitmapPath, 640),
+      createIconCandidate(vectorPath, 0xfffe),
+    ],
+  );
+
+  assert.equal(icon.mimeType, "image/svg+xml");
+  assert.equal(icon.path, vectorPath);
+  assert.match(decodeSvgDataUri(icon.dataUri), /<path /u);
+});
+
+test("prefers simple shape drawables over bitmap app icon candidates", async () => {
+  const shapePath = "res/drawable/ic_launcher.xml";
+  const bitmapPath = "res/drawable-xxxhdpi/ic_launcher.png";
+  const source = createIconSource({
+    [shapePath]: textEncoder.encode(`
+      <shape xmlns:android="http://schemas.android.com/apk/res/android"
+          android:shape="rectangle">
+        <solid android:color="#2f80ed"/>
+      </shape>
+    `),
+    [bitmapPath]: createPngHeaderBytes(),
+  });
+  const icon = await __apkTestInternals.readBestIconCandidate(
+    source,
+    createIconResources(),
+    0x7f010002,
+    [
+      createIconCandidate(bitmapPath, 640),
+      createIconCandidate(shapePath, 0),
+    ],
+  );
+
+  assert.equal(icon.mimeType, "image/svg+xml");
+  assert.equal(icon.path, shapePath);
+  assert.match(decodeSvgDataUri(icon.dataUri), /fill="#2f80ed"/u);
+});
+
 test("annotates native libraries with ELF page size and ZIP alignment", async () => {
   const elfBytes = createElf64WithLoadAlignment(0x4000);
   const zipBytes = createStoredZipWithSingleEntry("lib/arm64-v8a/libpage.so", elfBytes, 4096);
@@ -81,6 +140,42 @@ function decodeSvgDataUri(dataUri) {
   return Buffer.from(base64, "base64").toString("utf8");
 }
 
+function createIconSource(files) {
+  const fileEntries = Object.entries(files).map(([path, bytes]) => [
+    path,
+    {
+      path,
+      compressedSize: bytes.byteLength,
+      uncompressedSize: bytes.byteLength,
+    },
+  ]);
+  const fileMap = new Map(Object.entries(files));
+  return {
+    zipEntries: new Map(fileEntries),
+    extractEntry: async (entry) => fileMap.get(entry.path),
+  };
+}
+
+function createIconResources() {
+  return {
+    resolveColor: () => null,
+    resolveFiles: () => [],
+  };
+}
+
+function createIconCandidate(path, density) {
+  return {
+    path,
+    density,
+    typeName: path.includes("/mipmap") ? "mipmap" : "drawable",
+    isDefaultConfig: path.includes("/mipmap/") || path.includes("/drawable/"),
+  };
+}
+
+function createPngHeaderBytes() {
+  return new Uint8Array([0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a]);
+}
+
 function createElf64WithLoadAlignment(alignment) {
   const bytes = new Uint8Array(0x80);
   const view = new DataView(bytes.buffer);