feat(preset_svg): improve SVG Data URL output size

close #39
TomokiMiyauci · Apr 1, 2022 · 5c00bc1 · 5c00bc1
1 parent 4516ad0
commit 5c00bc1
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 27 deletions.
diff --git a/_e2e/preset_svg/css_test.ts b/_e2e/preset_svg/css_test.ts
@@ -19,14 +19,14 @@ test("presetSVG generation test", async () => {
     generate("i-carbon-3d-curve-auto-colon", config),
   ).resolves.toEqual(objectContaining({
     css:
-      `.i-carbon-3d-curve-auto-colon{--map-icon:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' preserveAspectRatio='xMidYMid meet' viewBox='0 0 32 32'%3E%3Cpath d='M9.5 8h10.6a5 5 0 1 0 0-2H9.5a5.5 5.5 0 0 0 0 11h11a3.5 3.5 0 0 1 0 7h-8.6a5 5 0 1 0 0 2h8.6a5.5 5.5 0 0 0 0-11h-11a3.5 3.5 0 0 1 0-7zM25 4a3 3 0 1 1-3 3a3 3 0 0 1 3-3zM7 28a3 3 0 1 1 3-3a3 3 0 0 1-3 3z' fill='currentColor'/%3E%3C/svg%3E");background-color:currentColor;height:1em;mask:var(--map-icon) no-repeat;mask-size:100% 100%;width:1em}`,
+      `.i-carbon-3d-curve-auto-colon{--map-icon:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' preserveAspectRatio='xMidYMid meet' viewBox='0 0 32 32'%3e%3cpath d='M9.5 8h10.6a5 5 0 1 0 0-2H9.5a5.5 5.5 0 0 0 0 11h11a3.5 3.5 0 0 1 0 7h-8.6a5 5 0 1 0 0 2h8.6a5.5 5.5 0 0 0 0-11h-11a3.5 3.5 0 0 1 0-7zM25 4a3 3 0 1 1-3 3a3 3 0 0 1 3-3zM7 28a3 3 0 1 1 3-3a3 3 0 0 1-3 3z' fill='currentColor'/%3e%3c/svg%3e");background-color:currentColor;height:1em;mask:var(--map-icon) no-repeat;mask-size:100% 100%;width:1em}`,
   }));
 
   await expect(
     generate("i-html", config),
   ).resolves.toEqual(objectContaining({
     css:
-      `.i-html{--map-icon:url("data:image/svg+xml;utf8,%3Cpath xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='1em' height='1em' preserveAspectRatio='xMidYMid meet' viewBox='0 0 32 32'%3E%3Cpath fill='%2523e44f26' d='M5.902 27.201L3.655' /%3E%3C/svg%3E");background:var(--map-icon) no-repeat;background-color:transparent;background-size:100% 100%;height:1em;width:1em}`,
+      `.i-html{--map-icon:url("data:image/svg+xml,%3cpath xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='1em' height='1em' preserveAspectRatio='xMidYMid meet' viewBox='0 0 32 32'%3e%3cpath fill='%2523e44f26' d='M5.902 27.201L3.655' /%3e%3c/svg%3e");background:var(--map-icon) no-repeat;background-color:transparent;background-size:100% 100%;height:1em;width:1em}`,
   }));
 });
 
@@ -48,6 +48,6 @@ test("color mode is static", async () => {
     generate("i-carbon-3d-curve-auto-colon", config),
   ).resolves.toEqual(objectContaining({
     css:
-      `.i-carbon-3d-curve-auto-colon{--map-icon:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' preserveAspectRatio='xMidYMid meet' viewBox='0 0 32 32'%3E%3Cpath d='M9.5 8h10.6a5 5 0 1 0 0-2H9.5a5.5 5.5 0 0 0 0 11h11a3.5 3.5 0 0 1 0 7h-8.6a5 5 0 1 0 0 2h8.6a5.5 5.5 0 0 0 0-11h-11a3.5 3.5 0 0 1 0-7zM25 4a3 3 0 1 1-3 3a3 3 0 0 1 3-3zM7 28a3 3 0 1 1 3-3a3 3 0 0 1-3 3z' fill='currentColor'/%3E%3C/svg%3E");background:var(--map-icon) no-repeat;background-color:transparent;background-size:100% 100%;height:1em;width:1em}`,
+      `.i-carbon-3d-curve-auto-colon{--map-icon:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' preserveAspectRatio='xMidYMid meet' viewBox='0 0 32 32'%3e%3cpath d='M9.5 8h10.6a5 5 0 1 0 0-2H9.5a5.5 5.5 0 0 0 0 11h11a3.5 3.5 0 0 1 0 7h-8.6a5 5 0 1 0 0 2h8.6a5.5 5.5 0 0 0 0-11h-11a3.5 3.5 0 0 1 0-7zM25 4a3 3 0 1 1-3 3a3 3 0 0 1 3-3zM7 28a3 3 0 1 1 3-3a3 3 0 0 1-3 3z' fill='currentColor'/%3e%3c/svg%3e");background:var(--map-icon) no-repeat;background-color:transparent;background-size:100% 100%;height:1em;width:1em}`,
   }));
 });
diff --git a/_tools/meta.ts b/_tools/meta.ts
@@ -110,6 +110,12 @@ const meta: DefineMeta[] = [
         "icon",
       ],
     },
+    mappings: {
+      "https://esm.sh/mini-svg-data-uri@1.4.4?pin=v74": {
+        name: "mini-svg-data-uri",
+        version: "^1.4.4",
+      },
+    },
   },
 ];
 

diff --git a/preset_svg/_utils.ts b/preset_svg/_utils.ts
diff --git a/preset_svg/deps.ts b/preset_svg/deps.ts
@@ -6,6 +6,7 @@ export {
 } from "https://esm.sh/@iconify/utils@1.0.26?pin=v71";
 export { defaults } from "https://esm.sh/@iconify/utils@1.0.26/lib/customisations?pin=v71";
 export { curry } from "https://deno.land/x/curry@v1.0.0/mod.ts";
+export { default as svg2DataURL } from "https://esm.sh/mini-svg-data-uri@1.4.4?pin=v74";
 export type { IconifyJSON } from "https://esm.sh/@iconify/types@1.0.12/types.ts?pin=v71";
 interface Chain<T> {
   map<U>(fn: (val: T) => U): Chain<U>;

diff --git a/preset_svg/identifier.ts b/preset_svg/identifier.ts
@@ -1,8 +1,7 @@
 // This module is browser compatible.
 
-import { encodeSvg } from "./_utils.ts";
 import { cssFn, stringifyCustomProperty } from "../core/utils/format.ts";
-import { chain, curry } from "./deps.ts";
+import { chain, curry, svg2DataURL } from "./deps.ts";
 import type { DynamicCSS } from "../core/types.ts";
 import type { ColorMode, Option } from "./types.ts";
 
@@ -14,8 +13,7 @@ export function createCSSObject(
 ): DynamicCSS {
   return (_, { variablePrefix }) => {
     const scale = "1";
-    const data = `"data:image/svg+xml;utf8,${encodeSvg(svgMarkup)}"`;
-
+    const data = JSON.stringify(svg2DataURL(svgMarkup));
     const $cssFn = curry(cssFn);
     const urlFn = $cssFn("url");
     const varFn = $cssFn("var");