24 lines
820 B
JavaScript
24 lines
820 B
JavaScript
import { html } from 'htm/preact'
|
|
import { ICONS } from '#tofu/const/ICONS.js'
|
|
|
|
// The only file that knows the icon set. Every other component asks for a name.
|
|
// An unknown name must never break the page: it logs and renders nothing.
|
|
export function Icon({ name }) {
|
|
const shape = ICONS[name]
|
|
if (!shape) {
|
|
console.error(`Icon: unknown icon name "${name}"`)
|
|
return null
|
|
}
|
|
// Decorative on purpose: the accessible text is written next to the icon by the
|
|
// caller (a visually hidden label inside the button), so the svg stays hidden
|
|
// from assistive technologies and out of the tab order.
|
|
return html`<svg
|
|
class="icon"
|
|
viewBox="0 0 24 24"
|
|
aria-hidden="true"
|
|
focusable="false"
|
|
stroke="currentColor"
|
|
fill="none"
|
|
dangerouslySetInnerHTML=${{ __html: shape }}
|
|
></svg>`
|
|
}
|