@khanacademy/wonder-blocks-icon 5.1.3 → 5.2.0

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @khanacademy/wonder-blocks-icon
 
+## 5.2.0
+
+### Minor Changes
+
+- 308696e: - Rename `useSvgAttributes` hook to `useImageRoleAttributes`
+    - Make the `useImageRoleAttributes` utility public
+- dc34e0c: Adds `StreakIcon` custom icon component
+- 2cace08: Add `Icon` component to support custom icons.
+- f714517: Adds `GemIcon` custom icon component
+
+### Patch Changes
+
+- 8468d8d: Use `semanticColor` tokens for `GemIcon` and `StreakIcon` custom icon components
+- Updated dependencies [8468d8d]
+    - @khanacademy/wonder-blocks-tokens@10.5.0
+
+## 5.1.4
+
+### Patch Changes
+
+- Updated dependencies [28fa0c0]
+- Updated dependencies [28fa0c0]
+    - @khanacademy/wonder-blocks-core@12.3.0
+
 ## 5.1.3
 
 ### Patch Changes

package/dist/components/custom-icon-components/gem-icon.d.ts

@@ -0,0 +1,18 @@
+import * as React from "react";
+/**
+ * A custom icon component that renders a gem icon using an inline svg. Use
+ * with the `Icon` component to display the icon.
+ *
+ * The icon uses semantic color tokens for the different parts of the icon so
+ * it will respond to the current theme.
+ */
+declare const GemIcon: React.ForwardRefExoticComponent<Readonly<import("@khanacademy/wonder-blocks-core").AriaAttributes> & Readonly<{
+    role?: import("@khanacademy/wonder-blocks-core").AriaRole;
+}> & {
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    id?: string;
+    testId?: string;
+    style?: import("@khanacademy/wonder-blocks-core").StyleType;
+} & React.RefAttributes<SVGSVGElement>>;
+export { GemIcon };

package/dist/components/custom-icon-components/streak-icon.d.ts

@@ -0,0 +1,18 @@
+import * as React from "react";
+/**
+ * A custom icon component that renders a streak icon using an inline svg. Use
+ * with the `Icon` component to display the icon.
+ *
+ * The icon uses semantic color tokens for the different parts of the icon so
+ * it will respond to the current theme.
+ */
+declare const StreakIcon: React.ForwardRefExoticComponent<Readonly<import("@khanacademy/wonder-blocks-core").AriaAttributes> & Readonly<{
+    role?: import("@khanacademy/wonder-blocks-core").AriaRole;
+}> & {
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    id?: string;
+    testId?: string;
+    style?: import("@khanacademy/wonder-blocks-core").StyleType;
+} & React.RefAttributes<SVGSVGElement>>;
+export { StreakIcon };

package/dist/components/icon.d.ts

@@ -0,0 +1,39 @@
+import * as React from "react";
+import { StyleType } from "@khanacademy/wonder-blocks-core";
+import { IconSize } from "../types";
+/**
+ * A component for displaying a custom icon. The Icon component supports custom
+ * icons that are `img` elements or inline svg assets with their own fill.
+ *
+ * Related components:
+ * - For Phosphor icons, use the `PhosphorIcon` component.
+ * - For custom icons that are single colored svg assets, use the `PhosphorIcon`
+ * component, which supports changing the color of the icon.
+ * - If the icon is interactive, use `IconButton` instead.
+ */
+declare const Icon: React.ForwardRefExoticComponent<Readonly<import("@khanacademy/wonder-blocks-core").AriaAttributes> & Readonly<{
+    role?: import("@khanacademy/wonder-blocks-core").AriaRole;
+}> & {
+    /**
+     * The id for the icon component.
+     */
+    id?: string;
+    /**
+     * The test id for the icon component.
+     */
+    testId?: string;
+    /**
+     * Custom styles to apply to the icon component.
+     */
+    style?: StyleType;
+    /**
+     * Size of the icon. One of `small` (16), `medium` (24), `large` (48), or
+     * `xlarge` (96). Defaults to `small`.
+     */
+    size?: IconSize;
+    /**
+     * The icon to display. This can be an inline svg or an image.
+     */
+    children: React.ReactElement;
+} & React.RefAttributes<HTMLDivElement>>;
+export { Icon };

package/dist/es/index.js

@@ -1,69 +1,19 @@
-import _extends from '@babel/runtime/helpers/extends';
-import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/objectWithoutPropertiesLoose';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import * as React from 'react';
-import { StyleSheet } from 'aphrodite';
 import { addStyle } from '@khanacademy/wonder-blocks-core';
+import { StyleSheet } from 'aphrodite';
+import { sizing, semanticColor } from '@khanacademy/wonder-blocks-tokens';
+
+function getSize(size){switch(size){case"small":default:{return styles$1.small}case"medium":{return styles$1.medium}case"large":{return styles$1.large}case"xlarge":{return styles$1.xlarge}}}const StyledDiv=addStyle("div");const Icon=React.forwardRef((props,ref)=>{const{size="small",id,testId,style,children,...otherProps}=props;const childrenElement=React.cloneElement(children,{style:{width:"100%",height:"100%"}});return jsx(StyledDiv,{style:[getSize(size),style],id:id,"data-testid":testId,ref:ref,...otherProps,children:childrenElement})});const styles$1=StyleSheet.create({small:{width:sizing.size_160,height:sizing.size_160},medium:{width:sizing.size_240,height:sizing.size_240},large:{width:sizing.size_480,height:sizing.size_480},xlarge:{width:sizing.size_960,height:sizing.size_960}});
+
+const viewportPixelsForSize=size=>({small:16,medium:24,large:48,xlarge:96})[size];
+
+const StyledSpan=addStyle("span");const PhosphorIcon=React.forwardRef(function PhosphorIcon(props,ref){const{color="currentColor",icon,size="small",style,testId,className,role,...sharedProps}=props;const pixelSize=viewportPixelsForSize(size);const classNames=`${className??""}`;const iconStyles=_generateStyles(color,pixelSize);return jsx(StyledSpan,{...sharedProps,className:classNames,style:[styles.svg,iconStyles.icon,{maskImage:`url(${icon})`},style],"data-testid":testId,ref:ref,role:role??sharedProps["aria-label"]?"img":undefined})});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,maskSize:"100%",maskRepeat:"no-repeat",maskPosition:"center"}});PhosphorIcon.displayName="PhosphorIcon";
+
+function useImageRoleAttributes(props){const{"aria-label":ariaLabel,"aria-labelledby":ariaLabelledBy}=props;const presentationOnlyAttributes={"aria-hidden":true};const iconMeaningAttributes={"aria-label":ariaLabel,"aria-labelledby":ariaLabelledBy,role:"img"};const attributes=ariaLabel||ariaLabelledBy?iconMeaningAttributes:presentationOnlyAttributes;return attributes}
 
-const viewportPixelsForSize = size => ({
-  small: 16,
-  medium: 24,
-  large: 48,
-  xlarge: 96
-})[size];
+const StyledSvg$1=addStyle("svg");const GemIcon=React.forwardRef((props,ref)=>{const{"aria-label":ariaLabel,"aria-labelledby":ariaLabelledBy,id,testId,style,...otherProps}=props;const attributes=useImageRoleAttributes({"aria-label":ariaLabel,"aria-labelledby":ariaLabelledBy});return jsxs(StyledSvg$1,{id:id,"data-testid":testId,style:style,ref:ref,viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",...attributes,...otherProps,children:[jsx("path",{d:"M1.246 5.38105L2.36444 3.66654C2.63609 3.25012 3.0934 3 3.58311 3H12.4169C12.9066 3 13.3639 3.25012 13.6356 3.66654L14.754 5.38105C15.1278 5.95411 15.0708 6.71389 14.6158 7.22195L9.08044 13.4027C8.49982 14.051 7.50018 14.051 6.91956 13.4027L1.38423 7.22195C0.929229 6.71389 0.872177 5.95411 1.246 5.38105Z",fill:semanticColor.core.foreground.gems.default}),jsx("path",{d:"M9.45654 7.01492L8.34027 10.0102C8.07911 10.711 8.97464 11.2595 9.48018 10.7084L12.6345 7.26989C13.0351 6.83317 12.7253 6.12858 12.1327 6.12858H10.7327C10.164 6.12858 9.65515 6.48199 9.45654 7.01492Z",fill:semanticColor.core.foreground.gems.subtle})]})});
 
-const _excluded = ["color", "icon", "size", "style", "testId", "className", "role"];
-const StyledSpan = addStyle("span");
-const PhosphorIcon = React.forwardRef(function PhosphorIcon(props, ref) {
-  const {
-      color = "currentColor",
-      icon,
-      size = "small",
-      style,
-      testId,
-      className,
-      role
-    } = props,
-    sharedProps = _objectWithoutPropertiesLoose(props, _excluded);
-  const pixelSize = viewportPixelsForSize(size);
-  const classNames = `${className != null ? className : ""}`;
-  const iconStyles = _generateStyles(color, pixelSize);
-  return React.createElement(StyledSpan, _extends({}, sharedProps, {
-    className: classNames,
-    style: [styles.svg, iconStyles.icon, {
-      maskImage: `url(${icon})`
-    }, style],
-    "data-testid": testId,
-    ref: ref,
-    role: (role != null ? role : sharedProps["aria-label"]) ? "img" : undefined
-  }));
-});
-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,
-    maskSize: "100%",
-    maskRepeat: "no-repeat",
-    maskPosition: "center"
-  }
-});
-PhosphorIcon.displayName = "PhosphorIcon";
+const StyledSvg=addStyle("svg");const StreakIcon=React.forwardRef((props,ref)=>{const{"aria-label":ariaLabel,"aria-labelledby":ariaLabelledBy,id,testId,style,...otherProps}=props;const attributes=useImageRoleAttributes({"aria-label":ariaLabel,"aria-labelledby":ariaLabelledBy});return jsxs(StyledSvg,{id:id,"data-testid":testId,style:style,ref:ref,viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",...attributes,...otherProps,children:[jsx("path",{d:"M9.14653 0.628361C9.07012 0.571421 8.97956 0.531782 8.88248 0.512785C8.78539 0.493787 8.68464 0.49599 8.5887 0.519205C8.49277 0.542421 8.40447 0.585969 8.33125 0.64618C8.25802 0.70639 8.20202 0.781496 8.16797 0.865168L5.47556 5.06034L4.59152 3.43463C4.52866 3.37998 4.45359 3.33789 4.37125 3.31114C4.28892 3.28438 4.2012 3.27357 4.11387 3.27941C4.02653 3.28525 3.94157 3.30761 3.86458 3.34502C3.78759 3.38243 3.72032 3.43403 3.66719 3.49644C1.98899 5.46729 1.13672 7.44994 1.13672 9.38884C1.13672 11.0096 1.85506 12.564 3.13372 13.7101C4.41238 14.8561 6.14661 15.5 7.9549 15.5C9.7632 15.5 11.4974 14.8561 12.7761 13.7101C14.0547 12.564 14.7731 11.0096 14.7731 9.38884C14.7731 5.26034 10.8379 1.88879 9.14653 0.628361Z",fill:semanticColor.core.foreground.streak.default}),jsx("path",{d:"M10.8067 10.5315C10.8067 12.0965 9.53809 13.3651 7.97318 13.3651C6.40826 13.3651 5.13965 12.0965 5.13965 10.5315C5.13965 8.96663 7.2648 6.28125 7.97318 6.28125C8.68156 6.28125 10.8067 8.96663 10.8067 10.5315Z",fill:semanticColor.core.foreground.streak.subtle})]})});
 
-export { PhosphorIcon };
+export { GemIcon, Icon, PhosphorIcon, StreakIcon, useImageRoleAttributes };

package/dist/hooks/use-image-role-attributes.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Determines what attributes should be applied to an icon based on if there is
+ * an accessible label for the icon.
+ *
+ * @returns The attributes to apply to an svg element.
+ */
+export declare function useImageRoleAttributes(props: {
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+}): {
+    "aria-hidden": boolean;
+} | {
+    "aria-label": string | undefined;
+    "aria-labelledby": string | undefined;
+    role: string;
+};

package/dist/index.d.ts

@@ -1,2 +1,6 @@
+export { Icon } from "./components/icon";
 export { PhosphorIcon } from "./components/phosphor-icon";
 export type { IconSize, PhosphorIconAsset } from "./types";
+export { GemIcon } from "./components/custom-icon-components/gem-icon";
+export { StreakIcon } from "./components/custom-icon-components/streak-icon";
+export { useImageRoleAttributes } from "./hooks/use-image-role-attributes";

package/dist/index.js

@@ -2,13 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _extends = require('@babel/runtime/helpers/extends');
-var _objectWithoutPropertiesLoose = require('@babel/runtime/helpers/objectWithoutPropertiesLoose');
+var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var aphrodite = require('aphrodite');
 var wonderBlocksCore = require('@khanacademy/wonder-blocks-core');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+var aphrodite = require('aphrodite');
+var wonderBlocksTokens = require('@khanacademy/wonder-blocks-tokens');
 
 function _interopNamespace(e) {
     if (e && e.__esModule) return e;
@@ -28,70 +26,22 @@ function _interopNamespace(e) {
     return Object.freeze(n);
 }
 
-var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
-var _objectWithoutPropertiesLoose__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutPropertiesLoose);
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
-const viewportPixelsForSize = size => ({
-  small: 16,
-  medium: 24,
-  large: 48,
-  xlarge: 96
-})[size];
+function getSize(size){switch(size){case"small":default:{return styles$1.small}case"medium":{return styles$1.medium}case"large":{return styles$1.large}case"xlarge":{return styles$1.xlarge}}}const StyledDiv=wonderBlocksCore.addStyle("div");const Icon=React__namespace.forwardRef((props,ref)=>{const{size="small",id,testId,style,children,...otherProps}=props;const childrenElement=React__namespace.cloneElement(children,{style:{width:"100%",height:"100%"}});return jsxRuntime.jsx(StyledDiv,{style:[getSize(size),style],id:id,"data-testid":testId,ref:ref,...otherProps,children:childrenElement})});const styles$1=aphrodite.StyleSheet.create({small:{width:wonderBlocksTokens.sizing.size_160,height:wonderBlocksTokens.sizing.size_160},medium:{width:wonderBlocksTokens.sizing.size_240,height:wonderBlocksTokens.sizing.size_240},large:{width:wonderBlocksTokens.sizing.size_480,height:wonderBlocksTokens.sizing.size_480},xlarge:{width:wonderBlocksTokens.sizing.size_960,height:wonderBlocksTokens.sizing.size_960}});
 
-const _excluded = ["color", "icon", "size", "style", "testId", "className", "role"];
-const StyledSpan = wonderBlocksCore.addStyle("span");
-const PhosphorIcon = React__namespace.forwardRef(function PhosphorIcon(props, ref) {
-  const {
-      color = "currentColor",
-      icon,
-      size = "small",
-      style,
-      testId,
-      className,
-      role
-    } = props,
-    sharedProps = _objectWithoutPropertiesLoose__default["default"](props, _excluded);
-  const pixelSize = viewportPixelsForSize(size);
-  const classNames = `${className != null ? className : ""}`;
-  const iconStyles = _generateStyles(color, pixelSize);
-  return React__namespace.createElement(StyledSpan, _extends__default["default"]({}, sharedProps, {
-    className: classNames,
-    style: [styles.svg, iconStyles.icon, {
-      maskImage: `url(${icon})`
-    }, style],
-    "data-testid": testId,
-    ref: ref,
-    role: (role != null ? role : sharedProps["aria-label"]) ? "img" : undefined
-  }));
-});
-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,
-    maskSize: "100%",
-    maskRepeat: "no-repeat",
-    maskPosition: "center"
-  }
-});
-PhosphorIcon.displayName = "PhosphorIcon";
+const viewportPixelsForSize=size=>({small:16,medium:24,large:48,xlarge:96})[size];
+
+const StyledSpan=wonderBlocksCore.addStyle("span");const PhosphorIcon=React__namespace.forwardRef(function PhosphorIcon(props,ref){const{color="currentColor",icon,size="small",style,testId,className,role,...sharedProps}=props;const pixelSize=viewportPixelsForSize(size);const classNames=`${className??""}`;const iconStyles=_generateStyles(color,pixelSize);return jsxRuntime.jsx(StyledSpan,{...sharedProps,className:classNames,style:[styles.svg,iconStyles.icon,{maskImage:`url(${icon})`},style],"data-testid":testId,ref:ref,role:role??sharedProps["aria-label"]?"img":undefined})});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,maskSize:"100%",maskRepeat:"no-repeat",maskPosition:"center"}});PhosphorIcon.displayName="PhosphorIcon";
+
+function useImageRoleAttributes(props){const{"aria-label":ariaLabel,"aria-labelledby":ariaLabelledBy}=props;const presentationOnlyAttributes={"aria-hidden":true};const iconMeaningAttributes={"aria-label":ariaLabel,"aria-labelledby":ariaLabelledBy,role:"img"};const attributes=ariaLabel||ariaLabelledBy?iconMeaningAttributes:presentationOnlyAttributes;return attributes}
+
+const StyledSvg$1=wonderBlocksCore.addStyle("svg");const GemIcon=React__namespace.forwardRef((props,ref)=>{const{"aria-label":ariaLabel,"aria-labelledby":ariaLabelledBy,id,testId,style,...otherProps}=props;const attributes=useImageRoleAttributes({"aria-label":ariaLabel,"aria-labelledby":ariaLabelledBy});return jsxRuntime.jsxs(StyledSvg$1,{id:id,"data-testid":testId,style:style,ref:ref,viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",...attributes,...otherProps,children:[jsxRuntime.jsx("path",{d:"M1.246 5.38105L2.36444 3.66654C2.63609 3.25012 3.0934 3 3.58311 3H12.4169C12.9066 3 13.3639 3.25012 13.6356 3.66654L14.754 5.38105C15.1278 5.95411 15.0708 6.71389 14.6158 7.22195L9.08044 13.4027C8.49982 14.051 7.50018 14.051 6.91956 13.4027L1.38423 7.22195C0.929229 6.71389 0.872177 5.95411 1.246 5.38105Z",fill:wonderBlocksTokens.semanticColor.core.foreground.gems.default}),jsxRuntime.jsx("path",{d:"M9.45654 7.01492L8.34027 10.0102C8.07911 10.711 8.97464 11.2595 9.48018 10.7084L12.6345 7.26989C13.0351 6.83317 12.7253 6.12858 12.1327 6.12858H10.7327C10.164 6.12858 9.65515 6.48199 9.45654 7.01492Z",fill:wonderBlocksTokens.semanticColor.core.foreground.gems.subtle})]})});
+
+const StyledSvg=wonderBlocksCore.addStyle("svg");const StreakIcon=React__namespace.forwardRef((props,ref)=>{const{"aria-label":ariaLabel,"aria-labelledby":ariaLabelledBy,id,testId,style,...otherProps}=props;const attributes=useImageRoleAttributes({"aria-label":ariaLabel,"aria-labelledby":ariaLabelledBy});return jsxRuntime.jsxs(StyledSvg,{id:id,"data-testid":testId,style:style,ref:ref,viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",...attributes,...otherProps,children:[jsxRuntime.jsx("path",{d:"M9.14653 0.628361C9.07012 0.571421 8.97956 0.531782 8.88248 0.512785C8.78539 0.493787 8.68464 0.49599 8.5887 0.519205C8.49277 0.542421 8.40447 0.585969 8.33125 0.64618C8.25802 0.70639 8.20202 0.781496 8.16797 0.865168L5.47556 5.06034L4.59152 3.43463C4.52866 3.37998 4.45359 3.33789 4.37125 3.31114C4.28892 3.28438 4.2012 3.27357 4.11387 3.27941C4.02653 3.28525 3.94157 3.30761 3.86458 3.34502C3.78759 3.38243 3.72032 3.43403 3.66719 3.49644C1.98899 5.46729 1.13672 7.44994 1.13672 9.38884C1.13672 11.0096 1.85506 12.564 3.13372 13.7101C4.41238 14.8561 6.14661 15.5 7.9549 15.5C9.7632 15.5 11.4974 14.8561 12.7761 13.7101C14.0547 12.564 14.7731 11.0096 14.7731 9.38884C14.7731 5.26034 10.8379 1.88879 9.14653 0.628361Z",fill:wonderBlocksTokens.semanticColor.core.foreground.streak.default}),jsxRuntime.jsx("path",{d:"M10.8067 10.5315C10.8067 12.0965 9.53809 13.3651 7.97318 13.3651C6.40826 13.3651 5.13965 12.0965 5.13965 10.5315C5.13965 8.96663 7.2648 6.28125 7.97318 6.28125C8.68156 6.28125 10.8067 8.96663 10.8067 10.5315Z",fill:wonderBlocksTokens.semanticColor.core.foreground.streak.subtle})]})});
 
+exports.GemIcon = GemIcon;
+exports.Icon = Icon;
 exports.PhosphorIcon = PhosphorIcon;
+exports.StreakIcon = StreakIcon;
+exports.useImageRoleAttributes = useImageRoleAttributes;

package/dist/types.d.ts

@@ -1,3 +1,4 @@
+import { AriaProps, StyleType } from "@khanacademy/wonder-blocks-core";
 /**
  * All the possible icon weights.
  */
@@ -6,3 +7,31 @@ export type PhosphorIconAsset = PhosphorRegular | PhosphorBold | PhosphorFill;
  * All the possible icon weights.
  */
 export type IconSize = "small" | "medium" | "large" | "xlarge";
+/**
+ * Common props for custom icon components.
+ */
+export type CustomIconProps = AriaProps & {
+    /**
+     * The alternative text for the icon. If `aria-label` or `aria-labelledby`
+     * is not provided, the icon will be marked with `aria-hidden=true`..
+     */
+    "aria-label"?: string;
+    /**
+     * The id of the element that provides the alternative text for the icon.
+     * If `aria-label` is not provided, the icon will be marked with
+     * `aria-hidden=true`.
+     */
+    "aria-labelledby"?: string;
+    /**
+     * The id for the element.
+     */
+    id?: string;
+    /**
+     * The test id for the element.
+     */
+    testId?: string;
+    /**
+     * The style for the element.
+     */
+    style?: StyleType;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-icon",
-  "version": "5.1.3",
+  "version": "5.2.0",
   "design": "v1",
   "publishConfig": {
     "access": "public"
@@ -12,11 +12,11 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
-    "@babel/runtime": "^7.24.5",
-    "@khanacademy/wonder-blocks-core": "12.2.1"
+    "@khanacademy/wonder-blocks-core": "12.3.0",
+    "@khanacademy/wonder-blocks-tokens": "10.5.0"
   },
   "devDependencies": {
-    "@khanacademy/wb-dev-build-settings": "2.1.1"
+    "@khanacademy/wb-dev-build-settings": "3.2.0"
   },
   "peerDependencies": {
     "@phosphor-icons/core": "^2.0.2",