@clubmed/trident-icons 1.4.0-beta.2 → 1.4.0-beta.3

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # ClubMed React UI components changelog
 
+# [1.4.0-beta.3](https://scm.clubmed.com/clubmed/ui/trident-icons/compare/v1.4.0-beta.2...v1.4.0-beta.3) (2025-10-13)
+
+
+### Features
+
+* remove data-name ([7d3c78c](https://scm.clubmed.com/clubmed/ui/trident-icons/-/commit/7d3c78c219202253831d570437ed23d02bd5445e))
+* update component ([21ab1fb](https://scm.clubmed.com/clubmed/ui/trident-icons/-/commit/21ab1fb6377bf0166e9a5763bd195385af6f3386))
+
 # [1.4.0-beta.2](https://scm.clubmed.com/clubmed/ui/trident-icons/compare/v1.4.0-beta.1...v1.4.0-beta.2) (2025-10-10)
 
 

package/hooks/useIconOrientation.js

@@ -22,7 +22,7 @@ function e({
   intrinsicRotation: t = 0,
   intrinsicClassName: i = ""
 }) {
-  return s && n[s] && (t = t || n[s].intrinsicRotation || 0, i = i || n[s].intrinsicClassName || ""), {
+  return s && n[s] && (t = t || n[s].intrinsicRotation, i = i || n[s].intrinsicClassName), {
     intrinsicClassName: i,
     transform: `rotate(${r + t}deg)`,
     rotate: `${r + t}deg`

package/hooks/useIconOrientation.js.map

@@ -1 +1 @@
-{"version":3,"file":"useIconOrientation.js","sources":["../../lib/hooks/useIconOrientation.ts"],"sourcesContent":["export const ORIENTATIONS = {\n  left: {\n    intrinsicRotation: 180,\n    intrinsicClassName: 'rtl:-scale-x-100',\n  },\n  up: {\n    intrinsicRotation: 270,\n    intrinsicClassName: '',\n  },\n  down: {\n    intrinsicRotation: 90,\n    intrinsicClassName: '',\n  },\n  right: {\n    intrinsicClassName: 'rtl:-scale-x-100',\n    intrinsicRotation: 0,\n  },\n} as const;\n\nexport type IconOrientations = keyof typeof ORIENTATIONS;\n\nexport interface IconOrientationProps {\n  orientation?: IconOrientations;\n  rotation?: number;\n  intrinsicRotation?: number;\n  intrinsicClassName?: string;\n}\n\nexport function useIconOrientation({\n  orientation,\n  rotation = 0,\n  intrinsicRotation = 0,\n  intrinsicClassName = '',\n}: IconOrientationProps) {\n  if (orientation && ORIENTATIONS[orientation]) {\n    intrinsicRotation = intrinsicRotation || ORIENTATIONS[orientation].intrinsicRotation || 0;\n    intrinsicClassName = intrinsicClassName || ORIENTATIONS[orientation].intrinsicClassName || '';\n  }\n\n  return {\n    intrinsicClassName,\n    transform: `rotate(${rotation + intrinsicRotation}deg)`,\n    rotate: `${rotation + intrinsicRotation}deg`,\n  };\n}\n"],"names":["ORIENTATIONS","useIconOrientation","orientation","rotation","intrinsicRotation","intrinsicClassName"],"mappings":"AAAO,MAAMA,IAAe;AAAA,EAC1B,MAAM;AAAA,IACJ,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,EACtB;AAAA,EACA,IAAI;AAAA,IACF,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,EACtB;AAAA,EACA,MAAM;AAAA,IACJ,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,EACtB;AAAA,EACA,OAAO;AAAA,IACL,oBAAoB;AAAA,IACpB,mBAAmB;AAAA,EACrB;AACF;AAWO,SAASC,EAAmB;AAAA,EACjC,aAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,mBAAAC,IAAoB;AAAA,EACpB,oBAAAC,IAAqB;AACvB,GAAyB;AACnB,SAAAH,KAAeF,EAAaE,CAAW,MACzCE,IAAoBA,KAAqBJ,EAAaE,CAAW,EAAE,qBAAqB,GACxFG,IAAqBA,KAAsBL,EAAaE,CAAW,EAAE,sBAAsB,KAGtF;AAAA,IACL,oBAAAG;AAAA,IACA,WAAW,UAAUF,IAAWC,CAAiB;AAAA,IACjD,QAAQ,GAAGD,IAAWC,CAAiB;AAAA,EAAA;AAE3C;"}
+{"version":3,"file":"useIconOrientation.js","sources":["../../lib/hooks/useIconOrientation.ts"],"sourcesContent":["export const ORIENTATIONS = {\n  left: {\n    intrinsicRotation: 180,\n    intrinsicClassName: 'rtl:-scale-x-100',\n  },\n  up: {\n    intrinsicRotation: 270,\n    intrinsicClassName: '',\n  },\n  down: {\n    intrinsicRotation: 90,\n    intrinsicClassName: '',\n  },\n  right: {\n    intrinsicClassName: 'rtl:-scale-x-100',\n    intrinsicRotation: 0,\n  },\n} as const;\n\nexport type IconOrientations = keyof typeof ORIENTATIONS;\n\nexport interface IconOrientationProps {\n  orientation?: IconOrientations;\n  rotation?: number;\n  intrinsicRotation?: number;\n  intrinsicClassName?: string;\n}\n\nexport function useIconOrientation({\n  orientation,\n  rotation = 0,\n  intrinsicRotation = 0,\n  intrinsicClassName = '',\n}: IconOrientationProps) {\n  if (orientation && ORIENTATIONS[orientation]) {\n    intrinsicRotation = intrinsicRotation || ORIENTATIONS[orientation].intrinsicRotation;\n    intrinsicClassName = intrinsicClassName || ORIENTATIONS[orientation].intrinsicClassName;\n  }\n\n  return {\n    intrinsicClassName,\n    transform: `rotate(${rotation + intrinsicRotation}deg)`,\n    rotate: `${rotation + intrinsicRotation}deg`,\n  };\n}\n"],"names":["ORIENTATIONS","useIconOrientation","orientation","rotation","intrinsicRotation","intrinsicClassName"],"mappings":"AAAO,MAAMA,IAAe;AAAA,EAC1B,MAAM;AAAA,IACJ,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,EACtB;AAAA,EACA,IAAI;AAAA,IACF,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,EACtB;AAAA,EACA,MAAM;AAAA,IACJ,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,EACtB;AAAA,EACA,OAAO;AAAA,IACL,oBAAoB;AAAA,IACpB,mBAAmB;AAAA,EACrB;AACF;AAWO,SAASC,EAAmB;AAAA,EACjC,aAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,mBAAAC,IAAoB;AAAA,EACpB,oBAAAC,IAAqB;AACvB,GAAyB;AACnB,SAAAH,KAAeF,EAAaE,CAAW,MACrBE,IAAAA,KAAqBJ,EAAaE,CAAW,EAAE,mBAC9CG,IAAAA,KAAsBL,EAAaE,CAAW,EAAE,qBAGhE;AAAA,IACL,oBAAAG;AAAA,IACA,WAAW,UAAUF,IAAWC,CAAiB;AAAA,IACjD,QAAQ,GAAGD,IAAWC,CAAiB;AAAA,EAAA;AAE3C;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clubmed/trident-icons",
-  "version": "1.4.0-beta.2",
+  "version": "1.4.0-beta.3",
   "type": "module",
   "description": "Shared ClubMed Icons library",
   "keywords": [

package/svg/SvgIcon.d.ts

@@ -4,17 +4,18 @@ type SvgComponent = ComponentType<ComponentProps<'svg'> & {
     title?: string;
 }>;
 export interface SvgIconProps extends IconProps {
-    element: LazyExoticComponent<SvgComponent>;
-    /**
-     * default: '0 0 30 30',
-     */
-    viewBox?: string;
     /**
      * aspectRatio: 1
      */
     aspectRatio?: number;
-    intrinsicRotation?: number;
+    element: LazyExoticComponent<SvgComponent>;
     intrinsicClassName?: string;
+    intrinsicRotation?: number;
+    svgClassName?: string;
+    /**
+     * default: '0 0 30 30',
+     */
+    viewBox?: string;
 }
 export declare function SvgIcon(props: SvgIconProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/svg/SvgIcon.js

@@ -1,39 +1,39 @@
 import { jsx as t } from "react/jsx-runtime";
-import { c as h } from "../chunks/index.js";
-import { Suspense as u } from "react";
-import { useIconOrientation as x } from "../hooks/useIconOrientation.js";
-import { omit as g } from "../utils/omit.js";
-function v(n) {
+import { c as u } from "../chunks/index.js";
+import { Suspense as N } from "react";
+import { useIconOrientation as g } from "../hooks/useIconOrientation.js";
+import { omit as x } from "../utils/omit.js";
+function k(e) {
   const {
-    name: o,
-    className: i,
-    width: e = "16px",
-    color: r = "inherit",
-    style: a,
-    element: s,
-    aspectRatio: m,
+    aspectRatio: i,
+    className: o,
+    color: s = "inherit",
+    element: n,
+    name: a,
+    style: r,
+    svgClassName: m,
     viewBox: c,
-    ...l
-  } = n, { intrinsicClassName: d, transform: p } = x(n), f = `text-${r}`;
+    width: l,
+    ...d
+  } = e, { intrinsicClassName: p, rotate: f } = g(e), h = `text-${s}`;
   return /* @__PURE__ */ t(
     "span",
     {
       "aria-hidden": !0,
-      ...g(l, ["group", "orientation", "type"]),
-      className: h(
-        "inline-block shrink-0 align-middle",
-        d,
-        f,
-        i
+      ...x(d, ["group", "orientation", "type"]),
+      className: u(
+        "inline-block w-16 shrink-0 align-middle",
+        p,
+        h,
+        o
       ),
-      "data-name": "Icon",
-      "data-testid": `icon-${o}`,
-      style: { width: e, transform: p, aspectRatio: m, ...a },
-      children: /* @__PURE__ */ t(u, { children: /* @__PURE__ */ t(s, { viewBox: c }) })
+      "data-testid": `icon-${a}`,
+      style: { aspectRatio: i, width: l, ...r },
+      children: /* @__PURE__ */ t(N, { children: /* @__PURE__ */ t(n, { className: m, style: { rotate: f }, viewBox: c }) })
     }
   );
 }
 export {
-  v as SvgIcon
+  k as SvgIcon
 };
 //# sourceMappingURL=SvgIcon.js.map

package/svg/SvgIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"SvgIcon.js","sources":["../../lib/svg/SvgIcon.tsx"],"sourcesContent":["import classnames from 'classnames';\nimport { type ComponentProps, type ComponentType, type LazyExoticComponent, Suspense } from 'react';\nimport type { IconProps } from '@/IconsResolver';\nimport { useIconOrientation } from '@/hooks/useIconOrientation';\nimport { omit } from '@/utils/omit';\n\ntype SvgComponent = ComponentType<ComponentProps<'svg'> & { title?: string }>;\n\nexport interface SvgIconProps extends IconProps {\n  element: LazyExoticComponent<SvgComponent>;\n  /**\n   * default: '0 0 30 30',\n   */\n  viewBox?: string;\n  /**\n   * aspectRatio: 1\n   */\n  aspectRatio?: number;\n  intrinsicRotation?: number;\n  intrinsicClassName?: string;\n}\n\nexport function SvgIcon(props: SvgIconProps) {\n  const {\n    name,\n    className,\n    width = '16px',\n    color = 'inherit',\n    style,\n    element: SVG,\n    aspectRatio,\n    viewBox,\n    ...attrs\n  } = props;\n\n  const { intrinsicClassName, transform } = useIconOrientation(props);\n  const iconColor = `text-${color}`;\n\n  return (\n    <span\n      aria-hidden={true}\n      {...omit(attrs, ['group', 'orientation', 'type'])}\n      className={classnames(\n        'inline-block shrink-0 align-middle',\n        intrinsicClassName,\n        iconColor,\n        className,\n      )}\n      data-name=\"Icon\"\n      data-testid={`icon-${name}`}\n      style={{ width: width!, transform, aspectRatio, ...style }}\n    >\n      <Suspense>\n        <SVG viewBox={viewBox} />\n      </Suspense>\n    </span>\n  );\n}\n"],"names":["SvgIcon","props","name","className","width","color","style","SVG","aspectRatio","viewBox","attrs","intrinsicClassName","transform","useIconOrientation","iconColor","jsx","omit","classnames","Suspense"],"mappings":";;;;;AAsBO,SAASA,EAAQC,GAAqB;AACrC,QAAA;AAAA,IACJ,MAAAC;AAAA,IACA,WAAAC;AAAA,IACA,OAAAC,IAAQ;AAAA,IACR,OAAAC,IAAQ;AAAA,IACR,OAAAC;AAAA,IACA,SAASC;AAAA,IACT,aAAAC;AAAA,IACA,SAAAC;AAAA,IACA,GAAGC;AAAA,EACD,IAAAT,GAEE,EAAE,oBAAAU,GAAoB,WAAAC,EAAU,IAAIC,EAAmBZ,CAAK,GAC5Da,IAAY,QAAQT,CAAK;AAG7B,SAAA,gBAAAU;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAa;AAAA,MACZ,GAAGC,EAAKN,GAAO,CAAC,SAAS,eAAe,MAAM,CAAC;AAAA,MAChD,WAAWO;AAAA,QACT;AAAA,QACAN;AAAA,QACAG;AAAA,QACAX;AAAA,MACF;AAAA,MACA,aAAU;AAAA,MACV,eAAa,QAAQD,CAAI;AAAA,MACzB,OAAO,EAAE,OAAAE,GAAe,WAAAQ,GAAW,aAAAJ,GAAa,GAAGF,EAAM;AAAA,MAEzD,UAAC,gBAAAS,EAAAG,GAAA,EACC,UAAC,gBAAAH,EAAAR,GAAA,EAAI,SAAAE,EAAkB,CAAA,GACzB;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"SvgIcon.js","sources":["../../lib/svg/SvgIcon.tsx"],"sourcesContent":["import classnames from 'classnames';\nimport { type ComponentProps, type ComponentType, type LazyExoticComponent, Suspense } from 'react';\nimport type { IconProps } from '@/IconsResolver';\nimport { useIconOrientation } from '@/hooks/useIconOrientation';\nimport { omit } from '@/utils/omit';\n\ntype SvgComponent = ComponentType<ComponentProps<'svg'> & { title?: string }>;\n\nexport interface SvgIconProps extends IconProps {\n  /**\n   * aspectRatio: 1\n   */\n  aspectRatio?: number;\n  element: LazyExoticComponent<SvgComponent>;\n  intrinsicClassName?: string;\n  intrinsicRotation?: number;\n  svgClassName?: string;\n  /**\n   * default: '0 0 30 30',\n   */\n  viewBox?: string;\n}\n\nexport function SvgIcon(props: SvgIconProps) {\n  const {\n    aspectRatio,\n    className,\n    color = 'inherit',\n    element: SVG,\n    name,\n    style,\n    svgClassName,\n    viewBox,\n    width,\n    ...attrs\n  } = props;\n\n  const { intrinsicClassName, rotate } = useIconOrientation(props);\n  const iconColor = `text-${color}`;\n\n  return (\n    <span\n      aria-hidden={true}\n      {...omit(attrs, ['group', 'orientation', 'type'])}\n      className={classnames(\n        'inline-block w-16 shrink-0 align-middle',\n        intrinsicClassName,\n        iconColor,\n        className,\n      )}\n      data-testid={`icon-${name}`}\n      style={{ aspectRatio, width: width!, ...style }}\n    >\n      <Suspense>\n        <SVG className={svgClassName} style={{ rotate }} viewBox={viewBox} />\n      </Suspense>\n    </span>\n  );\n}\n"],"names":["SvgIcon","props","aspectRatio","className","color","SVG","name","style","svgClassName","viewBox","width","attrs","intrinsicClassName","rotate","useIconOrientation","iconColor","jsx","omit","classnames","Suspense"],"mappings":";;;;;AAuBO,SAASA,EAAQC,GAAqB;AACrC,QAAA;AAAA,IACJ,aAAAC;AAAA,IACA,WAAAC;AAAA,IACA,OAAAC,IAAQ;AAAA,IACR,SAASC;AAAA,IACT,MAAAC;AAAA,IACA,OAAAC;AAAA,IACA,cAAAC;AAAA,IACA,SAAAC;AAAA,IACA,OAAAC;AAAA,IACA,GAAGC;AAAA,EACD,IAAAV,GAEE,EAAE,oBAAAW,GAAoB,QAAAC,EAAO,IAAIC,EAAmBb,CAAK,GACzDc,IAAY,QAAQX,CAAK;AAG7B,SAAA,gBAAAY;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAa;AAAA,MACZ,GAAGC,EAAKN,GAAO,CAAC,SAAS,eAAe,MAAM,CAAC;AAAA,MAChD,WAAWO;AAAA,QACT;AAAA,QACAN;AAAA,QACAG;AAAA,QACAZ;AAAA,MACF;AAAA,MACA,eAAa,QAAQG,CAAI;AAAA,MACzB,OAAO,EAAE,aAAAJ,GAAa,OAAAQ,GAAe,GAAGH,EAAM;AAAA,MAE9C,UAAA,gBAAAS,EAACG,GACC,EAAA,UAAA,gBAAAH,EAACX,GAAI,EAAA,WAAWG,GAAc,OAAO,EAAE,QAAAK,EAAU,GAAA,SAAAJ,EAAA,CAAkB,EACrE,CAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/svg-use/SvgUseIcon.d.ts

@@ -1,15 +1,16 @@
 import { IconProps } from '../IconsResolver';
 export interface SvgUseIconProps extends IconProps {
+    /**
+     * default: 1
+     */
+    aspectRatio?: number;
+    intrinsicClassName?: string;
+    intrinsicRotation?: number;
+    svgClassName?: string;
     url: string;
     /**
      * default: '0 0 30 30',
      */
     viewBox?: string;
-    /**
-     * aspectRatio: 1
-     */
-    aspectRatio?: number;
-    intrinsicRotation?: number;
-    intrinsicClassName?: string;
 }
 export declare function SvgUseIcon(props: SvgUseIconProps): import("react/jsx-runtime").JSX.Element;

package/svg-use/SvgUseIcon.js

@@ -1,38 +1,38 @@
 import { jsx as t } from "react/jsx-runtime";
-import { c as u } from "../chunks/index.js";
-import { useIconOrientation as h } from "../hooks/useIconOrientation.js";
+import { c as h } from "../chunks/index.js";
+import { useIconOrientation as g } from "../hooks/useIconOrientation.js";
 import { omit as x } from "../utils/omit.js";
-function I(i) {
+function w(e) {
   const {
+    aspectRatio: i,
+    className: s,
+    color: o = "inherit",
     name: n,
-    className: o,
-    width: e = "16px",
-    color: r = "inherit",
-    style: s,
-    url: a,
-    aspectRatio: c,
-    viewBox: m,
-    ...l
-  } = i, { intrinsicClassName: d, transform: p } = h(i), f = `text-${r}`;
+    style: a,
+    svgClassName: r,
+    url: c,
+    viewBox: l,
+    width: m,
+    ...d
+  } = e, { intrinsicClassName: p, rotate: u } = g(e), f = `text-${o}`;
   return /* @__PURE__ */ t(
     "span",
     {
       "aria-hidden": !0,
-      ...x(l, ["group", "orientation", "type"]),
-      className: u(
-        "inline-block shrink-0 align-middle",
-        d,
+      ...x(d, ["group", "orientation", "type"]),
+      className: h(
+        "inline-block w-16 shrink-0 align-middle",
+        p,
         f,
-        o
+        s
       ),
-      "data-name": "Icon",
       "data-testid": `icon-${n}`,
-      style: { width: e, transform: p, aspectRatio: c, ...s },
-      children: /* @__PURE__ */ t("svg", { viewBox: m, children: /* @__PURE__ */ t("use", { xlinkHref: a }) })
+      style: { aspectRatio: i, width: m, ...a },
+      children: /* @__PURE__ */ t("svg", { className: r, style: { rotate: u }, viewBox: l, children: /* @__PURE__ */ t("use", { xlinkHref: c }) })
     }
   );
 }
 export {
-  I as SvgUseIcon
+  w as SvgUseIcon
 };
 //# sourceMappingURL=SvgUseIcon.js.map

package/svg-use/SvgUseIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"SvgUseIcon.js","sources":["../../lib/svg-use/SvgUseIcon.tsx"],"sourcesContent":["import classnames from 'classnames';\nimport type { IconProps } from '@/IconsResolver';\nimport { useIconOrientation } from '@/hooks/useIconOrientation';\nimport { omit } from '@/utils/omit';\n\nexport interface SvgUseIconProps extends IconProps {\n  url: string;\n  /**\n   * default: '0 0 30 30',\n   */\n  viewBox?: string;\n  /**\n   * aspectRatio: 1\n   */\n  aspectRatio?: number;\n  intrinsicRotation?: number;\n  intrinsicClassName?: string;\n}\n\nexport function SvgUseIcon(props: SvgUseIconProps) {\n  const {\n    name,\n    className,\n    width = '16px',\n    color = 'inherit',\n    style,\n    url,\n    aspectRatio,\n    viewBox,\n    ...attrs\n  } = props;\n  const { intrinsicClassName, transform } = useIconOrientation(props);\n\n  const iconColor = `text-${color}`;\n\n  return (\n    <span\n      aria-hidden={true}\n      {...omit(attrs, ['group', 'orientation', 'type'])}\n      className={classnames(\n        'inline-block shrink-0 align-middle',\n        intrinsicClassName,\n        iconColor,\n        className,\n      )}\n      data-name=\"Icon\"\n      data-testid={`icon-${name}`}\n      style={{ width: width!, transform, aspectRatio, ...style }}\n    >\n      <svg viewBox={viewBox}>\n        <use xlinkHref={url} />\n      </svg>\n    </span>\n  );\n}\n"],"names":["SvgUseIcon","props","name","className","width","color","style","url","aspectRatio","viewBox","attrs","intrinsicClassName","transform","useIconOrientation","iconColor","jsx","omit","classnames"],"mappings":";;;;AAmBO,SAASA,EAAWC,GAAwB;AAC3C,QAAA;AAAA,IACJ,MAAAC;AAAA,IACA,WAAAC;AAAA,IACA,OAAAC,IAAQ;AAAA,IACR,OAAAC,IAAQ;AAAA,IACR,OAAAC;AAAA,IACA,KAAAC;AAAA,IACA,aAAAC;AAAA,IACA,SAAAC;AAAA,IACA,GAAGC;AAAA,EACD,IAAAT,GACE,EAAE,oBAAAU,GAAoB,WAAAC,EAAU,IAAIC,EAAmBZ,CAAK,GAE5Da,IAAY,QAAQT,CAAK;AAG7B,SAAA,gBAAAU;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAa;AAAA,MACZ,GAAGC,EAAKN,GAAO,CAAC,SAAS,eAAe,MAAM,CAAC;AAAA,MAChD,WAAWO;AAAA,QACT;AAAA,QACAN;AAAA,QACAG;AAAA,QACAX;AAAA,MACF;AAAA,MACA,aAAU;AAAA,MACV,eAAa,QAAQD,CAAI;AAAA,MACzB,OAAO,EAAE,OAAAE,GAAe,WAAAQ,GAAW,aAAAJ,GAAa,GAAGF,EAAM;AAAA,MAEzD,4BAAC,OAAI,EAAA,SAAAG,GACH,4BAAC,OAAI,EAAA,WAAWF,GAAK,EACvB,CAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"SvgUseIcon.js","sources":["../../lib/svg-use/SvgUseIcon.tsx"],"sourcesContent":["import classnames from 'classnames';\nimport type { IconProps } from '@/IconsResolver';\nimport { useIconOrientation } from '@/hooks/useIconOrientation';\nimport { omit } from '@/utils/omit';\n\nexport interface SvgUseIconProps extends IconProps {\n  /**\n   * default: 1\n   */\n  aspectRatio?: number;\n  intrinsicClassName?: string;\n  intrinsicRotation?: number;\n  svgClassName?: string;\n  url: string;\n  /**\n   * default: '0 0 30 30',\n   */\n  viewBox?: string;\n}\n\nexport function SvgUseIcon(props: SvgUseIconProps) {\n  const {\n    aspectRatio,\n    className,\n    color = 'inherit',\n    name,\n    style,\n    svgClassName,\n    url,\n    viewBox,\n    width,\n    ...attrs\n  } = props;\n  const { intrinsicClassName, rotate } = useIconOrientation(props);\n\n  const iconColor = `text-${color}`;\n\n  return (\n    <span\n      aria-hidden={true}\n      {...omit(attrs, ['group', 'orientation', 'type'])}\n      className={classnames(\n        'inline-block w-16 shrink-0 align-middle',\n        intrinsicClassName,\n        iconColor,\n        className,\n      )}\n      data-testid={`icon-${name}`}\n      style={{ aspectRatio, width: width!, ...style }}\n    >\n      <svg className={svgClassName} style={{ rotate }} viewBox={viewBox}>\n        <use xlinkHref={url} />\n      </svg>\n    </span>\n  );\n}\n"],"names":["SvgUseIcon","props","aspectRatio","className","color","name","style","svgClassName","url","viewBox","width","attrs","intrinsicClassName","rotate","useIconOrientation","iconColor","jsx","omit","classnames"],"mappings":";;;;AAoBO,SAASA,EAAWC,GAAwB;AAC3C,QAAA;AAAA,IACJ,aAAAC;AAAA,IACA,WAAAC;AAAA,IACA,OAAAC,IAAQ;AAAA,IACR,MAAAC;AAAA,IACA,OAAAC;AAAA,IACA,cAAAC;AAAA,IACA,KAAAC;AAAA,IACA,SAAAC;AAAA,IACA,OAAAC;AAAA,IACA,GAAGC;AAAA,EACD,IAAAV,GACE,EAAE,oBAAAW,GAAoB,QAAAC,EAAO,IAAIC,EAAmBb,CAAK,GAEzDc,IAAY,QAAQX,CAAK;AAG7B,SAAA,gBAAAY;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAa;AAAA,MACZ,GAAGC,EAAKN,GAAO,CAAC,SAAS,eAAe,MAAM,CAAC;AAAA,MAChD,WAAWO;AAAA,QACT;AAAA,QACAN;AAAA,QACAG;AAAA,QACAZ;AAAA,MACF;AAAA,MACA,eAAa,QAAQE,CAAI;AAAA,MACzB,OAAO,EAAE,aAAAH,GAAa,OAAAQ,GAAe,GAAGJ,EAAM;AAAA,MAE9C,UAAC,gBAAAU,EAAA,OAAA,EAAI,WAAWT,GAAc,OAAO,EAAE,QAAAM,EAAO,GAAG,SAAAJ,GAC/C,UAAA,gBAAAO,EAAC,OAAI,EAAA,WAAWR,EAAK,CAAA,GACvB;AAAA,IAAA;AAAA,EAAA;AAGN;"}