168 lines
3.4 KiB
TypeScript
168 lines
3.4 KiB
TypeScript
import { FunctionalComponent } from 'preact';
|
|
import { IconType } from '@standardnotes/snjs';
|
|
|
|
import {
|
|
AccessibilityIcon,
|
|
AccountCircleIcon,
|
|
AddIcon,
|
|
ArchiveIcon,
|
|
ArrowLeftIcon,
|
|
ArrowsSortDownIcon,
|
|
ArrowsSortUpIcon,
|
|
AuthenticatorIcon,
|
|
CheckBoldIcon,
|
|
CheckCircleIcon,
|
|
CheckIcon,
|
|
ChevronDownIcon,
|
|
ChevronRightIcon,
|
|
CloseIcon,
|
|
CloudOffIcon,
|
|
CodeIcon,
|
|
CopyIcon,
|
|
DownloadIcon,
|
|
EditorIcon,
|
|
EmailIcon,
|
|
EyeIcon,
|
|
EyeOffIcon,
|
|
HashtagIcon,
|
|
HelpIcon,
|
|
HistoryIcon,
|
|
InfoIcon,
|
|
KeyboardIcon,
|
|
LinkOffIcon,
|
|
ListBulleted,
|
|
ListedIcon,
|
|
LockFilledIcon,
|
|
LockIcon,
|
|
MarkdownIcon,
|
|
MenuArrowDownAlt,
|
|
MenuArrowDownIcon,
|
|
MenuArrowRight,
|
|
MenuCloseIcon,
|
|
MoreIcon,
|
|
NotesIcon,
|
|
PasswordIcon,
|
|
PencilOffIcon,
|
|
PinFilledIcon,
|
|
PinIcon,
|
|
PlainTextIcon,
|
|
PremiumFeatureIcon,
|
|
RestoreIcon,
|
|
RichTextIcon,
|
|
SecurityIcon,
|
|
ServerIcon,
|
|
SettingsIcon,
|
|
SignInIcon,
|
|
SignOutIcon,
|
|
SpreadsheetsIcon,
|
|
StarIcon,
|
|
SyncIcon,
|
|
TasksIcon,
|
|
ThemesIcon,
|
|
TrashFilledIcon,
|
|
TrashIcon,
|
|
TrashSweepIcon,
|
|
TuneIcon,
|
|
UnarchiveIcon,
|
|
UnpinIcon,
|
|
UserIcon,
|
|
UserSwitch,
|
|
WarningIcon,
|
|
WindowIcon,
|
|
} from '@standardnotes/stylekit';
|
|
|
|
const ICONS = {
|
|
'account-circle': AccountCircleIcon,
|
|
'arrow-left': ArrowLeftIcon,
|
|
'arrows-sort-down': ArrowsSortDownIcon,
|
|
'arrows-sort-up': ArrowsSortUpIcon,
|
|
'check-bold': CheckBoldIcon,
|
|
'check-circle': CheckCircleIcon,
|
|
'chevron-down': ChevronDownIcon,
|
|
'chevron-right': ChevronRightIcon,
|
|
'cloud-off': CloudOffIcon,
|
|
'eye-off': EyeOffIcon,
|
|
'link-off': LinkOffIcon,
|
|
'list-bulleted': ListBulleted,
|
|
'lock-filled': LockFilledIcon,
|
|
'menu-arrow-down-alt': MenuArrowDownAlt,
|
|
'menu-arrow-down': MenuArrowDownIcon,
|
|
'menu-arrow-right': MenuArrowRight,
|
|
'menu-close': MenuCloseIcon,
|
|
'pencil-off': PencilOffIcon,
|
|
'pin-filled': PinFilledIcon,
|
|
'plain-text': PlainTextIcon,
|
|
'premium-feature': PremiumFeatureIcon,
|
|
'rich-text': RichTextIcon,
|
|
'trash-filled': TrashFilledIcon,
|
|
'trash-sweep': TrashSweepIcon,
|
|
'user-switch': UserSwitch,
|
|
accessibility: AccessibilityIcon,
|
|
add: AddIcon,
|
|
archive: ArchiveIcon,
|
|
authenticator: AuthenticatorIcon,
|
|
check: CheckIcon,
|
|
close: CloseIcon,
|
|
code: CodeIcon,
|
|
copy: CopyIcon,
|
|
download: DownloadIcon,
|
|
editor: EditorIcon,
|
|
email: EmailIcon,
|
|
eye: EyeIcon,
|
|
hashtag: HashtagIcon,
|
|
help: HelpIcon,
|
|
history: HistoryIcon,
|
|
info: InfoIcon,
|
|
keyboard: KeyboardIcon,
|
|
listed: ListedIcon,
|
|
lock: LockIcon,
|
|
markdown: MarkdownIcon,
|
|
more: MoreIcon,
|
|
notes: NotesIcon,
|
|
password: PasswordIcon,
|
|
pin: PinIcon,
|
|
restore: RestoreIcon,
|
|
security: SecurityIcon,
|
|
server: ServerIcon,
|
|
settings: SettingsIcon,
|
|
signIn: SignInIcon,
|
|
signOut: SignOutIcon,
|
|
spellcheck: NotesIcon,
|
|
spreadsheets: SpreadsheetsIcon,
|
|
star: StarIcon,
|
|
sync: SyncIcon,
|
|
tasks: TasksIcon,
|
|
themes: ThemesIcon,
|
|
trash: TrashIcon,
|
|
tune: TuneIcon,
|
|
unarchive: UnarchiveIcon,
|
|
unpin: UnpinIcon,
|
|
user: UserIcon,
|
|
warning: WarningIcon,
|
|
window: WindowIcon,
|
|
};
|
|
|
|
type Props = {
|
|
type: IconType;
|
|
className?: string;
|
|
ariaLabel?: string;
|
|
};
|
|
|
|
export const Icon: FunctionalComponent<Props> = ({
|
|
type,
|
|
className = '',
|
|
ariaLabel,
|
|
}) => {
|
|
const IconComponent = ICONS[type as keyof typeof ICONS];
|
|
if (!IconComponent) {
|
|
return null;
|
|
}
|
|
return (
|
|
<IconComponent
|
|
className={`sn-icon ${className}`}
|
|
role="img"
|
|
{...(ariaLabel ? { 'aria-label': ariaLabel } : {})}
|
|
/>
|
|
);
|
|
};
|