@hitachivantara/uikit-react-icons/dist/esm/IconBase.js

NEXT Design System icons packaged as a set of React components.

import { jsx, jsxs } from "react/jsx-runtime";
import { memo, forwardRef } from "react";
import styled from "@emotion/styled";
import { getColor, theme } from "@hitachivantara/uikit-styles";
import { HvIconContainer } from "./IconContainer.js";
import { getSizeStyles } from "./utils.js";
const getColorVars = (colorArray) => {
  return colorArray.reduce((acc, value, index) => {
    acc[`--color-${index + 1}`] = value;
    return acc;
  }, {});
};
const getIconColors = (palette = [], color, semantic, inverted = false) => {
  const colorArray = [...palette];
  if (typeof color === "string") {
    colorArray[0] = color;
  } else if (Array.isArray(color)) {
    colorArray.forEach((_, i) => {
      colorArray[i] = color[i];
    });
  }
  if (semantic) {
    colorArray[0] = theme.colors?.[semantic] || colorArray[0];
  }
  if (inverted && colorArray[1]) {
    colorArray[1] = colorArray[0];
    colorArray[0] = "none";
  }
  return colorArray;
};
const StyledSvg = styled("svg")({
  margin: "auto",
  color: "inherit",
  fill: "currentcolor",
  width: "1em",
  height: "1em",
  fontSize: "inherit"
});
const IconBaseInternal = (props, ref) => {
  const {
    // internal props
    children,
    palette,
    iconName,
    viewBox,
    // deprecated props
    viewbox: viewBoxProp,
    height,
    width,
    semantic,
    inverted,
    // standard props
    title: titleProp,
    // keep aria-label for `HvTooltip`+icon compatibility
    "aria-label": ariaLabel,
    color,
    size,
    iconSize,
    style: styleProp,
    svgProps,
    ...others
  } = props;
  const colorArray = getIconColors(palette, color, semantic, inverted);
  const [color0, ...otherColors] = colorArray.map((c) => getColor(c));
  const title = titleProp ?? ariaLabel;
  const inheritColor = !color && palette?.length === 1 && palette?.[0] === "secondary";
  return /* @__PURE__ */ jsx(
    HvIconContainer,
    {
      ref,
      "data-name": iconName,
      style: {
        ...!inheritColor && { color: color0 },
        ...getColorVars(otherColors),
        ...getSizeStyles(iconName ?? "", size),
        ...styleProp
      },
      size: size ?? iconSize,
      ...others,
      children: /* @__PURE__ */ jsxs(
        StyledSvg,
        {
          viewBox: viewBoxProp ?? viewBox,
          focusable: false,
          role: title ? "img" : "none",
          style: width && height ? { width, height } : void 0,
          ...svgProps,
          children: [
            title ? /* @__PURE__ */ jsx("title", { children: title }) : null,
            children
          ]
        }
      )
    }
  );
};
const IconBase = memo(forwardRef(IconBaseInternal));
const createHvIcon = (iconName, viewBox, palette, children) => {
  const IconComponent = (props, ref) => {
    return /* @__PURE__ */ jsx(
      IconBase,
      {
        ref,
        iconName,
        viewBox,
        palette,
        ...props,
        children
      }
    );
  };
  IconComponent.displayName = `HvIcon${iconName}`;
  return memo(forwardRef(IconComponent));
};
export {
  IconBase,
  createHvIcon
};