fixes #6033; Adds type safety for icon names

ohcnetwork · Aug 9, 2023 · 7e39537 · 7e39537
1 parent 7ac96fd
commit 7e39537
Showing 1 changed file with 13 additions and 4 deletions.
diff --git a/src/CAREUI/icons/CareIcon.tsx b/src/CAREUI/icons/CareIcon.tsx
@@ -1,7 +1,12 @@
 import { transformIcons } from "./icon";
 import { useEffect } from "react";
 
+import iconData from "./UniconPaths.json";
+
+export type IconName = keyof typeof iconData;
+
 export interface CareIconProps {
+  icon?: IconName;
   className?: string | undefined;
   onClick?: React.MouseEventHandler<HTMLSpanElement> | undefined;
 }
@@ -14,11 +19,15 @@ export interface CareIconProps {
  *
  * @see [icon library](https://iconscout.com/unicons/)
  */
-export default function CareIcon({ className, onClick }: CareIconProps) {
-  useEffect(() => transformIcons(), [className]);
+export default function CareIcon({ icon, className, onClick }: CareIconProps) {
+  const effectiveClassName = icon
+    ? `care-${icon} ${className ?? ""}`
+    : className;
+
+  useEffect(() => transformIcons(), [effectiveClassName]);
   return (
-    <span onClick={onClick} key={className}>
-      <i className={`care ${className}`} />
+    <span onClick={onClick} key={effectiveClassName}>
+      <i className={`care ${effectiveClassName}`} />
     </span>
   );
 }