44 lines
1.2 KiB
TypeScript
44 lines
1.2 KiB
TypeScript
import React from 'react';
|
|
import { LucideIcon } from 'lucide-react';
|
|
import { Box, BoxProps } from './Box';
|
|
|
|
interface IconProps extends Omit<BoxProps<'svg'>, 'children' | 'as'> {
|
|
icon: LucideIcon;
|
|
size?: number | string;
|
|
color?: string;
|
|
strokeWidth?: number;
|
|
}
|
|
|
|
export function Icon({ icon: LucideIcon, size = 4, color, className = '', style, ...props }: IconProps) {
|
|
const sizeMap: Record<string | number, string> = {
|
|
3: 'w-3 h-3',
|
|
3.5: 'w-3.5 h-3.5',
|
|
4: 'w-4 h-4',
|
|
5: 'w-5 h-5',
|
|
6: 'w-6 h-6',
|
|
7: 'w-7 h-7',
|
|
8: 'w-8 h-8',
|
|
10: 'w-10 h-10',
|
|
12: 'w-12 h-12',
|
|
16: 'w-16 h-16',
|
|
'full': 'w-full h-full'
|
|
};
|
|
|
|
const sizeClass = sizeMap[size] || 'w-4 h-4';
|
|
|
|
// If color starts with 'text-', it's a tailwind class, so pass it as color prop to Box
|
|
const isTailwindColor = typeof color === 'string' && color.startsWith('text-');
|
|
const combinedStyle = color && !isTailwindColor ? { color, ...style } : style;
|
|
const boxColor = isTailwindColor ? color : undefined;
|
|
|
|
return (
|
|
<Box
|
|
as={LucideIcon}
|
|
className={`${sizeClass} ${className}`}
|
|
style={combinedStyle}
|
|
color={boxColor}
|
|
{...props}
|
|
/>
|
|
);
|
|
}
|