@khanacademy/wonder-blocks-icon 2.2.1 → 4.0.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @khanacademy/wonder-blocks-icon
 
+## 4.0.0
+
+### Major Changes
+
+-   171e3b01: Delete Icon component in favor of PhosphorIcon
+
+## 3.0.0
+
+### Major Changes
+
+-   96f675d2: Remove size/weight restriction from PhosphorIcon and remove some exported types from the package.
+
 ## 2.2.1
 
 ### Patch Changes

package/dist/components/phosphor-icon.d.ts

@@ -1,68 +1,6 @@
 import * as React from "react";
 import { AriaProps, StyleType } from "@khanacademy/wonder-blocks-core";
-import { PhosphorIconAsset, PhosphorIconMedium, PhosphorIconSmall } from "../types";
-type CommonProps = Pick<AriaProps, "aria-hidden" | "aria-label"> & {
-    /**
-     * The color of the icon. Will default to `currentColor`, which means that
-     * it will take on the CSS `color` value from the parent element.
-     */
-    color?: string;
-    /**
-     * Additional styles to apply to the icon.
-     */
-    style?: StyleType;
-    /**
-     * Adds CSS classes to the Icon.
-     */
-    className?: string;
-    /**
-     * Test ID used for e2e testing.
-     */
-    testId?: string;
-};
-type PropsForSmallIcon = CommonProps & {
-    /**
-     * The icon size (16px).
-     *
-     * __NOTE:__ small icons only support `bold` and `fill` weights. **Make sure
-     * you are not using a `regular` icon.**
-     */
-    size?: "small";
-    /**
-     * The icon to display. This is a reference to the icon asset
-     * (imported as a static SVG file).
-     * __NOTE:__ small icons only support `bold` and `fill` weights.
-     */
-    icon: PhosphorIconSmall;
-};
-type PropsForMediumIcon = CommonProps & {
-    /**
-     * The icon size (24px). Defaults to `medium`.
-     *
-     * __NOTE:__ medium icons only support `regular` and `fill` weights. **Make
-     * sure you are not using a `bold` icon.**
-     */
-    size?: "medium";
-    /**
-     * The icon to display. This is a reference to the icon asset
-     * (imported as a static SVG file).
-     * __NOTE:__ medium icons only support `regular` and `fill` weights.
-     */
-    icon: PhosphorIconMedium;
-};
-type PropsForOtherSizes = CommonProps & {
-    /**
-     * large: The icon size (48px).
-     * xlarge: The icon size (96px).
-     */
-    size?: "large" | "xlarge";
-    /**
-     * The icon to display. This is a reference to the icon asset
-     * (imported as a static SVG file).
-     */
-    icon: PhosphorIconAsset;
-};
-type Props = PropsForSmallIcon | PropsForMediumIcon | PropsForOtherSizes;
+import { IconSize, PhosphorIconAsset } from "../types";
 /**
  * A `PhosphorIcon` displays a small informational or decorative image as an
  * HTML element that renders a Phosphor Icon SVG available from the
@@ -88,5 +26,36 @@ type Props = PropsForSmallIcon | PropsForMediumIcon | PropsForOtherSizes;
  * These icons should fit into a viewport of `16`, `24`, `48`, and `96` pixels,
  * respectively.
  */
-export declare const PhosphorIcon: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLSpanElement>>;
-export {};
+export declare const PhosphorIcon: React.ForwardRefExoticComponent<Pick<AriaProps, "role" | "aria-hidden" | "aria-label"> & {
+    /**
+     * The color of the icon. Will default to `currentColor`, which means that
+     * it will take on the CSS `color` value from the parent element.
+     */
+    color?: string | undefined;
+    /**
+     * Additional styles to apply to the icon.
+     */
+    style?: StyleType;
+    /**
+     * Adds CSS classes to the Icon.
+     */
+    className?: string | undefined;
+    /**
+     * Test ID used for e2e testing.
+     */
+    testId?: string | undefined;
+    /**
+     * Size of the icon. One of `small` (16), `medium` (24), `large` (48), or
+     * `xlarge` (96). Defaults to `small`.
+     */
+    size?: IconSize | undefined;
+    /**
+     * The icon to display. This is a reference to the icon asset (imported as a
+     * static SVG file).
+     *
+     * It supports the following types:
+     * - `PhosphorIconAsset`: a reference to a Phosphor SVG asset.
+     * - `string`: an import referencing an arbitrary SVG file.
+     */
+    icon: PhosphorIconAsset | string;
+} & React.RefAttributes<HTMLSpanElement>>;

package/dist/es/index.js

@@ -36,164 +36,6 @@ const viewportPixelsForSize = size => ({
   large: 48,
   xlarge: 96
 })[size];
-const getPathForIcon = (icon, size) => {
-  if (typeof icon[size] === "number") {
-    return {
-      assetSize: size,
-      path: icon[size]
-    };
-  } else {
-    const desiredPixelSize = viewportPixelsForSize(size);
-    const availableSizes = Object.keys(icon);
-    const sortFn = availableSize => {
-      const availablePixelSize = viewportPixelsForSize(availableSize);
-      const tooLargeByPixels = availablePixelSize - desiredPixelSize;
-      return tooLargeByPixels > 0 ? Number.POSITIVE_INFINITY : Math.abs(tooLargeByPixels);
-    };
-    const assetSizes = availableSizes.sort((a, b) => sortFn(a) - sortFn(b));
-    const bestAssetSize = assetSizes[0];
-    if (bestAssetSize && icon[bestAssetSize]) {
-      return {
-        assetSize: bestAssetSize,
-        path: icon[bestAssetSize]
-      };
-    } else {
-      throw new Error("Icon does not contain any valid asset sizes!");
-    }
-  }
-};
-
-const _excluded$1 = ["color", "icon", "size", "style", "testId"];
-const StyledSVG = addStyle("svg");
-const Icon = React.forwardRef(function Icon(props, ref) {
-  const {
-      color = "currentColor",
-      icon,
-      size = "small",
-      style,
-      testId
-    } = props,
-    sharedProps = _objectWithoutPropertiesLoose(props, _excluded$1);
-  const {
-    assetSize,
-    path
-  } = getPathForIcon(icon, size);
-  const pixelSize = viewportPixelsForSize(size);
-  const viewboxPixelSize = viewportPixelsForSize(assetSize);
-  return React.createElement(StyledSVG, _extends({}, sharedProps, {
-    style: [styles$1.svg, style],
-    width: pixelSize,
-    height: pixelSize,
-    viewBox: `0 0 ${viewboxPixelSize} ${viewboxPixelSize}`,
-    "data-test-id": testId,
-    ref: ref
-  }), React.createElement("path", {
-    fill: color,
-    d: path
-  }));
-});
-const styles$1 = StyleSheet.create({
-  svg: {
-    display: "inline-block",
-    verticalAlign: "text-bottom",
-    flexShrink: 0,
-    flexGrow: 0
-  }
-});
-
-const add = {
-  medium: "M11 11V7a1 1 0 0 1 2 0v4h4a1 1 0 0 1 0 2h-4v4a1 1 0 0 1-2 0v-4H7a1 1 0 0 1 0-2h4zm1 13C5.373 24 0 18.627 0 12S5.373 0 12 0s12 5.373 12 12-5.373 12-12 12zm0-2c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"
-};
-const caretDown = {
-  small: "M8 8.586l3.293-3.293a1 1 0 0 1 1.414 1.414l-4 4a1 1 0 0 1-1.414 0l-4-4a1 1 0 0 1 1.414-1.414L8 8.586z",
-  medium: "M17.293 8.293a1 1 0 0 1 1.414 1.414l-6 6a1 1 0 0 1-1.414 0l-6-6a1 1 0 0 1 1.414-1.414L12 13.586l5.293-5.293z"
-};
-const caretLeft = {
-  small: "M7.414 8l3.293 3.293a1 1 0 0 1-1.414 1.414l-4-4a1 1 0 0 1 0-1.414l4-4a1 1 0 0 1 1.414 1.414L7.414 8z",
-  medium: "M15.707 17.293a1 1 0 0 1-1.414 1.414l-6-6a1 1 0 0 1 0-1.414l6-6a1 1 0 0 1 1.414 1.414L10.414 12l5.293 5.293z"
-};
-const caretRight = {
-  small: "M8.586 8L5.293 4.707a1 1 0 0 1 1.414-1.414l4 4a1 1 0 0 1 0 1.414l-4 4a1 1 0 0 1-1.414-1.414L8.586 8z",
-  medium: "M8.293 17.293a1 1 0 0 0 1.414 1.414l6-6a1 1 0 0 0 0-1.414l-6-6a1 1 0 0 0-1.414 1.414L13.586 12l-5.293 5.293z"
-};
-const caretUp = {
-  small: "M8 7.414l-3.293 3.293a1 1 0 0 1-1.414-1.414l4-4a1 1 0 0 1 1.414 0l4 4a1 1 0 0 1-1.414 1.414L8 7.414z",
-  medium: "M17.293 15.707a1 1 0 0 0 1.414-1.414l-6-6a1 1 0 0 0-1.414 0l-6 6a1 1 0 0 0 1.414 1.414L12 10.414l5.293 5.293z"
-};
-const check = {
-  small: "M6.072 10.4l6.175-7.058a1 1 0 1 1 1.506 1.317L6.769 12.64a1 1 0 0 1-1.55-.054L2.203 8.604a1 1 0 1 1 1.594-1.208L6.072 10.4z"
-};
-const contentArticle = {
-  small: "M11 12V8h2v5a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h3v2H5v8h6zM9.5 6a.5.5 0 0 1-.5-.5V2l4 4H9.5z",
-  medium: "M12 24C5.373 24 0 18.627 0 12S5.373 0 12 0s12 5.373 12 12-5.373 12-12 12zm0-2c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10zm3-6v-4h2v5a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h3v2H9v8h6zm-1.5-6a.5.5 0 0 1-.5-.5V6l4 4h-3.5z"
-};
-const contentExercise = {
-  small: "M7.5 6.914L5 9.414V11h1.586l2.5-2.5L7.5 6.914zM8.914 5.5L10.5 7.086 11.586 6 10 4.414 8.914 5.5zM3 9a1 1 0 0 1 .293-.707l6-6a1 1 0 0 1 1.414 0l3 3a1 1 0 0 1 0 1.414l-6 6A1 1 0 0 1 7 13H4a1 1 0 0 1-1-1V9z",
-  medium: "M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10zm-.5-11.086l1.586 1.586-2.5 2.5H9v-1.586l2.5-2.5zM12.914 9.5L14 8.414 15.586 10 14.5 11.086 12.914 9.5zM12 24C5.373 24 0 18.627 0 12S5.373 0 12 0s12 5.373 12 12-5.373 12-12 12zM7 13v3a1 1 0 0 0 1 1h3a1 1 0 0 0 .707-.293l6-6a1 1 0 0 0 0-1.414l-3-3a1 1 0 0 0-1.414 0l-6 6A1 1 0 0 0 7 13z"
-};
-const contentVideo = {
-  small: "M6 5.87v4.263l3.197-2.131L6 5.87zm-.445-2.7l6 4a1 1 0 0 1 0 1.664l-6 4A1 1 0 0 1 4 12.002v-8a1 1 0 0 1 1.555-.832z",
-  medium: "M12 24C5.373 24 0 18.627 0 12S5.373 0 12 0s12 5.373 12 12-5.373 12-12 12zm0-2c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10zM10.555 7.17l6 4a1 1 0 0 1 0 1.664l-6 4A1 1 0 0 1 9 16.002v-8a1 1 0 0 1 1.555-.832zM11 14.133l3.197-2.131L11 9.87v4.263z"
-};
-const correct = {
-  medium: "M12 24C5.373 24 0 18.627 0 12S5.373 0 12 0s12 5.373 12 12-5.373 12-12 12zm0-2c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10zm-1.928-7.6l6.175-7.058a1 1 0 1 1 1.506 1.317l-6.984 7.981a1 1 0 0 1-1.55-.054l-3.016-3.982a1 1 0 0 1 1.594-1.208l2.275 3.003z"
-};
-const _delete = {
-  medium: "M12 24C5.373 24 0 18.627 0 12S5.373 0 12 0s12 5.373 12 12-5.373 12-12 12zm0-2c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10zm-5-9a1 1 0 0 1 0-2h10a1 1 0 0 1 0 2H7z"
-};
-const dismiss = {
-  small: "M8 6.586l3.293-3.293a1 1 0 0 1 1.414 1.414L9.414 8l3.293 3.293a1 1 0 0 1-1.414 1.414L8 9.414l-3.293 3.293a1 1 0 1 1-1.414-1.414L6.586 8 3.293 4.707a1 1 0 0 1 1.414-1.414L8 6.586z",
-  medium: "M12 10.586L7.706 6.293a1 1 0 1 0-1.413 1.413L10.586 12l-4.293 4.294a1 1 0 0 0 1.413 1.413L12 13.414l4.294 4.293a1 1 0 0 0 1.413-1.413L13.414 12l4.293-4.294a1 1 0 1 0-1.413-1.413L12 10.586z"
-};
-const hint = {
-  medium: "M10.835 15.993a1 1 0 0 1 1.008-.247 5.5 5.5 0 1 0-3.59-3.59 1 1 0 0 1-.246 1.009L6.172 15 9 17.828l1.835-1.835zm-.78 3.61a1.496 1.496 0 0 1-2.11 0l-3.548-3.549a1.496 1.496 0 0 1 0-2.108l1.787-1.787a7.5 7.5 0 1 1 5.657 5.657l-1.787 1.787zm-6.762.104a1 1 0 0 1 1.414-1.414l1 1a1 1 0 0 1-1.414 1.414l-1-1z"
-};
-const incorrect = {
-  medium: "M12 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414L13.414 12l3.293 3.293a1 1 0 0 1-1.414 1.414L12 13.414l-3.293 3.293a1 1 0 1 1-1.414-1.414L10.586 12 7.293 8.707a1 1 0 0 1 1.414-1.414L12 10.586zM12 24C5.373 24 0 18.627 0 12S5.373 0 12 0s12 5.373 12 12-5.373 12-12 12zm0-2c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"
-};
-const info = {
-  small: "M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zm0-2A6 6 0 1 0 8 2a6 6 0 0 0 0 12zM7 8a1 1 0 1 1 2 0v3a1 1 0 0 1-2 0V8zm1-2a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"
-};
-const search = {
-  small: "M11.172 9.757l2.535 2.536a1 1 0 0 1-1.414 1.414l-2.536-2.535a5 5 0 1 1 1.414-1.414zM7 10a3 3 0 1 0 0-6 3 3 0 0 0 0 6z",
-  medium: "M11 17a6 6 0 1 0 0-12 6 6 0 0 0 0 12zm6.32-1.094l3.387 3.387a1 1 0 0 1-1.414 1.414l-3.387-3.387a8 8 0 1 1 1.414-1.414z"
-};
-const sortableArrowDown = {
-  small: "M7 9.586V4a1 1 0 1 1 2 0v5.586l2.293-2.293a1 1 0 0 1 1.414 1.414l-4 4a1 1 0 0 1-1.414 0l-4-4a1 1 0 0 1 1.414-1.414L7 9.586z"
-};
-const sortableArrowUp = {
-  small: "M9 6.414l2.293 2.293a1 1 0 0 0 1.414-1.414l-4-4a1 1 0 0 0-1.414 0l-4 4a1 1 0 0 0 1.414 1.414L7 6.414V12a1 1 0 1 0 2 0V6.414z"
-};
-const zoomIn = {
-  medium: "M17.32 15.906l3.387 3.387a1 1 0 0 1-1.414 1.414l-3.387-3.387a8 8 0 1 1 1.414-1.414zM12 10h2a1 1 0 0 1 0 2h-2v2a1 1 0 0 1-2 0v-2H8a1 1 0 0 1 0-2h2V8a1 1 0 0 1 2 0v2zm-1 7a6 6 0 1 0 0-12 6 6 0 0 0 0 12z"
-};
-const zoomOut = {
-  medium: "M17.32 15.906l3.387 3.387a1 1 0 0 1-1.414 1.414l-3.387-3.387a8 8 0 1 1 1.414-1.414zM11 17a6 6 0 1 0 0-12 6 6 0 0 0 0 12zm-3-5a1 1 0 0 1 0-2h6a1 1 0 0 1 0 2H8z"
-};
-
-var iconAssets = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  add: add,
-  caretDown: caretDown,
-  caretLeft: caretLeft,
-  caretRight: caretRight,
-  caretUp: caretUp,
-  check: check,
-  contentArticle: contentArticle,
-  contentExercise: contentExercise,
-  contentVideo: contentVideo,
-  correct: correct,
-  'delete': _delete,
-  dismiss: dismiss,
-  hint: hint,
-  incorrect: incorrect,
-  info: info,
-  search: search,
-  sortableArrowDown: sortableArrowDown,
-  sortableArrowUp: sortableArrowUp,
-  zoomIn: zoomIn,
-  zoomOut: zoomOut
-});
 
 const _excluded = ["color", "icon", "size", "style", "testId", "className"];
 const StyledIcon = addStyle("span");
@@ -209,29 +51,43 @@ const PhosphorIcon = React.forwardRef(function PhosphorIcon(props, ref) {
     sharedProps = _objectWithoutPropertiesLoose(props, _excluded);
   const pixelSize = viewportPixelsForSize(size);
   const classNames = `${className != null ? className : ""}`;
+  const iconStyles = _generateStyles(color, pixelSize);
   return React.createElement(StyledIcon, _extends({}, sharedProps, {
     className: classNames,
-    style: [styles.svg, {
-      maskImage: `url(${icon})`,
-      maskSize: "100%",
-      maskRepeat: "no-repeat",
-      maskPosition: "center",
-      backgroundColor: color,
-      width: pixelSize,
-      height: pixelSize
+    style: [styles.svg, iconStyles.icon, {
+      maskImage: `url(${icon})`
     }, style],
     "data-test-id": testId,
     ref: ref
   }));
 });
+const dynamicStyles = {};
+const _generateStyles = (color, size) => {
+  const iconStyle = `${color}-${size}`;
+  if (styles[iconStyle]) {
+    return styles[iconStyle];
+  }
+  const newStyles = {
+    icon: {
+      backgroundColor: color,
+      width: size,
+      height: size
+    }
+  };
+  dynamicStyles[iconStyle] = StyleSheet.create(newStyles);
+  return dynamicStyles[iconStyle];
+};
 const styles = StyleSheet.create({
   svg: {
     display: "inline-block",
     verticalAlign: "text-bottom",
     flexShrink: 0,
-    flexGrow: 0
+    flexGrow: 0,
+    maskSize: "100%",
+    maskRepeat: "no-repeat",
+    maskPosition: "center"
   }
 });
 PhosphorIcon.displayName = "PhosphorIcon";
 
-export { PhosphorIcon, Icon as default, iconAssets as icons };
+export { PhosphorIcon };

package/dist/index.d.ts

@@ -1,7 +1,2 @@
-import Icon from "./components/icon";
-import type { IconAsset, IconSize } from "./util/icon-assets";
-export * as icons from "./util/icon-assets";
 export { PhosphorIcon } from "./components/phosphor-icon";
-export type { PhosphorIconAsset, PhosphorIconMedium, PhosphorIconSmall, } from "./types";
-export type { IconAsset, IconSize };
-export default Icon;
+export type { IconSize, PhosphorIconAsset } from "./types";

package/dist/index.js

@@ -60,164 +60,6 @@ const viewportPixelsForSize = size => ({
   large: 48,
   xlarge: 96
 })[size];
-const getPathForIcon = (icon, size) => {
-  if (typeof icon[size] === "number") {
-    return {
-      assetSize: size,
-      path: icon[size]
-    };
-  } else {
-    const desiredPixelSize = viewportPixelsForSize(size);
-    const availableSizes = Object.keys(icon);
-    const sortFn = availableSize => {
-      const availablePixelSize = viewportPixelsForSize(availableSize);
-      const tooLargeByPixels = availablePixelSize - desiredPixelSize;
-      return tooLargeByPixels > 0 ? Number.POSITIVE_INFINITY : Math.abs(tooLargeByPixels);
-    };
-    const assetSizes = availableSizes.sort((a, b) => sortFn(a) - sortFn(b));
-    const bestAssetSize = assetSizes[0];
-    if (bestAssetSize && icon[bestAssetSize]) {
-      return {
-        assetSize: bestAssetSize,
-        path: icon[bestAssetSize]
-      };
-    } else {
-      throw new Error("Icon does not contain any valid asset sizes!");
-    }
-  }
-};
-
-const _excluded$1 = ["color", "icon", "size", "style", "testId"];
-const StyledSVG = wonderBlocksCore.addStyle("svg");
-const Icon = React__namespace.forwardRef(function Icon(props, ref) {
-  const {
-      color = "currentColor",
-      icon,
-      size = "small",
-      style,
-      testId
-    } = props,
-    sharedProps = _objectWithoutPropertiesLoose(props, _excluded$1);
-  const {
-    assetSize,
-    path
-  } = getPathForIcon(icon, size);
-  const pixelSize = viewportPixelsForSize(size);
-  const viewboxPixelSize = viewportPixelsForSize(assetSize);
-  return React__namespace.createElement(StyledSVG, _extends({}, sharedProps, {
-    style: [styles$1.svg, style],
-    width: pixelSize,
-    height: pixelSize,
-    viewBox: `0 0 ${viewboxPixelSize} ${viewboxPixelSize}`,
-    "data-test-id": testId,
-    ref: ref
-  }), React__namespace.createElement("path", {
-    fill: color,
-    d: path
-  }));
-});
-const styles$1 = aphrodite.StyleSheet.create({
-  svg: {
-    display: "inline-block",
-    verticalAlign: "text-bottom",
-    flexShrink: 0,
-    flexGrow: 0
-  }
-});
-
-const add = {
-  medium: "M11 11V7a1 1 0 0 1 2 0v4h4a1 1 0 0 1 0 2h-4v4a1 1 0 0 1-2 0v-4H7a1 1 0 0 1 0-2h4zm1 13C5.373 24 0 18.627 0 12S5.373 0 12 0s12 5.373 12 12-5.373 12-12 12zm0-2c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"
-};
-const caretDown = {
-  small: "M8 8.586l3.293-3.293a1 1 0 0 1 1.414 1.414l-4 4a1 1 0 0 1-1.414 0l-4-4a1 1 0 0 1 1.414-1.414L8 8.586z",
-  medium: "M17.293 8.293a1 1 0 0 1 1.414 1.414l-6 6a1 1 0 0 1-1.414 0l-6-6a1 1 0 0 1 1.414-1.414L12 13.586l5.293-5.293z"
-};
-const caretLeft = {
-  small: "M7.414 8l3.293 3.293a1 1 0 0 1-1.414 1.414l-4-4a1 1 0 0 1 0-1.414l4-4a1 1 0 0 1 1.414 1.414L7.414 8z",
-  medium: "M15.707 17.293a1 1 0 0 1-1.414 1.414l-6-6a1 1 0 0 1 0-1.414l6-6a1 1 0 0 1 1.414 1.414L10.414 12l5.293 5.293z"
-};
-const caretRight = {
-  small: "M8.586 8L5.293 4.707a1 1 0 0 1 1.414-1.414l4 4a1 1 0 0 1 0 1.414l-4 4a1 1 0 0 1-1.414-1.414L8.586 8z",
-  medium: "M8.293 17.293a1 1 0 0 0 1.414 1.414l6-6a1 1 0 0 0 0-1.414l-6-6a1 1 0 0 0-1.414 1.414L13.586 12l-5.293 5.293z"
-};
-const caretUp = {
-  small: "M8 7.414l-3.293 3.293a1 1 0 0 1-1.414-1.414l4-4a1 1 0 0 1 1.414 0l4 4a1 1 0 0 1-1.414 1.414L8 7.414z",
-  medium: "M17.293 15.707a1 1 0 0 0 1.414-1.414l-6-6a1 1 0 0 0-1.414 0l-6 6a1 1 0 0 0 1.414 1.414L12 10.414l5.293 5.293z"
-};
-const check = {
-  small: "M6.072 10.4l6.175-7.058a1 1 0 1 1 1.506 1.317L6.769 12.64a1 1 0 0 1-1.55-.054L2.203 8.604a1 1 0 1 1 1.594-1.208L6.072 10.4z"
-};
-const contentArticle = {
-  small: "M11 12V8h2v5a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h3v2H5v8h6zM9.5 6a.5.5 0 0 1-.5-.5V2l4 4H9.5z",
-  medium: "M12 24C5.373 24 0 18.627 0 12S5.373 0 12 0s12 5.373 12 12-5.373 12-12 12zm0-2c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10zm3-6v-4h2v5a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h3v2H9v8h6zm-1.5-6a.5.5 0 0 1-.5-.5V6l4 4h-3.5z"
-};
-const contentExercise = {
-  small: "M7.5 6.914L5 9.414V11h1.586l2.5-2.5L7.5 6.914zM8.914 5.5L10.5 7.086 11.586 6 10 4.414 8.914 5.5zM3 9a1 1 0 0 1 .293-.707l6-6a1 1 0 0 1 1.414 0l3 3a1 1 0 0 1 0 1.414l-6 6A1 1 0 0 1 7 13H4a1 1 0 0 1-1-1V9z",
-  medium: "M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10zm-.5-11.086l1.586 1.586-2.5 2.5H9v-1.586l2.5-2.5zM12.914 9.5L14 8.414 15.586 10 14.5 11.086 12.914 9.5zM12 24C5.373 24 0 18.627 0 12S5.373 0 12 0s12 5.373 12 12-5.373 12-12 12zM7 13v3a1 1 0 0 0 1 1h3a1 1 0 0 0 .707-.293l6-6a1 1 0 0 0 0-1.414l-3-3a1 1 0 0 0-1.414 0l-6 6A1 1 0 0 0 7 13z"
-};
-const contentVideo = {
-  small: "M6 5.87v4.263l3.197-2.131L6 5.87zm-.445-2.7l6 4a1 1 0 0 1 0 1.664l-6 4A1 1 0 0 1 4 12.002v-8a1 1 0 0 1 1.555-.832z",
-  medium: "M12 24C5.373 24 0 18.627 0 12S5.373 0 12 0s12 5.373 12 12-5.373 12-12 12zm0-2c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10zM10.555 7.17l6 4a1 1 0 0 1 0 1.664l-6 4A1 1 0 0 1 9 16.002v-8a1 1 0 0 1 1.555-.832zM11 14.133l3.197-2.131L11 9.87v4.263z"
-};
-const correct = {
-  medium: "M12 24C5.373 24 0 18.627 0 12S5.373 0 12 0s12 5.373 12 12-5.373 12-12 12zm0-2c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10zm-1.928-7.6l6.175-7.058a1 1 0 1 1 1.506 1.317l-6.984 7.981a1 1 0 0 1-1.55-.054l-3.016-3.982a1 1 0 0 1 1.594-1.208l2.275 3.003z"
-};
-const _delete = {
-  medium: "M12 24C5.373 24 0 18.627 0 12S5.373 0 12 0s12 5.373 12 12-5.373 12-12 12zm0-2c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10zm-5-9a1 1 0 0 1 0-2h10a1 1 0 0 1 0 2H7z"
-};
-const dismiss = {
-  small: "M8 6.586l3.293-3.293a1 1 0 0 1 1.414 1.414L9.414 8l3.293 3.293a1 1 0 0 1-1.414 1.414L8 9.414l-3.293 3.293a1 1 0 1 1-1.414-1.414L6.586 8 3.293 4.707a1 1 0 0 1 1.414-1.414L8 6.586z",
-  medium: "M12 10.586L7.706 6.293a1 1 0 1 0-1.413 1.413L10.586 12l-4.293 4.294a1 1 0 0 0 1.413 1.413L12 13.414l4.294 4.293a1 1 0 0 0 1.413-1.413L13.414 12l4.293-4.294a1 1 0 1 0-1.413-1.413L12 10.586z"
-};
-const hint = {
-  medium: "M10.835 15.993a1 1 0 0 1 1.008-.247 5.5 5.5 0 1 0-3.59-3.59 1 1 0 0 1-.246 1.009L6.172 15 9 17.828l1.835-1.835zm-.78 3.61a1.496 1.496 0 0 1-2.11 0l-3.548-3.549a1.496 1.496 0 0 1 0-2.108l1.787-1.787a7.5 7.5 0 1 1 5.657 5.657l-1.787 1.787zm-6.762.104a1 1 0 0 1 1.414-1.414l1 1a1 1 0 0 1-1.414 1.414l-1-1z"
-};
-const incorrect = {
-  medium: "M12 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414L13.414 12l3.293 3.293a1 1 0 0 1-1.414 1.414L12 13.414l-3.293 3.293a1 1 0 1 1-1.414-1.414L10.586 12 7.293 8.707a1 1 0 0 1 1.414-1.414L12 10.586zM12 24C5.373 24 0 18.627 0 12S5.373 0 12 0s12 5.373 12 12-5.373 12-12 12zm0-2c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"
-};
-const info = {
-  small: "M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zm0-2A6 6 0 1 0 8 2a6 6 0 0 0 0 12zM7 8a1 1 0 1 1 2 0v3a1 1 0 0 1-2 0V8zm1-2a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"
-};
-const search = {
-  small: "M11.172 9.757l2.535 2.536a1 1 0 0 1-1.414 1.414l-2.536-2.535a5 5 0 1 1 1.414-1.414zM7 10a3 3 0 1 0 0-6 3 3 0 0 0 0 6z",
-  medium: "M11 17a6 6 0 1 0 0-12 6 6 0 0 0 0 12zm6.32-1.094l3.387 3.387a1 1 0 0 1-1.414 1.414l-3.387-3.387a8 8 0 1 1 1.414-1.414z"
-};
-const sortableArrowDown = {
-  small: "M7 9.586V4a1 1 0 1 1 2 0v5.586l2.293-2.293a1 1 0 0 1 1.414 1.414l-4 4a1 1 0 0 1-1.414 0l-4-4a1 1 0 0 1 1.414-1.414L7 9.586z"
-};
-const sortableArrowUp = {
-  small: "M9 6.414l2.293 2.293a1 1 0 0 0 1.414-1.414l-4-4a1 1 0 0 0-1.414 0l-4 4a1 1 0 0 0 1.414 1.414L7 6.414V12a1 1 0 1 0 2 0V6.414z"
-};
-const zoomIn = {
-  medium: "M17.32 15.906l3.387 3.387a1 1 0 0 1-1.414 1.414l-3.387-3.387a8 8 0 1 1 1.414-1.414zM12 10h2a1 1 0 0 1 0 2h-2v2a1 1 0 0 1-2 0v-2H8a1 1 0 0 1 0-2h2V8a1 1 0 0 1 2 0v2zm-1 7a6 6 0 1 0 0-12 6 6 0 0 0 0 12z"
-};
-const zoomOut = {
-  medium: "M17.32 15.906l3.387 3.387a1 1 0 0 1-1.414 1.414l-3.387-3.387a8 8 0 1 1 1.414-1.414zM11 17a6 6 0 1 0 0-12 6 6 0 0 0 0 12zm-3-5a1 1 0 0 1 0-2h6a1 1 0 0 1 0 2H8z"
-};
-
-var iconAssets = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  add: add,
-  caretDown: caretDown,
-  caretLeft: caretLeft,
-  caretRight: caretRight,
-  caretUp: caretUp,
-  check: check,
-  contentArticle: contentArticle,
-  contentExercise: contentExercise,
-  contentVideo: contentVideo,
-  correct: correct,
-  'delete': _delete,
-  dismiss: dismiss,
-  hint: hint,
-  incorrect: incorrect,
-  info: info,
-  search: search,
-  sortableArrowDown: sortableArrowDown,
-  sortableArrowUp: sortableArrowUp,
-  zoomIn: zoomIn,
-  zoomOut: zoomOut
-});
 
 const _excluded = ["color", "icon", "size", "style", "testId", "className"];
 const StyledIcon = wonderBlocksCore.addStyle("span");
@@ -233,31 +75,43 @@ const PhosphorIcon = React__namespace.forwardRef(function PhosphorIcon(props, re
     sharedProps = _objectWithoutPropertiesLoose(props, _excluded);
   const pixelSize = viewportPixelsForSize(size);
   const classNames = `${className != null ? className : ""}`;
+  const iconStyles = _generateStyles(color, pixelSize);
   return React__namespace.createElement(StyledIcon, _extends({}, sharedProps, {
     className: classNames,
-    style: [styles.svg, {
-      maskImage: `url(${icon})`,
-      maskSize: "100%",
-      maskRepeat: "no-repeat",
-      maskPosition: "center",
-      backgroundColor: color,
-      width: pixelSize,
-      height: pixelSize
+    style: [styles.svg, iconStyles.icon, {
+      maskImage: `url(${icon})`
     }, style],
     "data-test-id": testId,
     ref: ref
   }));
 });
+const dynamicStyles = {};
+const _generateStyles = (color, size) => {
+  const iconStyle = `${color}-${size}`;
+  if (styles[iconStyle]) {
+    return styles[iconStyle];
+  }
+  const newStyles = {
+    icon: {
+      backgroundColor: color,
+      width: size,
+      height: size
+    }
+  };
+  dynamicStyles[iconStyle] = aphrodite.StyleSheet.create(newStyles);
+  return dynamicStyles[iconStyle];
+};
 const styles = aphrodite.StyleSheet.create({
   svg: {
     display: "inline-block",
     verticalAlign: "text-bottom",
     flexShrink: 0,
-    flexGrow: 0
+    flexGrow: 0,
+    maskSize: "100%",
+    maskRepeat: "no-repeat",
+    maskPosition: "center"
   }
 });
 PhosphorIcon.displayName = "PhosphorIcon";
 
 exports.PhosphorIcon = PhosphorIcon;
-exports["default"] = Icon;
-exports.icons = iconAssets;

package/dist/types.d.ts

@@ -3,10 +3,6 @@
  */
 export type PhosphorIconAsset = PhosphorRegular | PhosphorBold | PhosphorFill;
 /**
- * The different icon weights for small icons.
- */
-export type PhosphorIconSmall = PhosphorBold | PhosphorFill;
-/**
- * The different icon weights for medium icons.
+ * All the possible icon weights.
  */
-export type PhosphorIconMedium = PhosphorRegular | PhosphorFill;
+export type IconSize = "small" | "medium" | "large" | "xlarge";

package/dist/util/icon-util.d.ts

@@ -1,21 +1,6 @@
-import type { IconAsset, IconSize } from "./icon-assets";
+import { IconSize } from "../types";
 /**
  * A simple function that tells us how many viewport pixels each icon size
  * corresponds to.
  */
 export declare const viewportPixelsForSize: (size: IconSize) => number;
-/**
- * A utility to find the right asset from an IconAsset to display in an icon
- * at a given IconSize. We're looking for, in the following order:
- *   1. The path for the IconSize (e.g. small, medium) requested
- *   2. A path that's _smaller_ than the size we requested
- *   3. Any path (what remains is one for a larger IconSize)
- *
- * The goal here is to provide a path that looks good at the given size...
- * obviously, if the size that we want is provided, we'll use it. Otherwise we'd
- * rather blow up a smaller, simpler icon than scrunch down a more complex one.
- */
-export declare const getPathForIcon: (icon: IconAsset, size: IconSize) => {
-    assetSize: IconSize;
-    path: string;
-};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-icon",
-  "version": "2.2.1",
+  "version": "4.0.0",
   "design": "v1",
   "publishConfig": {
     "access": "public"

package/src/components/__tests__/custom-icon-mock.svg

@@ -0,0 +1 @@
+<svg>this is a custom svg</svg>

package/src/components/__tests__/phosphor-icon.test.tsx

@@ -3,6 +3,8 @@ import {render, screen} from "@testing-library/react";
 
 import Plus from "@phosphor-icons/core/regular/plus.svg";
 import PlusBold from "@phosphor-icons/core/bold/plus-bold.svg";
+// mock out the custom icon
+import customIcon from "./custom-icon-mock.svg";
 
 import {PhosphorIcon} from "../phosphor-icon";
 import * as utils from "../../util/icon-util";
@@ -91,7 +93,7 @@ describe("PhosphorIcon", () => {
     it("applies style prop", async () => {
         // Arrange
         const expectedStyle = {
-            display: "none",
+            width: 30,
         } as const;
 
         // Act
@@ -104,9 +106,7 @@ describe("PhosphorIcon", () => {
         );
 
         // Assert
-        expect(screen.getByTestId("phosphor-icon")).toHaveStyle(
-            "display: none;",
-        );
+        expect(screen.getByTestId("phosphor-icon")).toHaveStyle("width: 30px");
     });
 
     it("includes SVG using the maskImage css attribute", async () => {
@@ -120,4 +120,16 @@ describe("PhosphorIcon", () => {
             `mask-image: url(${Plus});`,
         );
     });
+
+    it("allows importing an arbitrary SVG file (custom icon)", async () => {
+        // Arrange
+
+        // Act
+        render(<PhosphorIcon icon={customIcon} testId="phosphor-icon" />);
+
+        // Assert
+        expect(screen.getByTestId("phosphor-icon")).toHaveStyle(
+            `mask-image: url(${customIcon});`,
+        );
+    });
 });