feat(icons): inline core icons & make them theme customisable

packages/core/package.json

@@ -41,7 +41,6 @@
   "dependencies": {
     "@emotion/cache": "^11.11.0",
     "@emotion/serialize": "^1.1.2",
-    "@hitachivantara/uikit-react-icons": "^5.13.3",
     "@hitachivantara/uikit-react-shared": "^5.3.19",
     "@hitachivantara/uikit-react-utils": "^0.2.20",
     "@hitachivantara/uikit-styles": "^5.40.5",

packages/core/src/Accordion/Accordion.tsx

@@ -1,12 +1,12 @@
 import { forwardRef, useCallback, useMemo } from "react";
-import { DropUpXS } from "@hitachivantara/uikit-react-icons";
 import {
   useDefaultProps,
   type ExtractNames,
 } from "@hitachivantara/uikit-react-utils";
 
 import { HvButtonBase } from "../ButtonBase";
 import { useExpandable } from "../hooks/useExpandable";
+import { HvIcon } from "../icons";
 import { HvBaseProps } from "../types/generic";
 import { HvTypography, HvTypographyVariants } from "../Typography";
 import { staticClasses, useClasses } from "./Accordion.styles";
@@ -98,7 +98,7 @@ export const HvAccordion = forwardRef<
         onClick={handleClick}
         variant={labelVariant}
       >
-        <DropUpXS color="inherit" rotate={!isOpen} />
+        <HvIcon name="Chevron" rotation={isOpen ? "up" : "down"} size="xs" />
         {label}
       </HvTypography>
     );

packages/core/src/ActionsGeneric/ActionsGeneric.tsx

@@ -1,5 +1,4 @@
 import { forwardRef, isValidElement } from "react";
-import { MoreOptionsVertical } from "@hitachivantara/uikit-react-icons";
 import {
   useDefaultProps,
   type ExtractNames,
@@ -8,6 +7,7 @@ import {
 import { HvButton, HvButtonProps, HvButtonVariant } from "../Button";
 import { HvDropDownMenu, HvDropDownMenuProps } from "../DropDownMenu";
 import { HvIconButton } from "../IconButton";
+import { HvIcon } from "../icons";
 import { HvBaseProps } from "../types/generic";
 import { setId } from "../utils/setId";
 import { staticClasses, useClasses } from "./ActionsGeneric.styles";
@@ -166,7 +166,7 @@ export const HvActionsGeneric = forwardRef<
             icon: classes.dropDownMenuButton,
             iconSelected: classes.dropDownMenuButtonSelected,
           }}
-          icon={<MoreOptionsVertical color={iconColor} />}
+          icon={<HvIcon name="MoreOptionsVertical" color={iconColor} />}
           placement="left"
           onClick={(event, action) => {
             handleCallback(event, idProp || "", action as HvActionGeneric);

packages/core/src/AppSwitcher/Action/Action.tsx

@@ -1,10 +1,10 @@
 import { useCallback, useState } from "react";
-import { Info } from "@hitachivantara/uikit-react-icons";
-import { type ExtractNames } from "@hitachivantara/uikit-react-utils";
+import type { ExtractNames } from "@hitachivantara/uikit-react-utils";
 import { getColor, HvColorAny } from "@hitachivantara/uikit-styles";
 
 import { HvAvatar } from "../../Avatar";
 import { useUniqueId } from "../../hooks/useUniqueId";
+import { HvIcon } from "../../icons";
 import { HvListItem } from "../../ListContainer";
 import { HvOverflowTooltip } from "../../OverflowTooltip";
 import { HvTooltip } from "../../Tooltip";
@@ -159,7 +159,12 @@ export const HvAppSwitcherAction = ({
 
         {description && (
           <HvTooltip title={description}>
-            <Info className={classes.iconInfo} id={descriptionElementId} />
+            <HvIcon
+              name="Info"
+              compact
+              className={classes.iconInfo}
+              id={descriptionElementId}
+            />
           </HvTooltip>
         )}
       </HvTypography>

packages/core/src/Avatar/Avatar.tsx

@@ -1,6 +1,5 @@
 import { forwardRef } from "react";
 import MuiAvatar, { AvatarProps as MuiAvatarProps } from "@mui/material/Avatar";
-import { User } from "@hitachivantara/uikit-react-icons";
 import {
   useDefaultProps,
   type ExtractNames,
@@ -14,10 +13,18 @@ import {
 
 import { useAvatarGroupContext } from "../AvatarGroup/AvatarGroupContext";
 import { useImageLoaded } from "../hooks/useImageLoaded";
+import { HvIcon } from "../icons";
 import { HvBaseProps } from "../types/generic";
-import { decreaseSize } from "../utils/sizes";
 import { staticClasses, useClasses } from "./Avatar.styles";
 
+const decreaseSizeMap = {
+  xl: "lg",
+  lg: "md",
+  md: "sm",
+  sm: "xs",
+  xs: "xs",
+} satisfies Record<HvSize, HvSize>;
+
 export { staticClasses as avatarClasses };
 
 export type HvAvatarClasses = ExtractNames<typeof useClasses>;
@@ -120,9 +127,10 @@ export const HvAvatar = forwardRef<
     [children] = alt;
   } else {
     children = (
-      <User
+      <HvIcon
+        name="User"
         color={color}
-        iconSize={decreaseSize(size)}
+        size={decreaseSizeMap[size]}
         className={classes.fallback}
       />
     );

packages/core/src/Banner/BannerContent/ActionContainer/ActionContainer.styles.tsx

@@ -1,7 +1,5 @@
 import { createClasses } from "@hitachivantara/uikit-react-utils";
 
-import { outlineStyles } from "../../../utils/focusUtils";
-
 const name = "HvBannerActionContainer";
 
 export const { staticClasses, useClasses } = createClasses(name, {
@@ -17,13 +15,8 @@ export const { staticClasses, useClasses } = createClasses(name, {
   },
   closeAction: {
     alignSelf: "flex-end",
-    cursor: "pointer",
-    "&:focus": {
-      ...outlineStyles,
-    },
-  },
-  iconContainer: {
     width: "32px",
     height: "32px",
   },
+  iconContainer: {},
 });

packages/core/src/Banner/BannerContent/ActionContainer/ActionContainer.tsx

@@ -1,11 +1,11 @@
-import { Close } from "@hitachivantara/uikit-react-icons";
 import { type ExtractNames } from "@hitachivantara/uikit-react-utils";
 
 import {
   HvActionsGeneric,
   HvActionsGenericProps,
 } from "../../../ActionsGeneric";
-import { HvButton } from "../../../Button";
+import { HvIconButton } from "../../../IconButton";
+import { HvIcon } from "../../../icons";
 import { HvBaseProps } from "../../../types/generic";
 import { staticClasses, useClasses } from "./ActionContainer.styles";
 
@@ -43,16 +43,15 @@ export const HvActionContainer = (props: HvActionContainerProps) => {
   const { classes } = useClasses(classesProp);
   return (
     <div className={classes.actionContainer}>
-      <HvButton
-        icon
+      <HvIconButton
         className={classes.closeAction}
         variant="semantic"
-        aria-label="Close"
+        title="Close"
         onClick={onClose}
         {...others}
       >
-        <Close iconSize="XS" className={classes.iconContainer} color="base2" />
-      </HvButton>
+        <HvIcon name="Close" size="xs" className={classes.iconContainer} />
+      </HvIconButton>
       {action && (
         <div className={classes.actionsInnerContainer}>
           <HvActionsGeneric

packages/core/src/Banner/BannerContent/BannerContent.styles.tsx

@@ -15,6 +15,7 @@ export const { useClasses, staticClasses } = createClasses("HvBannerContent", {
     alignItems: "center",
     padding: theme.spacing("xs", 0),
     paddingLeft: theme.space.sm,
+    gap: theme.space.xs,
   },
   action: {
     padding: theme.spacing("xs"),

packages/core/src/Banner/BannerContent/MessageContainer/MessageContainer.styles.tsx

@@ -9,11 +9,7 @@ export const { staticClasses, useClasses } = createClasses(name, {
     wordBreak: "break-word",
     maxWidth: "700px",
     overflow: "hidden",
-    marginRight: 10,
-  },
-  iconContainer: {
-    marginRight: theme.space.xs,
-    marginLeft: -theme.space.xs,
+    textWrap: "balance",
   },
   actionMessageContainer: {
     flex: "0 0 auto",

packages/core/src/Banner/BannerContent/MessageContainer/MessageContainer.tsx

@@ -20,18 +20,6 @@ export interface HvMessageContainerProps
   icon?: React.ReactNode;
   /** The message to display. */
   message?: React.ReactNode;
-  /**
-   * Actions to display on message.
-   *
-   * @deprecated Use `actions` instead.
-   * */
-  actionsOnMessage?: HvActionsGenericProps["actions"];
-  /**
-   * The callback function called when an action is triggered, receiving `actionsOnMessage` as parameter.
-   *
-   * @deprecated Use `onAction` instead.
-   * */
-  actionsOnMessageCallback?: HvActionsGenericProps["actionsCallback"];
   /** A Jss Object used to override or extend the styles applied to the component. */
   classes?: HvMessageContainerClasses;
 }
@@ -40,8 +28,6 @@ export const HvMessageContainer = ({
   id,
   classes: classesProp,
   icon,
-  actionsOnMessage, // TODO - remove in v6
-  actionsOnMessageCallback, // TODO - remove in v6
   actions,
   onAction,
   message,
@@ -50,20 +36,19 @@ export const HvMessageContainer = ({
 
   return (
     <>
-      {icon && <div className={classes.iconContainer}>{icon}</div>}
+      {icon}
       <HvTypography id={setId(id, "message-text")} className={classes.message}>
         {message}
       </HvTypography>
-      {(actionsOnMessage ?? actions) && (
+      {actions && (
         <div
           id={setId(id, "message-actions")}
           className={classes.actionMessageContainer}
         >
           <HvActionsGeneric
             id={id}
             variant="semantic"
-            actions={actionsOnMessage ?? actions}
-            actionsCallback={actionsOnMessageCallback}
+            actions={actions}
             onAction={onAction}
           />
         </div>

packages/core/src/BaseCheckBox/BaseCheckBox.tsx

@@ -7,8 +7,8 @@ import {
   type ExtractNames,
 } from "@hitachivantara/uikit-react-utils";
 
+import { HvIcon } from "../icons";
 import { staticClasses, useClasses } from "./BaseCheckBox.styles";
-import { Box, Check, Partial } from "./icons";
 
 export { staticClasses as baseCheckBoxClasses };
 
@@ -86,12 +86,10 @@ export interface HvBaseCheckBoxProps
   classes?: HvBaseCheckBoxClasses;
 }
 
-const getSelectorIcons = () => {
-  return {
-    checkbox: <Box />,
-    checkboxPartial: <Partial />,
-    checkboxChecked: <Check />,
-  };
+const icons = {
+  checkbox: <HvIcon name="Box" compact />,
+  checkboxPartial: <HvIcon name="Partial" compact />,
+  checkboxChecked: <HvIcon name="Check" compact />,
 };
 
 /**
@@ -128,8 +126,6 @@ export const HvBaseCheckBox = forwardRef<
 
   const [focusVisible, setFocusVisible] = useState<boolean>(false);
 
-  const icons = getSelectorIcons();
-
   const onChangeCallback = useCallback(
     (event: React.ChangeEvent<HTMLInputElement>) => {
       if (readOnly) {