dev_agent
a453a84231
CI / ci (push) Successful in 1m30s
Co-authored-by: dev_agent <dev_agent@cubecraftlabs.com> Co-committed-by: dev_agent <dev_agent@cubecraftlabs.com>
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} />
|
|
}
|