[icons] Enable tree-shaking for SVG icons

config/tsconfig.base.json

@@ -24,6 +24,7 @@
         "removeComments": false,
         "sourceMap": false,
         "stripInternal": true,
-        "target": "es5"
+        "target": "es5",
+        "typeRoots": ["../node_modules/@types"]
     }
 }

packages/core/src/common/errors.ts

@@ -26,6 +26,11 @@ export const HOTKEYS_WARN_DECORATOR_NO_METHOD = ns + ` @HotkeysTarget-decorated
 export const HOTKEYS_WARN_DECORATOR_NEEDS_REACT_ELEMENT =
     ns + ` "@HotkeysTarget-decorated components must return a single JSX.Element or an empty render.`;
 
+export const ICON_STRING_NAMES_NOT_SUPPORTED =
+    ns +
+    ` Specifying icon by string name is not supported because the BLUEPRINT_ICONS_TREE_SHAKING flag has been set.` +
+    ` Icons must be imported as individual modules from the @blueprintjs/icons package.`;
+
 export const NUMERIC_INPUT_MIN_MAX =
     ns + ` <NumericInput> requires min to be strictly less than max if both are defined.`;
 export const NUMERIC_INPUT_MINOR_STEP_SIZE_BOUND =

packages/core/src/components/icon/icon.tsx

@@ -7,9 +7,16 @@
 import classNames from "classnames";
 import * as React from "react";
 
-import { IconName, IconSvgPaths16, IconSvgPaths20 } from "@blueprintjs/icons";
+import { IconName, SVGIcon } from "@blueprintjs/icons";
 import { Classes, IIntentProps, IProps } from "../../common";
+import * as Errors from "../../common/errors";
 
+let allIcons: { [key: string]: SVGIcon | undefined } | null = null;
+
+if (!(global as any).BLUEPRINT_ICONS_TREE_SHAKING) {
+    // tslint:disable-next-line:no-var-requires
+    allIcons = require("@blueprintjs/icons");
+}
 export { IconName };
 
 export interface IIconProps extends IIntentProps, IProps {
@@ -27,13 +34,13 @@ export interface IIconProps extends IIntentProps, IProps {
      * be explicitly set to falsy values to render nothing.
      *
      * - If `null` or `undefined` or `false`, this component will render nothing.
-     * - If given an `IconName` (a string literal union of all icon names),
+     * - If given an `IconName` (a string literal union of all icon names) or an `SVGIcon`,
      *   that icon will be rendered as an `<svg>` with `<path>` tags.
      * - If given a `JSX.Element`, that element will be rendered and _all other props on this component are ignored._
      *   This type is supported to simplify usage of this component in other Blueprint components.
      *   As a consumer, you should never use `<Icon icon={<element />}` directly; simply render `<element />` instead.
      */
-    icon: IconName | JSX.Element | false | null | undefined;
+    icon: IconName | SVGIcon | JSX.Element | false | null | undefined;
 
     /**
      * Size of the icon, in pixels.
@@ -62,20 +69,22 @@ export class Icon extends React.PureComponent<IIconProps & React.SVGAttributes<S
     public static readonly SIZE_LARGE = 20;
 
     public render() {
-        const { className, color, icon, iconSize = Icon.SIZE_STANDARD, intent, title = icon, ...svgProps } = this.props;
+        const { className, color, icon, iconSize = Icon.SIZE_STANDARD, intent, ...svgProps } = this.props;
+
+        if (icon == null || icon === false || React.isValidElement(icon)) {
+            return icon || null;
+        }
 
-        if (icon == null) {
+        const svgIcon = typeof icon === "string" ? this.getSvgIconFromName(icon) : (icon as SVGIcon);
+        if (svgIcon == null) {
             return null;
-        } else if (typeof icon !== "string") {
-            return icon;
         }
 
         // choose which pixel grid is most appropriate for given icon size
         const pixelGridSize = iconSize >= Icon.SIZE_LARGE ? Icon.SIZE_LARGE : Icon.SIZE_STANDARD;
-        const paths = this.renderSvgPaths(pixelGridSize, icon);
-        if (paths == null) {
-            return null;
-        }
+        const pathStrings = pixelGridSize === Icon.SIZE_STANDARD ? svgIcon[1] : svgIcon[2];
+
+        const paths = this.renderSvgPaths(pathStrings);
 
         const classes = classNames(Classes.ICON, Classes.intentClass(intent), className);
         const viewBox = `0 0 ${pixelGridSize} ${pixelGridSize}`;
@@ -86,6 +95,8 @@ export class Icon extends React.PureComponent<IIconProps & React.SVGAttributes<S
             style = { ...style, fill: color };
         }
 
+        const { title = svgIcon[0] } = this.props;
+
         return (
             <svg
                 {...svgProps}
@@ -102,9 +113,18 @@ export class Icon extends React.PureComponent<IIconProps & React.SVGAttributes<S
         );
     }
 
-    private renderSvgPaths(pathsSize: number, iconName: IconName) {
-        const svgPathsRecord = pathsSize === Icon.SIZE_STANDARD ? IconSvgPaths16 : IconSvgPaths20;
-        const pathStrings = svgPathsRecord[iconName];
+    private getSvgIconFromName(iconName: IconName) {
+        const camelCaseIconName = iconName
+            .split("-")
+            .reduce((result, word, i) => result + (i ? word[0].toUpperCase() + word.slice(1) : word));
+
+        if (allIcons == null) {
+            throw new Error(Errors.ICON_STRING_NAMES_NOT_SUPPORTED);
+        }
+        return allIcons[`${camelCaseIconName}Icon`];
+    }
+
+    private renderSvgPaths(pathStrings: string[] | null) {
         if (pathStrings == null) {
             return null;
         }

packages/icons/src/index.ts

@@ -8,5 +8,7 @@ import * as IconContents from "./generated/iconContents";
 import * as IconNames from "./generated/iconNames";
 
 export { IconContents, IconNames };
-export { IconSvgPaths16, IconSvgPaths20 } from "./generated/iconSvgPaths";
 export { IconName } from "./iconName";
+export { SVGIcon } from "./svgIcon";
+
+export * from "./generated/svgIcons";

packages/icons/src/svgIcon.ts

@@ -0,0 +1,11 @@
+/*
+ * Copyright 2018 Palantir Technologies, Inc. All rights reserved.
+ */
+
+/**
+ * Compact representation of an SVG icon.
+ * - `[0]`: name
+ * - `[1]`: 16px SVG path
+ * - `[2]`: 20px SVG path
+ */
+export type SVGIcon = [string, string[], string[]];

packages/node-build-scripts/generate-icons-source

@@ -8,6 +8,7 @@
 const fs = require("fs");
 const path = require("path");
 const SVGO = require("svgo");
+const lodash = require("lodash");
 const { COPYRIGHT_HEADER } = require("./constants");
 
 const svgo = new SVGO({ plugins: [{ convertShapeToPath: { convertArcs: true } }] });
@@ -51,17 +52,21 @@ writeLinesToFile("iconNames.ts", ...exportIconConsts(icon => icon.iconName));
 
 (async () => {
     // SVG path strings. IIFE to unwrap async.
+    const iconSvgPaths16 = await buildPaths(16);
+    const iconSvgPaths20 = await buildPaths(20);
+
     writeLinesToFile(
-        "iconSvgPaths.ts",
-        'import { IconName } from "../iconName";',
-        "",
-        "export const IconSvgPaths16: Record<IconName, string[]> = {",
-        ...(await buildPathsObject("IconSvgPaths", 16)),
-        "};",
+        "svgIcons.ts",
+        "// tslint:disable:prettier",
+        'import { SVGIcon } from "../svgIcon"',
         "",
-        "export const IconSvgPaths20: Record<IconName, string[]> = {",
-        ...(await buildPathsObject("IconSvgPaths", 20)),
-        "};",
+        ...ICONS_METADATA.map(({iconName}) => {
+            const alias = lodash.camelCase(iconName);
+            return `export const ${alias}Icon: SVGIcon = [`
+                + `"${iconName}"` + ","
+                + iconSvgPaths16[iconName] + ","
+                + iconSvgPaths20[iconName] + "]"
+        }),
     );
 })();
 
@@ -101,22 +106,34 @@ function exportIconConsts(valueGetter) {
     return ICONS_METADATA.map(icon => `export const ${toEnumName(icon)} = "${valueGetter(icon)}";`);
 }
 
-/**
+/*
  * 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} objectName
+ * and returns a map of icon names to stringified arrays of path strings.
  * @param {16 | 20} size
  */
-async function buildPathsObject(objectName, size) {
-    return Promise.all(
+async function buildPaths(size) {
+    const paths = {};
+    await Promise.all(
         ICONS_METADATA.map(async icon => {
             const filepath = path.resolve(__dirname, `../../resources/icons/${size}px/${icon.iconName}.svg`);
             const svg = fs.readFileSync(filepath, "utf-8");
             const pathStrings = await svgo
                 .optimize(svg, { path: filepath })
                 .then(({ data }) => data.match(/ d="[^"]+"/g) || [])
                 .then(paths => paths.map(s => s.slice(3)));
-            return `    "${icon.iconName}": [${pathStrings.join(",\n")}],`;
+            paths[icon.iconName] = `[${pathStrings.join(",\n")}]`;
         }),
     );
+  return paths;
+}
+
+/**
+ * Returns stringified contents of a map of icon names to arrays of path
+ * strings.
+ * @param {Object} paths - paths as returned by buildPaths
+ */
+function buildPathsObject(paths) {
+    return Object.keys(paths).map(iconName => {
+        return `    "${iconName}": ${paths[iconName]},`
+    });
 }