// src/components/Icon/Icon.tsx
import classNames from "classnames/dedupe";
import "@simplybusiness/mobius/src/components/Icon/Icon.css";
import { jsx, jsxs } from "react/jsx-runtime";
var ICON_PREFIX = "mobius-icon";
var capitaliseFirstLetter = (str) => str.charAt(0).toUpperCase() + str.slice(1);
function Icon({
  ref,
  icon,
  className,
  size = "xs",
  color,
  fixedWidth,
  spin,
  spinReverse,
  title,
  ...otherProps
}) {
  if (!icon) {
    throw new Error("Must specify icon object");
  }
  const classes = classNames(
    "mobius",
    "mobius-icon",
    `svg-inline--${ICON_PREFIX}`,
    `--size-${size}`,
    className,
    {
      [`${ICON_PREFIX}-fw`]: fixedWidth,
      [`${ICON_PREFIX}-spin`]: spin || spinReverse,
      [`${ICON_PREFIX}-spin-reverse`]: spinReverse
    }
  );
  const { iconName, width, height, svgPathData } = icon;
  const formattedIconName = iconName.split("-").join(" ");
  const defaultTitle = `${capitaliseFirstLetter(formattedIconName)} icon`;
  const titleText = title || defaultTitle;
  return /* @__PURE__ */ jsxs(
    "svg",
    {
      ref,
      focusable: "false",
      "data-icon": iconName,
      className: classes,
      role: "img",
      xmlns: "http://www.w3.org/2000/svg",
      viewBox: `0 0 ${width} ${height}`,
      style: { color },
      ...otherProps,
      children: [
        /* @__PURE__ */ jsx("title", { children: titleText }),
        /* @__PURE__ */ jsx("path", { fill: "currentColor", d: svgPathData })
      ]
    }
  );
}

export {
  Icon
};
//# sourceMappingURL=chunk-TKIP5Q5H.js.map
