@violetprotocol/nudge-components/dist/es/atoms/Icon/Icon.esm.js

Components for Nudge's websites and applications.

"use client";
import { jsx } from "react/jsx-runtime";
import { useState, useEffect } from "react";
const icons = /* @__PURE__ */ Object.assign({ "../../assets/icons/babylon.svg": () => import("../../assets/icons/babylon.svg.esm.js"), "../../assets/icons/bridge.svg": () => import("../../assets/icons/bridge.svg.esm.js"), "../../assets/icons/check.svg": () => import("../../assets/icons/check.svg.esm.js"), "../../assets/icons/chevron-down.svg": () => import("../../assets/icons/chevron-down.svg.esm.js"), "../../assets/icons/chevron-left.svg": () => import("../../assets/icons/chevron-left.svg.esm.js"), "../../assets/icons/chevron-right.svg": () => import("../../assets/icons/chevron-right.svg.esm.js"), "../../assets/icons/chevron-up.svg": () => import("../../assets/icons/chevron-up.svg.esm.js"), "../../assets/icons/close.svg": () => import("../../assets/icons/close.svg.esm.js"), "../../assets/icons/coins-03.svg": () => import("../../assets/icons/coins-03.svg.esm.js"), "../../assets/icons/coins-swap-02.svg": () => import("../../assets/icons/coins-swap-02.svg.esm.js"), "../../assets/icons/currency-dollar-circle.svg": () => import("../../assets/icons/currency-dollar-circle.svg.esm.js"), "../../assets/icons/discord.svg": () => import("../../assets/icons/discord.svg.esm.js"), "../../assets/icons/eigen-layer.svg": () => import("../../assets/icons/eigen-layer.svg.esm.js"), "../../assets/icons/ether-fi.svg": () => import("../../assets/icons/ether-fi.svg.esm.js"), "../../assets/icons/flip-backward.svg": () => import("../../assets/icons/flip-backward.svg.esm.js"), "../../assets/icons/gov-token.svg": () => import("../../assets/icons/gov-token.svg.esm.js"), "../../assets/icons/info-circle.svg": () => import("../../assets/icons/info-circle.svg.esm.js"), "../../assets/icons/karak.svg": () => import("../../assets/icons/karak.svg.esm.js"), "../../assets/icons/kelp.svg": () => import("../../assets/icons/kelp.svg.esm.js"), "../../assets/icons/l2-tvl.svg": () => import("../../assets/icons/l2-tvl.svg.esm.js"), "../../assets/icons/laptop-02.svg": () => import("../../assets/icons/laptop-02.svg.esm.js"), "../../assets/icons/layers-one.svg": () => import("../../assets/icons/layers-one.svg.esm.js"), "../../assets/icons/layers-two-01.svg": () => import("../../assets/icons/layers-two-01.svg.esm.js"), "../../assets/icons/link-03.svg": () => import("../../assets/icons/link-03.svg.esm.js"), "../../assets/icons/liquid-staking.svg": () => import("../../assets/icons/liquid-staking.svg.esm.js"), "../../assets/icons/lp-positions.svg": () => import("../../assets/icons/lp-positions.svg.esm.js"), "../../assets/icons/mail-01.svg": () => import("../../assets/icons/mail-01.svg.esm.js"), "../../assets/icons/mellow-lrt.svg": () => import("../../assets/icons/mellow-lrt.svg.esm.js"), "../../assets/icons/menu.svg": () => import("../../assets/icons/menu.svg.esm.js"), "../../assets/icons/percentage.svg": () => import("../../assets/icons/percentage.svg.esm.js"), "../../assets/icons/phone-01.svg": () => import("../../assets/icons/phone-01.svg.esm.js"), "../../assets/icons/pie-chart-03.svg": () => import("../../assets/icons/pie-chart-03.svg.esm.js"), "../../assets/icons/plus-circle.svg": () => import("../../assets/icons/plus-circle.svg.esm.js"), "../../assets/icons/plus.svg": () => import("../../assets/icons/plus.svg.esm.js"), "../../assets/icons/puffer-finance.svg": () => import("../../assets/icons/puffer-finance.svg.esm.js"), "../../assets/icons/question-mark.svg": () => import("../../assets/icons/question-mark.svg.esm.js"), "../../assets/icons/renzo.svg": () => import("../../assets/icons/renzo.svg.esm.js"), "../../assets/icons/settings.svg": () => import("../../assets/icons/settings.svg.esm.js"), "../../assets/icons/stables.svg": () => import("../../assets/icons/stables.svg.esm.js"), "../../assets/icons/swell.svg": () => import("../../assets/icons/swell.svg.esm.js"), "../../assets/icons/symbiotic.svg": () => import("../../assets/icons/symbiotic.svg.esm.js"), "../../assets/icons/telegram.svg": () => import("../../assets/icons/telegram.svg.esm.js"), "../../assets/icons/user-right-01.svg": () => import("../../assets/icons/user-right-01.svg.esm.js"), "../../assets/icons/users-03.svg": () => import("../../assets/icons/users-03.svg.esm.js"), "../../assets/icons/x.svg": () => import("../../assets/icons/x.svg.esm.js") });
const Icon = ({
  name,
  width,
  height,
  color,
  className,
  ...props
}) => {
  const [iconSrc, setIconSrc] = useState(null);
  const definedWidth = width || 24;
  const definedHeight = height || 24;
  const filter = `filter-${color}`;
  useEffect(() => {
    if (!name)
      return;
    const loadIcon = async () => {
      const urlRegex = /^https?:\/\/(?:[^/]+(?:\.[^/]+)*)?\/?[^\s]*$/;
      const isRemoteIcon = urlRegex.test(name);
      if (isRemoteIcon) {
        setIconSrc(name);
        return;
      }
      const iconPath = `../../assets/icons/${name}.svg`;
      if (icons[iconPath]) {
        const module = await icons[iconPath]();
        setIconSrc(module.default);
      } else {
        console.warn(`Icon "${name}" not found`);
        setIconSrc(null);
      }
    };
    loadIcon();
  }, [name]);
  if (!iconSrc) {
    return null;
  }
  return /* @__PURE__ */ jsx(
    "img",
    {
      className: `${filter} ${className ? className : ""}`,
      src: iconSrc,
      width: definedWidth,
      height: definedHeight,
      ...props
    }
  );
};
export {
  Icon
};
//# sourceMappingURL=Icon.esm.js.map