@blueprintjs/icons 4.0.0-beta.2 → 4.0.0-beta.6

package/lib/scss/blueprint-icons-16.scss

@@ -333,209 +333,211 @@ $blueprint-icons-16-codepoints: (
     "mugshot": "\f24a",
     "multi-select": "\f24b",
     "music": "\f24c",
-    "new-drawing": "\f24d",
-    "new-grid-item": "\f24e",
-    "new-layer": "\f24f",
-    "new-layers": "\f250",
-    "new-link": "\f251",
-    "new-object": "\f252",
-    "new-person": "\f253",
-    "new-prescription": "\f254",
-    "new-text-box": "\f255",
-    "ninja": "\f256",
-    "not-equal-to": "\f257",
-    "notifications-snooze": "\f258",
-    "notifications-updated": "\f259",
-    "notifications": "\f25a",
-    "numbered-list": "\f25b",
-    "numerical": "\f25c",
-    "office": "\f25d",
-    "offline": "\f25e",
-    "oil-field": "\f25f",
-    "one-column": "\f260",
-    "one-to-many": "\f261",
-    "one-to-one": "\f262",
-    "outdated": "\f263",
-    "page-layout": "\f264",
-    "panel-stats": "\f265",
-    "panel-table": "\f266",
-    "paperclip": "\f267",
-    "paragraph": "\f268",
-    "path-search": "\f269",
-    "path": "\f26a",
-    "pause": "\f26b",
-    "people": "\f26c",
-    "percentage": "\f26d",
-    "person": "\f26e",
-    "phone": "\f26f",
-    "pie-chart": "\f270",
-    "pin": "\f271",
-    "pivot-table": "\f272",
-    "pivot": "\f273",
-    "play": "\f274",
-    "plus": "\f275",
-    "polygon-filter": "\f276",
-    "power": "\f277",
-    "predictive-analysis": "\f278",
-    "prescription": "\f279",
-    "presentation": "\f27a",
-    "print": "\f27b",
-    "projects": "\f27c",
-    "properties": "\f27d",
-    "property": "\f27e",
-    "publish-function": "\f27f",
-    "pulse": "\f280",
-    "rain": "\f281",
-    "random": "\f282",
-    "record": "\f283",
-    "redo": "\f284",
-    "refresh": "\f285",
-    "regression-chart": "\f286",
-    "remove-column-left": "\f287",
-    "remove-column-right": "\f288",
-    "remove-column": "\f289",
-    "remove-row-bottom": "\f28a",
-    "remove-row-top": "\f28b",
-    "remove": "\f28c",
-    "repeat": "\f28d",
-    "reset": "\f28e",
-    "resolve": "\f28f",
-    "rig": "\f290",
-    "right-join": "\f291",
-    "ring": "\f292",
-    "rocket-slant": "\f293",
-    "rocket": "\f294",
-    "rotate-document": "\f295",
-    "rotate-page": "\f296",
-    "route": "\f297",
-    "satellite": "\f298",
-    "saved": "\f299",
-    "scatter-plot": "\f29a",
-    "search-around": "\f29b",
-    "search-template": "\f29c",
-    "search-text": "\f29d",
-    "search": "\f29e",
-    "segmented-control": "\f29f",
-    "select": "\f2a0",
-    "selection": "\f2a1",
-    "send-message": "\f2a2",
-    "send-to-graph": "\f2a3",
-    "send-to-map": "\f2a4",
-    "send-to": "\f2a5",
-    "series-add": "\f2a6",
-    "series-configuration": "\f2a7",
-    "series-derived": "\f2a8",
-    "series-filtered": "\f2a9",
-    "series-search": "\f2aa",
-    "settings": "\f2ab",
-    "shapes": "\f2ac",
-    "share": "\f2ad",
-    "shared-filter": "\f2ae",
-    "shield": "\f2af",
-    "shop": "\f2b0",
-    "shopping-cart": "\f2b1",
-    "signal-search": "\f2b2",
-    "sim-card": "\f2b3",
-    "slash": "\f2b4",
-    "small-cross": "\f2b5",
-    "small-minus": "\f2b6",
-    "small-plus": "\f2b7",
-    "small-tick": "\f2b8",
-    "snowflake": "\f2b9",
-    "social-media": "\f2ba",
-    "sort-alphabetical-desc": "\f2bb",
-    "sort-alphabetical": "\f2bc",
-    "sort-asc": "\f2bd",
-    "sort-desc": "\f2be",
-    "sort-numerical-desc": "\f2bf",
-    "sort-numerical": "\f2c0",
-    "sort": "\f2c1",
-    "split-columns": "\f2c2",
-    "square": "\f2c3",
-    "stacked-chart": "\f2c4",
-    "stadium-geometry": "\f2c5",
-    "star-empty": "\f2c6",
-    "star": "\f2c7",
-    "step-backward": "\f2c8",
-    "step-chart": "\f2c9",
-    "step-forward": "\f2ca",
-    "stop": "\f2cb",
-    "stopwatch": "\f2cc",
-    "strikethrough": "\f2cd",
-    "style": "\f2ce",
-    "swap-horizontal": "\f2cf",
-    "swap-vertical": "\f2d0",
-    "switch": "\f2d1",
-    "symbol-circle": "\f2d2",
-    "symbol-cross": "\f2d3",
-    "symbol-diamond": "\f2d4",
-    "symbol-square": "\f2d5",
-    "symbol-triangle-down": "\f2d6",
-    "symbol-triangle-up": "\f2d7",
-    "syringe": "\f2d8",
-    "tag": "\f2d9",
-    "take-action": "\f2da",
-    "tank": "\f2db",
-    "taxi": "\f2dc",
-    "temperature": "\f2dd",
-    "text-highlight": "\f2de",
-    "th-derived": "\f2df",
-    "th-disconnect": "\f2e0",
-    "th-filtered": "\f2e1",
-    "th-list": "\f2e2",
-    "th": "\f2e3",
-    "third-party": "\f2e4",
-    "thumbs-down": "\f2e5",
-    "thumbs-up": "\f2e6",
-    "tick-circle": "\f2e7",
-    "tick": "\f2e8",
-    "time": "\f2e9",
-    "timeline-area-chart": "\f2ea",
-    "timeline-bar-chart": "\f2eb",
-    "timeline-events": "\f2ec",
-    "timeline-line-chart": "\f2ed",
-    "tint": "\f2ee",
-    "torch": "\f2ef",
-    "tractor": "\f2f0",
-    "train": "\f2f1",
-    "translate": "\f2f2",
-    "trash": "\f2f3",
-    "tree": "\f2f4",
-    "trending-down": "\f2f5",
-    "trending-up": "\f2f6",
-    "truck": "\f2f7",
-    "two-columns": "\f2f8",
-    "unarchive": "\f2f9",
-    "underline": "\f2fa",
-    "undo": "\f2fb",
-    "ungroup-objects": "\f2fc",
-    "unknown-vehicle": "\f2fd",
-    "unlock": "\f2fe",
-    "unpin": "\f2ff",
-    "unresolve": "\f300",
-    "updated": "\f301",
-    "upload": "\f302",
-    "user": "\f303",
-    "variable": "\f304",
-    "vertical-bar-chart-asc": "\f305",
-    "vertical-bar-chart-desc": "\f306",
-    "vertical-distribution": "\f307",
-    "video": "\f308",
-    "virus": "\f309",
-    "volume-down": "\f30a",
-    "volume-off": "\f30b",
-    "volume-up": "\f30c",
-    "walk": "\f30d",
-    "warning-sign": "\f30e",
-    "waterfall-chart": "\f30f",
-    "waves": "\f310",
-    "widget-button": "\f311",
-    "widget-footer": "\f312",
-    "widget-header": "\f313",
-    "widget": "\f314",
-    "wind": "\f315",
-    "wrench": "\f316",
-    "zoom-in": "\f317",
-    "zoom-out": "\f318",
-    "zoom-to-fit": "\f319",
+    "nest": "\f24d",
+    "new-drawing": "\f24e",
+    "new-grid-item": "\f24f",
+    "new-layer": "\f250",
+    "new-layers": "\f251",
+    "new-link": "\f252",
+    "new-object": "\f253",
+    "new-person": "\f254",
+    "new-prescription": "\f255",
+    "new-text-box": "\f256",
+    "ninja": "\f257",
+    "not-equal-to": "\f258",
+    "notifications-snooze": "\f259",
+    "notifications-updated": "\f25a",
+    "notifications": "\f25b",
+    "numbered-list": "\f25c",
+    "numerical": "\f25d",
+    "office": "\f25e",
+    "offline": "\f25f",
+    "oil-field": "\f260",
+    "one-column": "\f261",
+    "one-to-many": "\f262",
+    "one-to-one": "\f263",
+    "outdated": "\f264",
+    "page-layout": "\f265",
+    "panel-stats": "\f266",
+    "panel-table": "\f267",
+    "paperclip": "\f268",
+    "paragraph": "\f269",
+    "path-search": "\f26a",
+    "path": "\f26b",
+    "pause": "\f26c",
+    "people": "\f26d",
+    "percentage": "\f26e",
+    "person": "\f26f",
+    "phone": "\f270",
+    "pie-chart": "\f271",
+    "pin": "\f272",
+    "pivot-table": "\f273",
+    "pivot": "\f274",
+    "play": "\f275",
+    "plus": "\f276",
+    "polygon-filter": "\f277",
+    "power": "\f278",
+    "predictive-analysis": "\f279",
+    "prescription": "\f27a",
+    "presentation": "\f27b",
+    "print": "\f27c",
+    "projects": "\f27d",
+    "properties": "\f27e",
+    "property": "\f27f",
+    "publish-function": "\f280",
+    "pulse": "\f281",
+    "rain": "\f282",
+    "random": "\f283",
+    "record": "\f284",
+    "redo": "\f285",
+    "refresh": "\f286",
+    "regression-chart": "\f287",
+    "remove-column-left": "\f288",
+    "remove-column-right": "\f289",
+    "remove-column": "\f28a",
+    "remove-row-bottom": "\f28b",
+    "remove-row-top": "\f28c",
+    "remove": "\f28d",
+    "repeat": "\f28e",
+    "reset": "\f28f",
+    "resolve": "\f290",
+    "rig": "\f291",
+    "right-join": "\f292",
+    "ring": "\f293",
+    "rocket-slant": "\f294",
+    "rocket": "\f295",
+    "rotate-document": "\f296",
+    "rotate-page": "\f297",
+    "route": "\f298",
+    "satellite": "\f299",
+    "saved": "\f29a",
+    "scatter-plot": "\f29b",
+    "search-around": "\f29c",
+    "search-template": "\f29d",
+    "search-text": "\f29e",
+    "search": "\f29f",
+    "segmented-control": "\f2a0",
+    "select": "\f2a1",
+    "selection": "\f2a2",
+    "send-message": "\f2a3",
+    "send-to-graph": "\f2a4",
+    "send-to-map": "\f2a5",
+    "send-to": "\f2a6",
+    "series-add": "\f2a7",
+    "series-configuration": "\f2a8",
+    "series-derived": "\f2a9",
+    "series-filtered": "\f2aa",
+    "series-search": "\f2ab",
+    "settings": "\f2ac",
+    "shapes": "\f2ad",
+    "share": "\f2ae",
+    "shared-filter": "\f2af",
+    "shield": "\f2b0",
+    "shop": "\f2b1",
+    "shopping-cart": "\f2b2",
+    "signal-search": "\f2b3",
+    "sim-card": "\f2b4",
+    "slash": "\f2b5",
+    "small-cross": "\f2b6",
+    "small-minus": "\f2b7",
+    "small-plus": "\f2b8",
+    "small-square": "\f2b9",
+    "small-tick": "\f2ba",
+    "snowflake": "\f2bb",
+    "social-media": "\f2bc",
+    "sort-alphabetical-desc": "\f2bd",
+    "sort-alphabetical": "\f2be",
+    "sort-asc": "\f2bf",
+    "sort-desc": "\f2c0",
+    "sort-numerical-desc": "\f2c1",
+    "sort-numerical": "\f2c2",
+    "sort": "\f2c3",
+    "split-columns": "\f2c4",
+    "square": "\f2c5",
+    "stacked-chart": "\f2c6",
+    "stadium-geometry": "\f2c7",
+    "star-empty": "\f2c8",
+    "star": "\f2c9",
+    "step-backward": "\f2ca",
+    "step-chart": "\f2cb",
+    "step-forward": "\f2cc",
+    "stop": "\f2cd",
+    "stopwatch": "\f2ce",
+    "strikethrough": "\f2cf",
+    "style": "\f2d0",
+    "swap-horizontal": "\f2d1",
+    "swap-vertical": "\f2d2",
+    "switch": "\f2d3",
+    "symbol-circle": "\f2d4",
+    "symbol-cross": "\f2d5",
+    "symbol-diamond": "\f2d6",
+    "symbol-square": "\f2d7",
+    "symbol-triangle-down": "\f2d8",
+    "symbol-triangle-up": "\f2d9",
+    "syringe": "\f2da",
+    "tag": "\f2db",
+    "take-action": "\f2dc",
+    "tank": "\f2dd",
+    "taxi": "\f2de",
+    "temperature": "\f2df",
+    "text-highlight": "\f2e0",
+    "th-derived": "\f2e1",
+    "th-disconnect": "\f2e2",
+    "th-filtered": "\f2e3",
+    "th-list": "\f2e4",
+    "th": "\f2e5",
+    "third-party": "\f2e6",
+    "thumbs-down": "\f2e7",
+    "thumbs-up": "\f2e8",
+    "tick-circle": "\f2e9",
+    "tick": "\f2ea",
+    "time": "\f2eb",
+    "timeline-area-chart": "\f2ec",
+    "timeline-bar-chart": "\f2ed",
+    "timeline-events": "\f2ee",
+    "timeline-line-chart": "\f2ef",
+    "tint": "\f2f0",
+    "torch": "\f2f1",
+    "tractor": "\f2f2",
+    "train": "\f2f3",
+    "translate": "\f2f4",
+    "trash": "\f2f5",
+    "tree": "\f2f6",
+    "trending-down": "\f2f7",
+    "trending-up": "\f2f8",
+    "truck": "\f2f9",
+    "two-columns": "\f2fa",
+    "unarchive": "\f2fb",
+    "underline": "\f2fc",
+    "undo": "\f2fd",
+    "ungroup-objects": "\f2fe",
+    "unknown-vehicle": "\f2ff",
+    "unlock": "\f300",
+    "unpin": "\f301",
+    "unresolve": "\f302",
+    "updated": "\f303",
+    "upload": "\f304",
+    "user": "\f305",
+    "variable": "\f306",
+    "vertical-bar-chart-asc": "\f307",
+    "vertical-bar-chart-desc": "\f308",
+    "vertical-distribution": "\f309",
+    "video": "\f30a",
+    "virus": "\f30b",
+    "volume-down": "\f30c",
+    "volume-off": "\f30d",
+    "volume-up": "\f30e",
+    "walk": "\f30f",
+    "warning-sign": "\f310",
+    "waterfall-chart": "\f311",
+    "waves": "\f312",
+    "widget-button": "\f313",
+    "widget-footer": "\f314",
+    "widget-header": "\f315",
+    "widget": "\f316",
+    "wind": "\f317",
+    "wrench": "\f318",
+    "zoom-in": "\f319",
+    "zoom-out": "\f31a",
+    "zoom-to-fit": "\f31b",
 );

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@blueprintjs/icons",
-    "version": "4.0.0-beta.2",
+    "version": "4.0.0-beta.6",
     "description": "Components, fonts, icons, and css files for creating and displaying icons.",
     "main": "lib/cjs/index.js",
     "module": "lib/esm/index.js",
@@ -41,8 +41,8 @@
         "tslib": "~1.13.0"
     },
     "devDependencies": {
-        "@blueprintjs/node-build-scripts": "^2.0.0-beta.0",
-        "@blueprintjs/test-commons": "^1.0.0-beta.0",
+        "@blueprintjs/node-build-scripts": "^2.0.0-beta.1",
+        "@blueprintjs/test-commons": "^1.0.0-beta.2",
         "enzyme": "^3.11.0",
         "fantasticon": "^1.2.2",
         "mocha": "^8.2.1",
@@ -50,7 +50,7 @@
         "react": "^16.14.0",
         "react-dom": "^16.14.0",
         "react-test-renderer": "^16.14.0",
-        "svg-parser": "^2.0.4",
+        "svgo": "^1.3.2",
         "typescript": "~4.1.2",
         "webpack-cli": "^3.3.12"
     },

package/scripts/common.js

@@ -0,0 +1,40 @@
+/*
+ * Copyright 2021 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.
+ */
+
+const fs = require("fs");
+const path = require("path");
+
+const RESOURCES_DIR = path.resolve(__dirname, "../../../resources/icons");
+const GENERATED_SRC_DIR = path.resolve(__dirname, "../src/generated");
+const NS = "bp4";
+
+/**
+ * Writes lines to given filename in GENERATED_SRC_DIR.
+ *
+ * @param {string} filename
+ * @param {Array<string>} lines
+ */
+function writeLinesToFile(filename, ...lines) {
+    const outputPath = path.join(GENERATED_SRC_DIR, filename);
+    const contents = [...lines, ""].join("\n");
+    fs.writeFileSync(outputPath, contents);
+}
+
+module.exports = {
+    RESOURCES_DIR,
+    GENERATED_SRC_DIR,
+    NS,
+    writeLinesToFile,
+};

package/scripts/generate-icon-fonts.js

@@ -22,11 +22,9 @@ const { getLogger } = require("fantasticon/lib/cli/logger");
 const fs = require("fs");
 const path = require("path");
 
-const RESOURCES_DIR = path.resolve(__dirname, "../../../resources/icons");
-const GENERATED_SRC_DIR = path.resolve(__dirname, "../src/generated");
-const logger = getLogger();
-const NS = "bp4";
+const { RESOURCES_DIR, GENERATED_SRC_DIR, NS } = require("./common");
 
+const logger = getLogger();
 logger.start();
 
 fs.mkdirSync(path.join(GENERATED_SRC_DIR, `16px/paths`), { recursive: true });

package/scripts/generate-icon-paths.js

@@ -18,70 +18,75 @@
  * N.B. we expect ../src/generated/ to contain SVG definitions of all the icons already
  */
 
-const { camelCase } = require("change-case");
+const { pascalCase } = require("change-case");
 const fs = require("fs");
 const path = require("path");
-const { parse } = require("svg-parser");
+// Note: we had issues with this approach using svgo v2.x, so for now we stick with v1.x
+// With v2.x, some shapes within the icon SVGs would not get converted to paths correctly,
+// resulting in invalid d="..." attributes rendered by the <Icon> component.
+const SVGO = require("svgo");
 
-const GENERATED_SRC_DIR = path.resolve(__dirname, "../src/generated");
-const COPYRIGHT_HEADER = "/*\n * Copyright 2021 Palantir Technologies, Inc. All rights reserved.\n */\n";
+/**
+ * @typedef {Object} IconMetadata
+ * @property {string} displayName - "Icon name" for display
+ * @property {string} iconName - `icon-name` for IconName and CSS class
+ * @property {string} tags - comma separated list of tags describing this icon
+ * @property {string} group - group to which this icon belongs
+ * @property {string} content - unicode character for icon glyph in font
+ */
 
-for (const iconSize of [16, 20]) {
-    const iconFontSvgDocument = fs.readFileSync(
-        path.join(GENERATED_SRC_DIR, `${iconSize}px/blueprint-icons-${iconSize}.svg`),
-        "utf8",
-    );
+/** @type {IconMetadata[]} */
+const ICONS_METADATA = require("../icons.json").sort((a, b) => a.iconName.localeCompare(b.iconName));
+const { RESOURCES_DIR, writeLinesToFile } = require("./common");
 
-    const icons = [];
-    console.info(`Parsing SVG glyphs from generated ${iconSize}px SVG icon font...`);
-    parseIconGlyphs(iconFontSvgDocument, (iconName, iconPath) => {
-        icons.push(iconName);
-        writeLinesToFile(`${iconSize}px/paths/${iconName}.ts`, `const path = "${iconPath}"`, "export default path;");
-    });
-    console.info(`Parsed ${icons.length} icons.`);
+const svgo = new SVGO({ plugins: [{ convertShapeToPath: { convertArcs: true } }] });
+const ICON_NAMES = ICONS_METADATA.map(icon => icon.iconName);
 
-    console.info(`Writing index file for ${iconSize}px icon kit paths...`);
-    writeLinesToFile(
-        `${iconSize}px/paths/index.ts`,
-        ...icons.map(iconName => `export { default as ${camelCase(iconName)} } from "./${iconName}";`),
-    );
-    console.info("Done.");
-}
+(async () => {
+    for (const iconSize of [16, 20]) {
+        const iconPaths = await getIconPaths(iconSize);
 
-/**
- * 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);
-    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"];
+        for (const [iconName, pathStrings] of Object.entries(iconPaths)) {
+            const line = pathStrings.length > 0
+                ?  `export default [${pathStrings.join(", ")}];`
+                // special case for "blank" icon - we need an explicit typedef
+                : `const p: string[] = []; export default p;`
 
-        // HACKHACK: for some reason, there are duplicates with the suffix "-1", so we ignore those
-        if (name.endsWith("-1")) {
-            continue;
+            writeLinesToFile(
+                `${iconSize}px/paths/${iconName}.ts`,
+                line,
+            );
         }
 
-        const path = glyph.properties["d"];
-        cb(name, path);
+        console.info(`Writing index file for ${iconSize}px icon kit paths...`);
+        writeLinesToFile(
+            `${iconSize}px/paths/index.ts`,
+            ...ICON_NAMES.map(iconName => `export { default as ${pascalCase(iconName)} } from "./${iconName}";`),
+        );
+        console.info("Done.");
     }
-}
+})();
 
 /**
- * Writes lines to given filename in GENERATED_SRC_DIR.
+ * Loads SVG file for each icon, extracts path strings `d="path-string"`,
+ * and constructs map of icon name to array of path strings.
  *
- * @param {string} filename
- * @param {Array<string>} lines
+ * @param {16 | 20} iconSize
  */
-function writeLinesToFile(filename, ...lines) {
-    const outputPath = path.join(GENERATED_SRC_DIR, filename);
-    const contents = [COPYRIGHT_HEADER, ...lines, ""].join("\n");
-    fs.writeFileSync(outputPath, contents);
+async function getIconPaths(iconSize) {
+    /** @type Record<string, string[]> */
+    const iconPaths = {};
+    for (const iconName of ICON_NAMES) {
+        const filepath = path.join(RESOURCES_DIR, `${iconSize}px/${iconName}.svg`);
+        const svg = fs.readFileSync(filepath, "utf-8");
+        const optimizedSvg = await svgo.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;
+    }
+    console.info(`Parsed ${Object.keys(iconPaths).length} ${iconSize}px icons.`);
+    return iconPaths;
 }