fix(icons): build static icon components from resource SVG paths

Author: ggdouglas

packages/icons/package.json

@@ -69,7 +69,6 @@
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-test-renderer": "^18.3.1",
-        "svg-parser": "^2.0.4",
         "typescript": "~5.9.3",
         "webpack-cli": "^5.1.4"
     },

packages/icons/scripts/extractPathsFromResourceSvg.mjs

@@ -0,0 +1,46 @@
+/*
+ * Copyright 2024 Palantir Technologies, Inc. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+// @ts-check
+
+import { readFileSync } from "node:fs";
+import { join } from "node:path";
+
+import { svgOptimizer } from "@blueprintjs/node-build-scripts";
+
+import { iconResourcesDir } from "./common.mjs";
+
+/**
+ * Extracts path `d` strings from an on-disk icon SVG. This matches the pipeline used for
+ * {@link generate-icon-paths.mjs} and the path modules consumed by {@code <Icon />} from core.
+ *
+ * @param {16 | 20} iconSize
+ * @param {string} iconName
+ * @returns {Promise<string[]>}
+ */
+export async function extractPathsFromResourceSvg(iconSize, iconName) {
+    const filepath = join(iconResourcesDir, `${iconSize}px`, `${iconName}.svg`);
+    const svg = readFileSync(filepath, "utf-8");
+    const optimizedSvg = await svgOptimizer.optimize(svg, { path: filepath });
+    /** @type string[] */
+    const paths = [];
+    const re = /\sd="([^"]+)"/g;
+    let m;
+    while ((m = re.exec(optimizedSvg.data)) !== null) {
+        paths.push(m[1].replace(/[\n\t]/g, ""));
+    }
+    return paths;
+}

packages/icons/scripts/generate-icon-components.mjs

@@ -15,8 +15,10 @@
 
 /**
  * @fileoverview Generates SVG React components for each icon.
- * N.B. we expect ../src/generated/ to contain SVG definitions of all the icons already
- * generated by fantasticon (in other words, run ./generate-icon-fonts.js first).
+ *
+ * Paths are taken from the same resource SVGs as {@link generate-icon-paths.mjs} (used by {@code <Icon />}).
+ * We intentionally do not use glyph paths from the generated icon font: those live in an upscaled coordinate
+ * system and require fragile scale/translate transforms (see {@link ICON_RASTER_SCALING_FACTOR} in common.mjs).
  */
 
 // @ts-check
@@ -25,24 +27,12 @@ import { pascalCase } from "change-case";
 import Handlebars from "handlebars";
 import { mkdirSync, readFileSync, rmSync, writeFileSync } from "node:fs";
 import { join, resolve } from "node:path";
-import { parse } from "svg-parser";
 
-import { generatedComponentsDir, generatedSrcDir, ICON_RASTER_SCALING_FACTOR, ICON_SIZES } from "./common.mjs";
+import { generatedComponentsDir, generatedSrcDir, iconsMetadata } from "./common.mjs";
+import { extractPathsFromResourceSvg } from "./extractPathsFromResourceSvg.mjs";
 
 Handlebars.registerHelper("pascalCase", iconName => pascalCase(iconName));
 
-/**
- * Notes on icon component template implementation:
- *
- * The components rendered by this template (`<AddClip>`, `<Calendar>`, etc.) rely on a centered scale `transform` to
- * display their SVG paths correctly.
- *
- * In this template, the `<path>` element applies `transform-origin` using the `style` attribute rather than
- * `transformOrigin`. Although `trasformOrigin` was added as a supported SVG attribute to React in 2023,
- * it is still difficult to use without compile-time and/or runtime errors, see:
- *  - https://github.com/facebook/react/pull/26130
- *  - https://github.com/palantir/blueprint/issues/6591
- */
 const iconComponentTemplate = Handlebars.compile(
     readFileSync(resolve(import.meta.dirname, "iconComponent.tsx.hbs"), "utf8"),
 );
@@ -51,50 +41,21 @@ const componentsIndexTemplate = Handlebars.compile(
 );
 const indexTemplate = Handlebars.compile(readFileSync(resolve(import.meta.dirname, "index.ts.hbs"), "utf8"));
 
-/** @type { { 16: {[iconName: string]: string}; 20: {[iconName: string]: string} } } */
-const iconPaths = {
-    [ICON_SIZES[0]]: {},
-    [ICON_SIZES[1]]: {},
-};
-
-// parse icon paths from the generated SVG font
-for (const iconSize of ICON_SIZES) {
-    const iconFontSvgDocument = readFileSync(
-        join(generatedSrcDir, `${iconSize}px/blueprint-icons-${iconSize}.svg`),
-        "utf8",
-    );
-
-    console.info(`Parsing SVG glyphs from generated ${iconSize}px SVG icon font...`);
-    parseIconGlyphs(iconFontSvgDocument, (iconName, iconPath) => {
-        iconPaths[iconSize][iconName] = iconPath;
-    });
-    console.info(`Parsed ${Object.keys(iconPaths[iconSize]).length} ${iconSize}px icons.`);
-}
-
-// clear existing icon components
 console.info("Clearing existing icon modules...");
 rmSync(generatedComponentsDir, { recursive: true, force: true });
 
-// generate an ES module for each icon
 console.info("Generating ES modules for each icon...");
 mkdirSync(generatedComponentsDir, { recursive: true });
 
-for (const [iconName, icon16pxPath] of Object.entries(iconPaths[16])) {
-    const icon20pxPath = iconPaths[20][iconName];
-    if (icon20pxPath === undefined) {
-        console.error(`Could not find corresponding 20px icon path for ${iconName}, skipping!`);
-        continue;
-    }
+for (const { iconName } of iconsMetadata) {
+    const paths16 = await extractPathsFromResourceSvg(16, iconName);
+    const paths20 = await extractPathsFromResourceSvg(20, iconName);
     writeFileSync(
         join(generatedComponentsDir, `${iconName}.tsx`),
-        // Notes on icon component template implementation:
-        //  - path "translation" transform must use "viewbox" dimensions, not "size", in order to avoid issues
-        //    like https://github.com/palantir/blueprint/issues/6220
         iconComponentTemplate({
             iconName,
-            icon16pxPath,
-            icon20pxPath,
-            pathScaleFactor: 1 / ICON_RASTER_SCALING_FACTOR,
+            paths16Json: JSON.stringify(paths16),
+            paths20Json: JSON.stringify(paths20),
         }),
     );
 }
@@ -103,43 +64,16 @@ console.info(`Writing index file for all icon modules...`);
 writeFileSync(
     join(generatedComponentsDir, "index.ts"),
     componentsIndexTemplate({
-        iconNames: Object.keys(iconPaths[16]),
+        iconNames: iconsMetadata.map(i => i.iconName),
     }),
 );
 
 console.info(`Writing index file for package...`);
 writeFileSync(
     join(generatedSrcDir, "index.ts"),
     indexTemplate({
-        iconNames: Object.keys(iconPaths[16]),
+        iconNames: iconsMetadata.map(i => i.iconName),
     }),
 );
 
 console.info("Done.");
-
-/**
- * Parse all icons of a given size from the SVG font generated by fantasticon.
- * At this point we've already optimized the icon SVGs through svgo (via fantasticon), so
- * we avoid duplicating that work by reading the generated glyphs here.
- *
- * @param {string} iconFontSvgDocument
- * @param {(iconName: string, iconPath: string) => void} cb iterator for each icon path
- */
-function parseIconGlyphs(iconFontSvgDocument, cb) {
-    const rootNode = parse(iconFontSvgDocument);
-    // @ts-ignore
-    const defs = rootNode.children[0].children[0];
-    const glyphs = defs.children[0].children.filter(node => node.tagName === "glyph");
-
-    for (const glyph of glyphs) {
-        const name = glyph.properties["glyph-name"];
-
-        // HACKHACK: for some reason, there are duplicates with the suffix "-1", so we ignore those
-        if (name.endsWith("-1")) {
-            continue;
-        }
-
-        const path = glyph.properties["d"];
-        cb(name, path);
-    }
-}

packages/icons/scripts/generate-icon-paths.mjs

@@ -22,12 +22,10 @@
 // @ts-check
 
 import { pascalCase } from "change-case";
-import { readFileSync } from "node:fs";
-import { join } from "node:path";
 
-import { svgOptimizer } from "@blueprintjs/node-build-scripts";
+import { ICON_SIZES, iconsMetadata, writeLinesToFile } from "./common.mjs";
+import { extractPathsFromResourceSvg } from "./extractPathsFromResourceSvg.mjs";
 
-import { ICON_SIZES, iconResourcesDir, iconsMetadata, writeLinesToFile } from "./common.mjs";
 const ICON_NAMES = iconsMetadata.map(icon => icon.iconName);
 
 for (const iconSize of ICON_SIZES) {
@@ -36,7 +34,7 @@ for (const iconSize of ICON_SIZES) {
     for (const [iconName, pathStrings] of Object.entries(iconPaths)) {
         const line =
             pathStrings.length > 0
-                ? `export default [${pathStrings.join(", ")}];`
+                ? `export default [${pathStrings.map(p => JSON.stringify(p)).join(", ")}];`
                 : // special case for "blank" icon - we need an explicit typedef
                   `const p: string[] = []; export default p;`;
 
@@ -61,15 +59,7 @@ async function getIconPaths(iconSize) {
     /** @type Record<string, string[]> */
     const iconPaths = {};
     for (const iconName of ICON_NAMES) {
-        const filepath = join(iconResourcesDir, `${iconSize}px/${iconName}.svg`);
-        const svg = readFileSync(filepath, "utf-8");
-        const optimizedSvg = await svgOptimizer.optimize(svg, { path: filepath });
-        const pathStrings = (optimizedSvg.data.match(/ d="[^"]+"/g) || [])
-            // strip off leading 'd="'
-            .map(s => s.slice(3))
-            // strip out newlines and tabs, but keep other whitespace
-            .map(s => s.replace(/[\n\t]/g, ""));
-        iconPaths[iconName] = pathStrings;
+        iconPaths[iconName] = await extractPathsFromResourceSvg(iconSize, iconName);
     }
     console.info(`Parsed ${Object.keys(iconPaths).length} ${iconSize}px icons.`);
     return iconPaths;

packages/icons/scripts/iconComponent.tsx.hbs

@@ -18,21 +18,22 @@ import type { SVGIconProps } from "../../svgIconProps";
 import { IconSize } from "../../iconTypes";
 import { SVGIconContainer } from "../../svgIconContainer";
 
+/** Path data for the 16px grid; matches {@link generate-icon-paths.mjs} / {@code <Icon />} from core. */
+const PATHS_16 = {{{paths16Json}}} as readonly string[];
+
+/** Path data for the 20px grid; matches {@link generate-icon-paths.mjs} / {@code <Icon />} from core. */
+const PATHS_20 = {{{paths20Json}}} as readonly string[];
+
 export const {{pascalCase iconName}}: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>((props, ref) => {
     const isLarge = (props.size ?? IconSize.STANDARD) >= IconSize.LARGE;
-    const pixelGridSize = isLarge ? IconSize.LARGE : IconSize.STANDARD;
-    const translation = `${-1 * pixelGridSize / {{pathScaleFactor}} / 2}`;
-    const style = { transformOrigin: "center" };
+    const paths = isLarge ? PATHS_20 : PATHS_16;
     return (
         <SVGIconContainer iconName="{{iconName}}" ref={ref} {...props}>
-            <path
-                d={isLarge ? "{{icon20pxPath}}" : "{{icon16pxPath}}"}
-                fillRule="evenodd"
-                transform={`scale({{pathScaleFactor}}, -{{pathScaleFactor}}) translate(${translation}, ${translation})`}
-                style={style}
-            />
+            {paths.map((d, i) => (
+                <path key={i} d={d} fillRule="evenodd" />
+            ))}
         </SVGIconContainer>
-   );
+    );
 });
 {{pascalCase iconName}}.displayName = `Blueprint6.Icon.{{pascalCase iconName}}`;
 export default {{pascalCase iconName}};