wip

itgalaxy · Sep 8, 2022 · 487dd0a · 487dd0a
1 parent 93792d0
commit 487dd0a
Show file tree

Hide file tree

Showing 12 changed files with 116 additions and 1 deletion.
diff --git a/src/helpers.ts b/src/helpers.ts
@@ -235,6 +235,26 @@ function toPng(pipeline: sharp.Sharp): Promise<Buffer> {
   return pipeline.png().toBuffer();
 }
 
+async function createSvg(
+  sourceset: SourceImage[],
+  options: IconPlaneOptions
+): Promise<Buffer> {
+  const { width, height } = options;
+  const source = bestSource(sourceset, width, height);
+  if (source.metadata.format === "svg") {
+    return source.data;
+  } else {
+    const pipeline = await createPlane(sourceset, options);
+    const png = await toPng(pipeline);
+    const encodedPng = png.toString("base64");
+    return Buffer.from(
+      `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 ${width} ${height}" width="${width}" height="${height}">
+  <image width="${width}" height="${height}" xlink:href="data:image/png;base64,${encodedPng}"/>
+</svg>`
+    );
+  }
+}
+
 export async function createFavicon(
   sourceset: SourceImage[],
   name: string,
@@ -248,6 +268,9 @@ export async function createFavicon(
     );
     const contents = toIco(images);
     return { name, contents };
+  } else if (path.extname(name) === ".svg") {
+    const contents = await createSvg(sourceset, properties[0]);
+    return { name, contents };
   } else {
     const contents = await createPlane(sourceset, properties[0]).then(toPng);
     return { name, contents };

diff --git a/src/platforms/favicons.ts b/src/platforms/favicons.ts
@@ -8,6 +8,7 @@ const ICONS_OPTIONS: Record<string, IconOptions> = {
   "favicon-16x16.png": transparentIcon(16),
   "favicon-32x32.png": transparentIcon(32),
   "favicon-48x48.png": transparentIcon(48),
+  "favicon.svg": transparentIcon(1024), // arbitrary size. if more than one svg source is given, the closest to this size will be picked.
 };
 
 export class FaviconsPlatform extends Platform {
@@ -24,6 +25,10 @@ export class FaviconsPlatform extends Platform {
         return `<link rel="icon" type="image/x-icon" href="${this.relative(
           name
         )}">`;
+      } else if (name.endsWith(".svg")) {
+        return `<link rel="icon" type="image/svg+xml" href="${this.relative(
+          name
+        )}">`;
       }
 
       const { width, height } = options.sizes[0];

diff --git a/test/__snapshots__/array.test.js.snap b/test/__snapshots__/array.test.js.snap
diff --git a/test/__snapshots__/background.test.js.snap b/test/__snapshots__/background.test.js.snap
diff --git a/test/__snapshots__/default.test.js.snap b/test/__snapshots__/default.test.js.snap
diff --git a/test/__snapshots__/manifestMaskable.test.js.snap b/test/__snapshots__/manifestMaskable.test.js.snap
diff --git a/test/__snapshots__/meta.test.js.snap b/test/__snapshots__/meta.test.js.snap
diff --git a/test/__snapshots__/offset.test.js.snap b/test/__snapshots__/offset.test.js.snap
diff --git a/test/__snapshots__/pixelart.test.js.snap b/test/__snapshots__/pixelart.test.js.snap
diff --git a/test/__snapshots__/prefixed.test.js.snap b/test/__snapshots__/prefixed.test.js.snap
diff --git a/test/__snapshots__/svg.test.js.snap b/test/__snapshots__/svg.test.js.snap
@@ -107,6 +107,7 @@ Object {
     "<link rel=\\"icon\\" type=\\"image/png\\" sizes=\\"16x16\\" href=\\"/favicon-16x16.png\\">",
     "<link rel=\\"icon\\" type=\\"image/png\\" sizes=\\"32x32\\" href=\\"/favicon-32x32.png\\">",
     "<link rel=\\"icon\\" type=\\"image/png\\" sizes=\\"48x48\\" href=\\"/favicon-48x48.png\\">",
+    "<link rel=\\"icon\\" type=\\"image/svg+xml\\" href=\\"/favicon.svg\\">",
     "<link rel=\\"manifest\\" href=\\"/manifest.webmanifest\\">",
     "<meta name=\\"mobile-web-app-capable\\" content=\\"yes\\">",
     "<meta name=\\"theme-color\\" content=\\"#fff\\">",
@@ -173,6 +174,13 @@ Object {
       "contents": null,
       "name": "favicon-48x48.png",
     },
+    Object {
+      "contents": "<svg xmlns=\\"http://www.w3.org/2000/svg\\" version=\\"1.1\\" viewBox=\\"0 0 1500 1500\\" width=\\"1500\\" height=\\"1500\\">
+  <path fill=\\"#ff8c8c\\" fill-rule=\\"evenodd\\" stroke=\\"#ff8c8c\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" stroke-width=\\"125\\" d=\\"M636.39443 914.97056L407.70197 686.75804l-81.36252 82.95151 310.61677 310.46155 537.00668-538.1103-83.356-82.94415z\\"/>
+</svg>
+",
+      "name": "favicon.svg",
+    },
     Object {
       "contents": null,
       "name": "android-chrome-36x36.png",

diff --git a/test/setup.js b/test/setup.js
@@ -24,9 +24,17 @@ async function imagePlanes(image) {
   return result;
 }
 
+function isSvg(image) {
+  return path.extname(image.name) === ".svg";
+}
+
 expect.extend({
   async toMatchFaviconsSnapshot(received) {
     for (const image of received.images) {
+      if (isSvg(image)) {
+        continue;
+      }
+
       const planes = await imagePlanes(image);
 
       for (const plane of planes) {
@@ -46,7 +54,7 @@ expect.extend({
       ...received,
       images: received.images.map((image) => ({
         ...image,
-        contents: null,
+        contents: isSvg(image) ? image.contents.toString("utf-8") : null,
       })),
     };