48 lines
1.2 KiB
TypeScript
48 lines
1.2 KiB
TypeScript
import type { ComponentType, SVGProps } from "react";
|
|
|
|
import {
|
|
CloseGlyph,
|
|
ErrorGlyph,
|
|
InfoGlyph,
|
|
MenuGlyph,
|
|
NextGlyph,
|
|
PreviousGlyph,
|
|
SearchGlyph,
|
|
SuccessGlyph,
|
|
WarningGlyph,
|
|
} from "./vendors/lucide.js";
|
|
|
|
export type SemanticIconProps = Readonly<{
|
|
label?: string;
|
|
size?: "small" | "medium" | "large";
|
|
}>;
|
|
|
|
function createSemanticIcon(
|
|
Glyph: ComponentType<SVGProps<SVGSVGElement>>,
|
|
) {
|
|
return function SemanticIcon({
|
|
label,
|
|
size = "medium",
|
|
}: SemanticIconProps) {
|
|
return (
|
|
<Glyph
|
|
aria-hidden={label ? undefined : "true"}
|
|
aria-label={label}
|
|
className={`ui-icon ui-icon--${size}`}
|
|
focusable="false"
|
|
role={label ? "img" : undefined}
|
|
/>
|
|
);
|
|
};
|
|
}
|
|
|
|
export const MenuIcon = createSemanticIcon(MenuGlyph);
|
|
export const CloseIcon = createSemanticIcon(CloseGlyph);
|
|
export const WarningIcon = createSemanticIcon(WarningGlyph);
|
|
export const SuccessIcon = createSemanticIcon(SuccessGlyph);
|
|
export const ErrorIcon = createSemanticIcon(ErrorGlyph);
|
|
export const InfoIcon = createSemanticIcon(InfoGlyph);
|
|
export const SearchIcon = createSemanticIcon(SearchGlyph);
|
|
export const PreviousIcon = createSemanticIcon(PreviousGlyph);
|
|
export const NextIcon = createSemanticIcon(NextGlyph);
|