53 lines
1.5 KiB
TypeScript
53 lines
1.5 KiB
TypeScript
// components/icons/DynamicIcon.tsx
|
|
import React from "react";
|
|
import * as TablerIcons from "@tabler/icons-react";
|
|
|
|
export interface DynamicIconProps {
|
|
iconName: string;
|
|
size?: number;
|
|
color?: string;
|
|
className?: string;
|
|
stroke?: number;
|
|
}
|
|
|
|
/**
|
|
* 🔥 DynamicIcon - Reusable component untuk merender ikon @tabler/icons-react secara dinamis
|
|
* @param iconName - Nama ikon (harus sesuai dengan nama ikon dari @tabler/icons-react, contoh: "IconUsers")
|
|
* @param size - Ukuran ikon (default: 24)
|
|
* @param color - Warna ikon (opsional)
|
|
* @param className - CSS class tambahan (opsional)
|
|
* @param stroke - Ketebalan garis (opsional, default dari library)
|
|
*/
|
|
const DynamicIcon: React.FC<DynamicIconProps> = ({
|
|
iconName,
|
|
size = 32,
|
|
color,
|
|
className = "", // Empty string default, not an icon name
|
|
stroke, // This will be passed as strokeWidth
|
|
}) => {
|
|
// Safety check: Ensure the iconName exists in TablerIcons
|
|
if (!(iconName in TablerIcons)) {
|
|
console.warn(`Icon "${iconName}" not found in @tabler/icons-react library`);
|
|
return null;
|
|
}
|
|
|
|
const IconComponent = TablerIcons[
|
|
iconName as keyof typeof TablerIcons
|
|
] as React.ComponentType<{
|
|
size?: number;
|
|
color?: string;
|
|
className?: string;
|
|
strokeWidth?: number; // Correct prop name for Tabler icons
|
|
}>;
|
|
|
|
return (
|
|
<IconComponent
|
|
size={size}
|
|
color={color}
|
|
className={className}
|
|
strokeWidth={stroke} // Pass stroke as strokeWidth
|
|
/>
|
|
);
|
|
};
|
|
|
|
export default DynamicIcon; |