71 lines
1.6 KiB
TypeScript
71 lines
1.6 KiB
TypeScript
import { HTMLAttributes } from "react"
|
|
import { MaterialIconName, materialIcons } from "./generated"
|
|
import { VariantProps } from "class-variance-authority"
|
|
import { iconVariants } from "../variants"
|
|
import styles from "./index.module.css"
|
|
|
|
export interface MaterialIconProps
|
|
extends
|
|
Omit<HTMLAttributes<HTMLOrSVGElement>, "color" | "id">,
|
|
VariantProps<typeof iconVariants> {
|
|
icon: MaterialIconName
|
|
size?: number
|
|
styleName?: "outlined" | "rounded" | "sharp"
|
|
isFilled?: boolean
|
|
}
|
|
|
|
export type MaterialIconSetIconProps = Omit<MaterialIconProps, "icon">
|
|
|
|
export function MaterialIcon({
|
|
icon,
|
|
size = 24,
|
|
styleName = "outlined",
|
|
color = "CurrentColor",
|
|
isFilled,
|
|
...props
|
|
}: MaterialIconProps) {
|
|
const iconStyles = materialIcons[icon]
|
|
|
|
if (!iconStyles) {
|
|
console.warn(`Icon "${icon}" not found in registry`)
|
|
return null
|
|
}
|
|
|
|
const styleVariants = iconStyles[styleName]
|
|
|
|
if (!styleVariants) {
|
|
console.warn(`Icon "${icon}" does not have style "${styleName}"`)
|
|
return null
|
|
}
|
|
|
|
const IconComponent = isFilled ? styleVariants.filled : styleVariants.outlined
|
|
|
|
if (!IconComponent) {
|
|
console.warn(
|
|
`Icon "${icon}" does not have ${
|
|
isFilled ? "filled" : "outlined"
|
|
} variant for style "${styleName}"`
|
|
)
|
|
return null
|
|
}
|
|
|
|
const iconClassName = iconVariants({ color })
|
|
|
|
return (
|
|
<span
|
|
data-testid="MaterialIcon"
|
|
data-icon-name={icon}
|
|
className={`${styles.iconWrapper}`}
|
|
{...props}
|
|
>
|
|
<IconComponent
|
|
width={size}
|
|
height={size}
|
|
className={iconClassName}
|
|
aria-hidden
|
|
focusable={false}
|
|
/>
|
|
</span>
|
|
)
|
|
}
|