22 lines
879 B
TypeScript
22 lines
879 B
TypeScript
|
import type { LucideIcon } from 'lucide-react'
|
||
|
|
import styles from './Icon.module.css'
|
||
|
|
|
||
|
|
export type IconSize = 'nav' | 'inline'
|
||
|
|
|
||
|
|
export type IconProps = {
|
||
|
|
// A lucide-react icon component, e.g. `import { House } from 'lucide-react'`.
|
||
|
|
icon: LucideIcon
|
||
|
|
// nav = 22 px (bottom bar, sidebar); inline = 16 px (beside text).
|
||
|
|
size?: IconSize
|
||
|
|
// Accessible name. Without one the icon is decorative and hidden.
|
||
|
|
label?: string
|
||
|
|
className?: string
|
||
|
|
}
|
||
|
|
|
||
|
|
// Lucide icon at the handoff's stroke width 2.75, sized by the stylesheet.
|
||
|
|
export function Icon({ icon: LucideGlyph, size = 'inline', label, className }: IconProps) {
|
||
|
|
const classes = [styles.icon, styles[size], className].filter(Boolean).join(' ')
|
||
|
|
const a11y = label === undefined ? { 'aria-hidden': true } : { role: 'img', 'aria-label': label }
|
||
|
|
return <LucideGlyph strokeWidth={2.75} className={classes} {...a11y} />
|
||
|
|
}
|