@khanacademy/wonder-blocks-icon - npm Package Compare versions

Comparing version 1.0.6 to 1.0.7

components/icon.md

@@ -13,10 +13,10 @@ A minimal `Icon` usage:
 ```jsx
-
+const {View} = require("@khanacademy/wonder-blocks-core");
 const {default: Icon, icons} = require("@khanacademy/wonder-blocks-icon");
 
-<div>
+<View>
     {["small", "medium", "large", "xlarge"].map(size =>
         <Icon key={size} size={size} icon={icons.search} />
     )}
-</div>
+</View>
 ```
@@ -28,6 +28,7 @@
 
+const {View} = require("@khanacademy/wonder-blocks-core");
 const {default: Icon, icons} = require("@khanacademy/wonder-blocks-icon");
 const Color = require("@khanacademy/wonder-blocks-color").default;
 
-<div>
+<View>
     Here is an icon inline:
@@ -41,4 +42,4 @@ <Icon
     It has color, too.
-</div>
+</View>
 
 ```

dist/es/index.js

@@ -5,2 +5,17 @@ import React from 'react';
 
+function _defineProperty(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+
+  return obj;
+}
+
 /**
@@ -11,8 +26,7 @@ * A simple function that tells us how many viewport pixels each icon size
 const viewportPixelsForSize = size => ({
-    small: 16,
-    medium: 24,
-    large: 48,
-    xlarge: 96
+  small: 16,
+  medium: 24,
+  large: 48,
+  xlarge: 96
 })[size];
-
 /**
@@ -31,28 +45,36 @@ * A utility to find the right asset from an IconAsset to display in an icon
 const getPathForIcon = (icon, size) => {
-    if (icon[size]) {
-        // Great, we have the IconSize we actually requested
-        return { assetSize: size, path: icon[size] };
+  if (icon[size]) {
+    // Great, we have the IconSize we actually requested
+    return {
+      assetSize: size,
+      path: icon[size]
+    };
+  } else {
+    // Oh, no, we don't have the right IconSize! Let's find the next best
+    // one...we prefer to find a smaller icon and blow it up instead of
+    // using a larger icon and shrinking it such that detail may be lost.
+    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 {
-        // Oh, no, we don't have the right IconSize! Let's find the next best
-        // one...we prefer to find a smaller icon and blow it up instead of
-        // using a larger icon and shrinking it such that detail may be lost.
-        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!");
-        }
+      throw new Error("Icon does not contain any valid asset sizes!");
     }
+  }
 };
 
 const StyledSVG = addStyle("svg");
-
 /**
@@ -93,39 +115,47 @@ * An Icon displays a small informational or decorative image as an SVG.
  */
+
 class Icon extends React.PureComponent {
+  render() {
+    // There is a weird thing where Flow will only recognize a string-quoted
+    // prop name if it's in single quotes, but our tooling normalizes it to
+    // double-quotes on commit. So the aria-label prop isn't included in
+    // props validation.
+    // eslint-disable-next-line react/prop-types
+    const ariaLabel = this.props["aria-label"];
+    const _this$props = this.props,
+          color = _this$props.color,
+          icon = _this$props.icon,
+          size = _this$props.size,
+          style = _this$props.style;
 
-    render() {
-        // There is a weird thing where Flow will only recognize a string-quoted
-        // prop name if it's in single quotes, but our tooling normalizes it to
-        // double-quotes on commit. So the aria-label prop isn't included in
-        // props validation.
-        // eslint-disable-next-line react/prop-types
-        const { "aria-label": ariaLabel } = this.props;
-        const { color, icon, size, style } = this.props;
+    const _getPathForIcon = getPathForIcon(icon, size),
+          assetSize = _getPathForIcon.assetSize,
+          path = _getPathForIcon.path;
 
-        const { assetSize, path } = getPathForIcon(icon, size);
-        const pixelSize = viewportPixelsForSize(size);
-        const viewboxPixelSize = viewportPixelsForSize(assetSize);
-        return React.createElement(
-            StyledSVG,
-            {
-                style: [styles.svg, style],
-                width: pixelSize,
-                height: pixelSize,
-                "aria-label": ariaLabel,
-                viewBox: `0 0 ${viewboxPixelSize} ${viewboxPixelSize}`
-            },
-            React.createElement("path", { fill: color, d: path })
-        );
-    }
+    const pixelSize = viewportPixelsForSize(size);
+    const viewboxPixelSize = viewportPixelsForSize(assetSize);
+    return React.createElement(StyledSVG, {
+      style: [styles.svg, style],
+      width: pixelSize,
+      height: pixelSize,
+      "aria-label": ariaLabel,
+      viewBox: `0 0 ${viewboxPixelSize} ${viewboxPixelSize}`
+    }, React.createElement("path", {
+      fill: color,
+      d: path
+    }));
+  }
+
 }
 
-Icon.defaultProps = {
-    color: "currentColor",
-    size: "small"
-};
+_defineProperty(Icon, "defaultProps", {
+  color: "currentColor",
+  size: "small"
+});
+
 const styles = StyleSheet.create({
-    svg: {
-        display: "inline-block",
-        verticalAlign: "text-bottom"
-    }
+  svg: {
+    display: "inline-block",
+    verticalAlign: "text-bottom"
+  }
 });
@@ -136,73 +166,72 @@
  */
-
 var iconAssets = {
-    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"
-    },
-    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"
-    },
-    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"
-    },
-    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"
-    },
-    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"
-    },
-    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"
-    },
-    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"
-    },
-    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"
-    },
-    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"
-    },
-    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"
-    },
-    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"
-    },
-    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"
-    },
-    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"
-    },
-    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"
-    },
-    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"
-    },
-    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"
-    },
-    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"
-    },
-    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"
-    },
-    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"
-    },
-    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"
-    }
+  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"
+  },
+  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"
+  },
+  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"
+  },
+  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"
+  },
+  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"
+  },
+  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"
+  },
+  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"
+  },
+  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"
+  },
+  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"
+  },
+  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"
+  },
+  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"
+  },
+  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"
+  },
+  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"
+  },
+  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"
+  },
+  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"
+  },
+  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"
+  },
+  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"
+  },
+  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"
+  },
+  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"
+  },
+  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"
+  }
 };
@@ -209,0 +238,0 @@

dist/index.js

@@ -85,3 +85,3 @@ module.exports =
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 6);
+/******/ 	return __webpack_require__(__webpack_require__.s = 3);
 /******/ })
@@ -91,99 +91,36 @@ /************************************************************************/
 /* 0 */
-/***/ (function(module, exports, __webpack_require__) {
+/***/ (function(module, exports) {
 
-"use strict";
+module.exports = require("react");
 
+/***/ }),
+/* 1 */
+/***/ (function(module, exports) {
 
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
+module.exports = require("@khanacademy/wonder-blocks-core");
 
-/**
- * The source SVG paths for our icons at various sizes
- */
+/***/ }),
+/* 2 */
+/***/ (function(module, exports) {
 
-exports.default = {
-    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"
-    },
-    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"
-    },
-    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"
-    },
-    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"
-    },
-    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"
-    },
-    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"
-    },
-    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"
-    },
-    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"
-    },
-    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"
-    },
-    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"
-    },
-    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"
-    },
-    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"
-    },
-    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"
-    },
-    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"
-    },
-    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"
-    },
-    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"
-    },
-    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"
-    },
-    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"
-    },
-    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"
-    },
-    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"
-    }
-};
+module.exports = require("aphrodite");
 
 /***/ }),
-/* 1 */
-/***/ (function(module, exports, __webpack_require__) {
+/* 3 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
+__webpack_require__.r(__webpack_exports__);
 
+// EXTERNAL MODULE: external "react"
+var external_react_ = __webpack_require__(0);
+var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_);
 
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
+// EXTERNAL MODULE: external "aphrodite"
+var external_aphrodite_ = __webpack_require__(2);
 
+// EXTERNAL MODULE: external "@khanacademy/wonder-blocks-core"
+var wonder_blocks_core_ = __webpack_require__(1);
 
+// CONCATENATED MODULE: ./packages/wonder-blocks-icon/util/icon-util.js
 /**
@@ -193,11 +130,8 @@ * A simple function that tells us how many viewport pixels each icon size
  */
-var viewportPixelsForSize = exports.viewportPixelsForSize = function viewportPixelsForSize(size) {
-    return {
-        small: 16,
-        medium: 24,
-        large: 48,
-        xlarge: 96
-    }[size];
-};
-
+const viewportPixelsForSize = size => ({
+  small: 16,
+  medium: 24,
+  large: 48,
+  xlarge: 96
+})[size];
 /**
@@ -215,80 +149,43 @@ * A utility to find the right asset from an IconAsset to display in an icon
 
-var getPathForIcon = exports.getPathForIcon = function getPathForIcon(icon, size) {
-    if (icon[size]) {
-        // Great, we have the IconSize we actually requested
-        return { assetSize: size, path: icon[size] };
+const getPathForIcon = (icon, size) => {
+  if (icon[size]) {
+    // Great, we have the IconSize we actually requested
+    return {
+      assetSize: size,
+      path: icon[size]
+    };
+  } else {
+    // Oh, no, we don't have the right IconSize! Let's find the next best
+    // one...we prefer to find a smaller icon and blow it up instead of
+    // using a larger icon and shrinking it such that detail may be lost.
+    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 {
-        // Oh, no, we don't have the right IconSize! Let's find the next best
-        // one...we prefer to find a smaller icon and blow it up instead of
-        // using a larger icon and shrinking it such that detail may be lost.
-        var desiredPixelSize = viewportPixelsForSize(size);
-        var availableSizes = Object.keys(icon);
-        var sortFn = function sortFn(availableSize) {
-            var availablePixelSize = viewportPixelsForSize(availableSize);
-            var tooLargeByPixels = availablePixelSize - desiredPixelSize;
-            return tooLargeByPixels > 0 ? Number.POSITIVE_INFINITY : Math.abs(tooLargeByPixels);
-        };
-        var assetSizes = availableSizes.sort(function (a, b) {
-            return sortFn(a) - sortFn(b);
-        });
-        var 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!");
-        }
+      throw new Error("Icon does not contain any valid asset sizes!");
     }
+  }
 };
+// CONCATENATED MODULE: ./packages/wonder-blocks-icon/components/icon.js
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-/***/ }),
-/* 2 */
-/***/ (function(module, exports) {
 
-module.exports = require("@khanacademy/wonder-blocks-core");
 
-/***/ }),
-/* 3 */
-/***/ (function(module, exports) {
 
-module.exports = require("aphrodite");
 
-/***/ }),
-/* 4 */
-/***/ (function(module, exports) {
-
-module.exports = require("react");
-
-/***/ }),
-/* 5 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _react = __webpack_require__(4);
-
-var _react2 = _interopRequireDefault(_react);
-
-var _aphrodite = __webpack_require__(3);
-
-var _wonderBlocksCore = __webpack_require__(2);
-
-var _iconUtil = __webpack_require__(1);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var StyledSVG = (0, _wonderBlocksCore.addStyle)("svg");
-
+const StyledSVG = Object(wonder_blocks_core_["addStyle"])("svg");
 /**
@@ -330,89 +227,130 @@ * An Icon displays a small informational or decorative image as an SVG.
 
-var Icon = function (_React$PureComponent) {
-    _inherits(Icon, _React$PureComponent);
+class icon_Icon extends external_react_default.a.PureComponent {
+  render() {
+    // There is a weird thing where Flow will only recognize a string-quoted
+    // prop name if it's in single quotes, but our tooling normalizes it to
+    // double-quotes on commit. So the aria-label prop isn't included in
+    // props validation.
+    // eslint-disable-next-line react/prop-types
+    const ariaLabel = this.props["aria-label"];
+    const _this$props = this.props,
+          color = _this$props.color,
+          icon = _this$props.icon,
+          size = _this$props.size,
+          style = _this$props.style;
 
-    function Icon() {
-        _classCallCheck(this, Icon);
+    const _getPathForIcon = getPathForIcon(icon, size),
+          assetSize = _getPathForIcon.assetSize,
+          path = _getPathForIcon.path;
 
-        return _possibleConstructorReturn(this, (Icon.__proto__ || Object.getPrototypeOf(Icon)).apply(this, arguments));
-    }
+    const pixelSize = viewportPixelsForSize(size);
+    const viewboxPixelSize = viewportPixelsForSize(assetSize);
+    return external_react_default.a.createElement(StyledSVG, {
+      style: [styles.svg, style],
+      width: pixelSize,
+      height: pixelSize,
+      "aria-label": ariaLabel,
+      viewBox: `0 0 ${viewboxPixelSize} ${viewboxPixelSize}`
+    }, external_react_default.a.createElement("path", {
+      fill: color,
+      d: path
+    }));
+  }
 
-    _createClass(Icon, [{
-        key: "render",
-        value: function render() {
-            // There is a weird thing where Flow will only recognize a string-quoted
-            // prop name if it's in single quotes, but our tooling normalizes it to
-            // double-quotes on commit. So the aria-label prop isn't included in
-            // props validation.
-            // eslint-disable-next-line react/prop-types
-            var ariaLabel = this.props["aria-label"];
-            var _props = this.props,
-                color = _props.color,
-                icon = _props.icon,
-                size = _props.size,
-                style = _props.style;
+}
 
-            var _getPathForIcon = (0, _iconUtil.getPathForIcon)(icon, size),
-                assetSize = _getPathForIcon.assetSize,
-                path = _getPathForIcon.path;
-
-            var pixelSize = (0, _iconUtil.viewportPixelsForSize)(size);
-            var viewboxPixelSize = (0, _iconUtil.viewportPixelsForSize)(assetSize);
-            return _react2.default.createElement(
-                StyledSVG,
-                {
-                    style: [styles.svg, style],
-                    width: pixelSize,
-                    height: pixelSize,
-                    "aria-label": ariaLabel,
-                    viewBox: "0 0 " + viewboxPixelSize + " " + viewboxPixelSize
-                },
-                _react2.default.createElement("path", { fill: color, d: path })
-            );
-        }
-    }]);
-
-    return Icon;
-}(_react2.default.PureComponent);
-
-Icon.defaultProps = {
-    color: "currentColor",
-    size: "small"
-};
-exports.default = Icon;
-
-
-var styles = _aphrodite.StyleSheet.create({
-    svg: {
-        display: "inline-block",
-        verticalAlign: "text-bottom"
-    }
+_defineProperty(icon_Icon, "defaultProps", {
+  color: "currentColor",
+  size: "small"
 });
 
-/***/ }),
-/* 6 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
+const styles = external_aphrodite_["StyleSheet"].create({
+  svg: {
+    display: "inline-block",
+    verticalAlign: "text-bottom"
+  }
 });
-exports.icons = undefined;
+// CONCATENATED MODULE: ./packages/wonder-blocks-icon/util/icon-assets.js
+/**
+ * The source SVG paths for our icons at various sizes
+ */
+/* harmony default export */ var icon_assets = ({
+  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"
+  },
+  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"
+  },
+  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"
+  },
+  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"
+  },
+  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"
+  },
+  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"
+  },
+  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"
+  },
+  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"
+  },
+  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"
+  },
+  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"
+  },
+  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"
+  },
+  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"
+  },
+  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"
+  },
+  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"
+  },
+  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"
+  },
+  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"
+  },
+  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"
+  },
+  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"
+  },
+  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"
+  },
+  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"
+  }
+});
+// CONCATENATED MODULE: ./packages/wonder-blocks-icon/index.js
+/* concated harmony reexport */__webpack_require__.d(__webpack_exports__, "icons", function() { return icon_assets; });
 
-var _icon = __webpack_require__(5);
 
-var _icon2 = _interopRequireDefault(_icon);
 
-var _iconAssets = __webpack_require__(0);
+/* harmony default export */ var wonder_blocks_icon = __webpack_exports__["default"] = (icon_Icon);
 
-var _iconAssets2 = _interopRequireDefault(_iconAssets);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-exports.icons = _iconAssets2.default;
-exports.default = _icon2.default;
-
 /***/ })
 /******/ ]);

generated-snapshot.test.js

@@ -119,2 +119,3 @@ // This file is auto-generated by gen-snapshot-tests.js
     it("example 3", () => {
+        const {View} = require("@khanacademy/wonder-blocks-core");
         const {
@@ -126,7 +127,7 @@ default: Icon,
         const example = (
-            <div>
+            <View>
                 {["small", "medium", "large", "xlarge"].map((size) => (
                     <Icon key={size} size={size} icon={icons.search} />
                 ))}
-            </div>
+            </View>
         );
@@ -137,2 +138,3 @@ const tree = renderer.create(example).toJSON();
     it("example 4", () => {
+        const {View} = require("@khanacademy/wonder-blocks-core");
         const {
@@ -145,3 +147,3 @@ default: Icon,
         const example = (
-            <div>
+            <View>
                 Here is an icon inline:
@@ -155,3 +157,3 @@ <Icon
                 It has color, too.
-            </div>
+            </View>
         );
@@ -158,0 +160,0 @@

index.test.js

 // @flow
-import {
-    getPathForIcon,
-    viewportPixelsForSize,
-} from "@khanacademy/wonder-blocks-icon/util/icon-util.js";
+describe("@khanacademy/wonder-blocks-icon", () => {
+    test("package exports default", async () => {
+        // Arrange
+        const importedModule = import("./index.js");
 
-import type {IconSize} from "@khanacademy/wonder-blocks-icon/util/icon-assets.js";
+        // Act
+        const result = await importedModule;
 
-const SIZES = ["small", "medium", "large", "xlarge"];
-
-const DUMMY_ICON_MEDIUM_ONLY = {
-    medium: "[MEDIUM SVG PATH]",
-};
-
-const DUMMY_ICON_WITH_EVERYTHING_ON_IT = {
-    small: "[SMALL SVG PATH]",
-    medium: "[MEDIUM SVG PATH]",
-    large: "[LARGE SVG PATH]",
-    xlarge: "[XLARGE SVG PATH]",
-};
-
-describe("getPathForIcon", () => {
-    test("return the path for the correct size, if available", () => {
-        SIZES.forEach((size) => {
-            const {path, assetSize} = getPathForIcon(
-                DUMMY_ICON_WITH_EVERYTHING_ON_IT,
-                size,
-            );
-            expect(
-                path === DUMMY_ICON_WITH_EVERYTHING_ON_IT[size] &&
-                    assetSize === size,
-            ).toBeTruthy();
-        });
+        // Assert
+        expect(Object.keys(result).sort()).toEqual(["default", "icons"].sort());
     });
-
-    test("scale up a small asset rather than scaling down a large one", () => {
-        const expectValueForSize = (
-            requestedSize: IconSize,
-            returnedSize: IconSize,
-        ) => {
-            const iconMissingRequestedSize = {
-                ...DUMMY_ICON_WITH_EVERYTHING_ON_IT,
-            };
-            delete iconMissingRequestedSize[requestedSize];
-            expect(
-                getPathForIcon(iconMissingRequestedSize, requestedSize),
-            ).toMatchObject({
-                assetSize: returnedSize,
-                path: DUMMY_ICON_WITH_EVERYTHING_ON_IT[returnedSize],
-            });
-        };
-        expectValueForSize("small", "medium");
-        expectValueForSize("medium", "small");
-        expectValueForSize("large", "medium");
-        expectValueForSize("xlarge", "large");
-    });
-
-    test("return a path as long as at least one size is available", () => {
-        SIZES.forEach((size) => {
-            const {path, assetSize} = getPathForIcon(
-                DUMMY_ICON_MEDIUM_ONLY,
-                size,
-            );
-            expect(
-                path === DUMMY_ICON_MEDIUM_ONLY["medium"] &&
-                    assetSize === "medium",
-            ).toBeTruthy();
-        });
-    });
 });
-
-describe("viewportPixelsForSize", () => {
-    test("return the correct values", () => {
-        expect(viewportPixelsForSize("small")).toBe(16);
-        expect(viewportPixelsForSize("medium")).toBe(24);
-        expect(viewportPixelsForSize("large")).toBe(48);
-        expect(viewportPixelsForSize("xlarge")).toBe(96);
-    });
-});

package.json

 {
   "name": "@khanacademy/wonder-blocks-icon",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "design": "v1",
@@ -18,6 +18,6 @@ "publishConfig": {
   "dependencies": {
-    "@khanacademy/wonder-blocks-core": "^1.2.2"
+    "@khanacademy/wonder-blocks-core": "^1.2.3"
   },
   "devDependencies": {
-    "@khanacademy/wonder-blocks-color": "^1.0.9"
+    "@khanacademy/wonder-blocks-color": "^1.0.10"
   },
@@ -24,0 +24,0 @@ "peerDependencies": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

85034

increased by10.88%

Number of package files

16

increased by23.08%

Lines of code

1335

increased by26.3%

Dependency changes

• Updated@khanacademy/wonder-blocks-core@^1.2.3