126 lines
5.3 KiB
TypeScript
126 lines
5.3 KiB
TypeScript
import type { ComponentType, SVGProps } from "react";
|
|
import ArrowForward from "@material-symbols/svg-400/rounded/arrow_forward.svg?react";
|
|
import CalendarMonth from "@material-symbols/svg-400/rounded/calendar_month.svg?react";
|
|
import CalendarMonthFill from "@material-symbols/svg-400/rounded/calendar_month-fill.svg?react";
|
|
import Check from "@material-symbols/svg-400/rounded/check.svg?react";
|
|
import ChevronLeft from "@material-symbols/svg-400/rounded/chevron_left.svg?react";
|
|
import ChevronRight from "@material-symbols/svg-400/rounded/chevron_right.svg?react";
|
|
import Close from "@material-symbols/svg-400/rounded/close.svg?react";
|
|
import CloudOff from "@material-symbols/svg-400/rounded/cloud_off.svg?react";
|
|
import Description from "@material-symbols/svg-400/rounded/description.svg?react";
|
|
import Download from "@material-symbols/svg-400/rounded/download.svg?react";
|
|
import ErrorIcon from "@material-symbols/svg-400/rounded/error.svg?react";
|
|
import EventBusy from "@material-symbols/svg-400/rounded/event_busy.svg?react";
|
|
import EventRepeat from "@material-symbols/svg-400/rounded/event_repeat.svg?react";
|
|
import FolderOpen from "@material-symbols/svg-400/rounded/folder_open.svg?react";
|
|
import FilterList from "@material-symbols/svg-400/rounded/filter_list.svg?react";
|
|
import Groups from "@material-symbols/svg-400/rounded/groups.svg?react";
|
|
import GroupsFill from "@material-symbols/svg-400/rounded/groups-fill.svg?react";
|
|
import Info from "@material-symbols/svg-400/rounded/info.svg?react";
|
|
import KeyboardArrowDown from "@material-symbols/svg-400/rounded/keyboard_arrow_down.svg?react";
|
|
import LocationOn from "@material-symbols/svg-400/rounded/location_on.svg?react";
|
|
import MobileArrowDown from "@material-symbols/svg-400/rounded/mobile_arrow_down.svg?react";
|
|
import MoreHoriz from "@material-symbols/svg-400/rounded/more_horiz.svg?react";
|
|
import MoreVert from "@material-symbols/svg-400/rounded/more_vert.svg?react";
|
|
import OpenInNew from "@material-symbols/svg-400/rounded/open_in_new.svg?react";
|
|
import Person from "@material-symbols/svg-400/rounded/person.svg?react";
|
|
import Refresh from "@material-symbols/svg-400/rounded/refresh.svg?react";
|
|
import Schedule from "@material-symbols/svg-400/rounded/schedule.svg?react";
|
|
import Search from "@material-symbols/svg-400/rounded/search.svg?react";
|
|
import SearchOff from "@material-symbols/svg-400/rounded/search_off.svg?react";
|
|
import UploadFile from "@material-symbols/svg-400/rounded/upload_file.svg?react";
|
|
|
|
import ContentCopy from "@material-symbols/svg-400/rounded/content_copy.svg?react";
|
|
import Difference from "@material-symbols/svg-400/rounded/difference.svg?react";
|
|
import Share from "@material-symbols/svg-400/rounded/share.svg?react";
|
|
import Visibility from "@material-symbols/svg-400/rounded/visibility.svg?react";
|
|
import VisibilityOff from "@material-symbols/svg-400/rounded/visibility_off.svg?react";
|
|
|
|
import LinkIcon from "@material-symbols/svg-400/rounded/link.svg?react";
|
|
import PersonSearch from "@material-symbols/svg-400/rounded/person_search.svg?react";
|
|
import MeetingRoom from "@material-symbols/svg-400/rounded/meeting_room.svg?react";
|
|
import DoorOpen from "@material-symbols/svg-400/rounded/door_open.svg?react";
|
|
import History from "@material-symbols/svg-400/rounded/history.svg?react";
|
|
import School from "@material-symbols/svg-400/rounded/school.svg?react";
|
|
import HourglassTop from "@material-symbols/svg-400/rounded/hourglass_top.svg?react";
|
|
import TravelExplore from "@material-symbols/svg-400/rounded/travel_explore.svg?react";
|
|
import TravelExploreFill from "@material-symbols/svg-400/rounded/travel_explore-fill.svg?react";
|
|
|
|
type Svg = ComponentType<SVGProps<SVGSVGElement>>;
|
|
|
|
const icons = {
|
|
arrow_forward: ArrowForward,
|
|
calendar_month: CalendarMonth,
|
|
check: Check,
|
|
chevron_left: ChevronLeft,
|
|
chevron_right: ChevronRight,
|
|
close: Close,
|
|
cloud_off: CloudOff,
|
|
description: Description,
|
|
download: Download,
|
|
error: ErrorIcon,
|
|
event_busy: EventBusy,
|
|
event_repeat: EventRepeat,
|
|
filter_list: FilterList,
|
|
folder_open: FolderOpen,
|
|
groups: Groups,
|
|
info: Info,
|
|
keyboard_arrow_down: KeyboardArrowDown,
|
|
location_on: LocationOn,
|
|
mobile_arrow_down: MobileArrowDown,
|
|
more_horiz: MoreHoriz,
|
|
more_vert: MoreVert,
|
|
open_in_new: OpenInNew,
|
|
person: Person,
|
|
refresh: Refresh,
|
|
schedule: Schedule,
|
|
search: Search,
|
|
search_off: SearchOff,
|
|
upload_file: UploadFile,
|
|
content_copy: ContentCopy,
|
|
difference: Difference,
|
|
share: Share,
|
|
visibility: Visibility,
|
|
visibility_off: VisibilityOff,
|
|
link: LinkIcon,
|
|
person_search: PersonSearch,
|
|
meeting_room: MeetingRoom,
|
|
door_open: DoorOpen,
|
|
history: History,
|
|
school: School,
|
|
hourglass_top: HourglassTop,
|
|
travel_explore: TravelExplore,
|
|
} satisfies Record<string, Svg>;
|
|
|
|
// Filled variants for selected states (navigation, toggles), per Material Symbols FILL axis.
|
|
const filled: Partial<Record<IconName, Svg>> = {
|
|
calendar_month: CalendarMonthFill,
|
|
groups: GroupsFill,
|
|
travel_explore: TravelExploreFill,
|
|
};
|
|
|
|
export type IconName = keyof typeof icons;
|
|
|
|
export function Icon({
|
|
name,
|
|
size = 24,
|
|
fill = false,
|
|
className,
|
|
}: {
|
|
name: IconName;
|
|
size?: number;
|
|
fill?: boolean;
|
|
className?: string;
|
|
}) {
|
|
const Glyph = (fill && filled[name]) || icons[name];
|
|
return (
|
|
<Glyph
|
|
className={className ? `icon ${className}` : "icon"}
|
|
width={size}
|
|
height={size}
|
|
aria-hidden="true"
|
|
focusable="false"
|
|
/>
|
|
);
|
|
}
|