37 lines
1.1 KiB
TypeScript
37 lines
1.1 KiB
TypeScript
import { cn } from '@/lib/utils';
|
|
|
|
type IconProps = {
|
|
/** Material Symbols ligature name, e.g. `call` or `arrow_forward`. */
|
|
name: string;
|
|
filled?: boolean;
|
|
/** Size and color utilities, e.g. `text-xl text-primary`. */
|
|
className?: string;
|
|
};
|
|
|
|
/**
|
|
* Google's Material Symbols stylesheet is unlayered and fixes the glyph at
|
|
* 24px, which beats Tailwind's layered utilities. The glyph therefore
|
|
* inherits its size from this wrapper, where utilities apply normally.
|
|
*/
|
|
export default function Icon({ name, filled = false, className }: IconProps) {
|
|
return (
|
|
<span
|
|
aria-hidden="true"
|
|
className={cn(
|
|
'inline-flex shrink-0 leading-none select-none',
|
|
className,
|
|
)}
|
|
>
|
|
<span
|
|
className="material-symbols-outlined"
|
|
style={{
|
|
fontSize: 'inherit',
|
|
fontVariationSettings: filled ? "'FILL' 1" : undefined,
|
|
}}
|
|
>
|
|
{name}
|
|
</span>
|
|
</span>
|
|
);
|
|
}
|