Refactor Icons Implementation

src/CAREUI/icons/CareIcon.tsx

@@ -1,13 +1,12 @@
 import iconData from "./UniconPaths.json";
-import { transformIcons } from "./icon";
-import { useEffect } from "react";
+import "./icon.css";
 
 export type IconName = keyof typeof iconData;
 
 export interface CareIconProps {
   icon: IconName;
-  className?: string | undefined;
-  onClick?: React.MouseEventHandler<HTMLSpanElement> | undefined;
+  className?: string;
+  onClick?: React.MouseEventHandler<SVGSVGElement>;
   id?: string;
 }
 
@@ -25,12 +24,32 @@ export default function CareIcon({
   className,
   onClick,
 }: CareIconProps) {
-  const effectiveClassName = icon
-    ? `care-${icon} ${className ?? ""}`
-    : className;
+  // TODO: fill & strokeWidth are defined for only one icon
+  // Rethink Implementation
+  const [viewBox, path, fill, strokeWidth] = iconData[icon] as [
+    number,
+    string,
+    boolean | undefined,
+    number | undefined,
+  ];
+
+  const svgClassName = `care-svg-icon__baseline ${className || ""}`.trim();
 
-  useEffect(() => transformIcons(), [effectiveClassName]);
   return (
-    <i id={id} className={`care ${effectiveClassName}`} onClick={onClick} />
+    <svg
+      id={id}
+      className={`${icon} ${svgClassName}`}
+      role="img"
+      xmlns="http://www.w3.org/2000/svg"
+      onClick={onClick}
+      viewBox={`0 0 ${viewBox} ${viewBox}`}
+    >
+      <path
+        d={path}
+        fill={fill === false ? "none" : "currentColor"}
+        stroke={fill === false ? "currentColor" : undefined}
+        strokeWidth={fill === false ? strokeWidth : undefined}
+      />
+    </svg>
   );
 }