@blueprintjs/icons 4.0.0-beta.6 → 4.0.0-rc.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@blueprintjs/icons",
-    "version": "4.0.0-beta.6",
+    "version": "4.0.0-rc.0",
     "description": "Components, fonts, icons, and css files for creating and displaying icons.",
     "main": "lib/cjs/index.js",
     "module": "lib/esm/index.js",
@@ -41,10 +41,10 @@
         "tslib": "~1.13.0"
     },
     "devDependencies": {
-        "@blueprintjs/node-build-scripts": "^2.0.0-beta.1",
-        "@blueprintjs/test-commons": "^1.0.0-beta.2",
+        "@blueprintjs/node-build-scripts": "^2.0.0-rc.0",
+        "@blueprintjs/test-commons": "^1.0.0-rc.0",
         "enzyme": "^3.11.0",
-        "fantasticon": "^1.2.2",
+        "fantasticon": "^1.2.3",
         "mocha": "^8.2.1",
         "npm-run-all": "^4.1.5",
         "react": "^16.14.0",

package/scripts/copy-fonts.sh

@@ -12,7 +12,7 @@ mkdir -p "$OUTPUT"
 iconSizes=(16 20)
 
 for size in "${iconSizes[@]}"; do
-    for font in "$INPUT"/"$size"px/*.{eot,svg,ttf,woff,woff2}; do
+    for font in "$INPUT"/"$size"px/*.{eot,ttf,woff,woff2}; do
         cp "$font" "$OUTPUT/"
     done
 done

package/scripts/generate-icon-fonts.js

@@ -17,66 +17,63 @@
  * @fileoverview Generates icon fonts and codepoints from SVG sources
  */
 
-const { generateFonts, FontAssetType, OtherAssetType } = require("fantasticon");
+const { generateFonts: runFantasticon, FontAssetType, OtherAssetType } = require("fantasticon");
 const { getLogger } = require("fantasticon/lib/cli/logger");
 const fs = require("fs");
 const path = require("path");
 
+const iconsMetadata = require("../icons.json");
 const { RESOURCES_DIR, GENERATED_SRC_DIR, NS } = require("./common");
 
 const logger = getLogger();
-logger.start();
+const codepoints = {};
 
-fs.mkdirSync(path.join(GENERATED_SRC_DIR, `16px/paths`), { recursive: true });
-generateFonts({
-    name: "blueprint-icons-16",
-    inputDir: path.join(RESOURCES_DIR, "16px"),
-    outputDir: path.join(GENERATED_SRC_DIR, "16px"),
-    fontHeight: 16,
-    fontTypes: [FontAssetType.TTF, FontAssetType.EOT, FontAssetType.WOFF2, FontAssetType.WOFF, FontAssetType.SVG],
-    // CSS contains @font-face, SCSS contains codepoints, TS contains enums & codepoints
-    assetTypes: [OtherAssetType.CSS, OtherAssetType.SCSS, OtherAssetType.TS],
-    templates: {
-        // N.B. we don't generate CSS, just the map of code points which we can use downstream
-        scss: path.resolve(__dirname, "./icons-16.scss.hbs"),
-        css: path.resolve(__dirname, "./icons.css.hbs"),
-    },
-    pathOptions: {
-        scss: path.join(GENERATED_SRC_DIR, "16px", "_icon-variables.scss"),
-    },
-    tag: "i",
-    prefix: `${NS}-icon-standard`,
-})
-    .then(results => {
-        logger.results(results);
-    })
-    .catch(error => {
-        logger.error(error);
-    });
+(async function () {
+    for (const icon of iconsMetadata) {
+        if (Object.values(codepoints).indexOf(icon.codepoint) !== -1) {
+            throw new Error(
+                `[generate-icon-fonts] Invalid metadata entry in icons.json: icon "${icon.iconName}" cannot have codepoint ${icon.codepoint}, it is already in use.`,
+            );
+        }
+        codepoints[icon.iconName] = icon.codepoint;
+    }
+
+    logger.start();
+    await Promise.all([
+        connectToLogger(generateFonts(16, `${NS}-icon-standard`)),
+        connectToLogger(generateFonts(20, `${NS}-icon-large`)),
+    ]);
+})();
 
-fs.mkdirSync(path.join(GENERATED_SRC_DIR, `20px/paths`), { recursive: true });
-generateFonts({
-    name: "blueprint-icons-20",
-    inputDir: path.join(RESOURCES_DIR, "20px"),
-    outputDir: path.join(GENERATED_SRC_DIR, "20px"),
-    fontHeight: 20,
-    fontTypes: [FontAssetType.TTF, FontAssetType.EOT, FontAssetType.WOFF2, FontAssetType.WOFF, FontAssetType.SVG],
-    // CSS contains @font-face, SCSS contains codepoints, TS contains enums & codepoints
-    assetTypes: [OtherAssetType.CSS, OtherAssetType.SCSS, OtherAssetType.TS],
-    templates: {
-        // N.B. here we don't generate CSS, or even the code points (we expect them to be the same as icons-16)
-        scss: path.resolve(__dirname, "./icons-20.scss.hbs"),
-        css: path.resolve(__dirname, "./icons.css.hbs"),
-    },
-    pathOptions: {
-        scss: path.join(GENERATED_SRC_DIR, "20px", "_icon-variables.scss"),
-    },
-    tag: "i",
-    prefix: `${NS}-icon-large`,
-})
-    .then(results => {
-        logger.results(results);
-    })
-    .catch(error => {
-        logger.error(error);
+async function generateFonts(size, prefix) {
+    fs.mkdirSync(path.join(GENERATED_SRC_DIR, `${size}px/paths`), { recursive: true });
+    return runFantasticon({
+        name: `blueprint-icons-${size}`,
+        inputDir: path.join(RESOURCES_DIR, `${size}px`),
+        outputDir: path.join(GENERATED_SRC_DIR, `${size}px`),
+        normalize: true,
+        descent: 0,
+        // N.B. Important: we need to scale up the font height so that the icons do not get visually degraded
+        // or compressed through rounding errors (svgicons2svgfont rasterizes the icons in order to convert them)
+        // See https://github.com/palantir/blueprint/issues/5002
+        fontHeight: size * 20,
+        fontTypes: [FontAssetType.TTF, FontAssetType.EOT, FontAssetType.WOFF2, FontAssetType.WOFF],
+        // CSS contains @font-face, SCSS contains codepoints, TS contains enums & codepoints
+        assetTypes: [OtherAssetType.CSS, OtherAssetType.SCSS, OtherAssetType.TS],
+        templates: {
+            // N.B. in icons-20, we don't generate CSS or the codepoints since we expect them to be the same as icons-16
+            scss: path.resolve(__dirname, `./icons-${size}.scss.hbs`),
+            css: path.resolve(__dirname, "./icons.css.hbs"),
+        },
+        pathOptions: {
+            scss: path.join(GENERATED_SRC_DIR, `${size}px`, "_icon-variables.scss"),
+        },
+        codepoints,
+        tag: "i",
+        prefix,
     });
+}
+
+function connectToLogger(runner) {
+    return runner.then(results => logger.results(results)).catch(error => logger.error(error));
+}