Icon-Set
ui iconfoundation
Einheitlich vorkonfigurierte Wrapper um Tabler-Icons (stroke 1.75, Default-Größe 14) mit sprechenden Namen (SongIcon, BibleIcon, SearchIcon, ChevronDownIcon, SettingsIcon, …). Eine Stelle = überall gleicher Icon-Stil.
Abhängigkeiten
npm: @tabler/icons-react
Barrierefreiheit
- Icons sind dekorativ — bei eigenständiger Bedeutung das umgebende Control mit aria-label versehen.
Beispiele
Verwendung
<SearchIcon />
<ChevronDownIcon size={16} />
<SettingsIcon size={18} stroke={1.5} /> Quelldateien
components/ui/Icon.tsx tsx
import {
IconMusic,
IconBook2,
IconPhoto,
IconVideo,
IconAlignLeft,
IconLayoutGrid,
IconSearch,
IconChevronDown,
IconChevronLeft,
IconChevronRight,
IconSquareFilled,
IconCircleDot,
IconCircle,
IconPlayerStopFilled,
IconSnowflake,
IconPencil,
IconCopy,
IconPlus,
IconTrash,
IconUpload,
IconPlayerPlayFilled,
IconPlayerPauseFilled,
IconPlayerTrackPrevFilled,
IconCalendarEvent,
IconPhotoVideo,
IconPalette,
IconSettings,
IconCheck,
IconX,
IconGripVertical,
IconUserCircle,
IconKey,
IconLogout,
IconInfoCircle,
IconSubtitlesEdit,
IconSeparatorHorizontal,
IconExchange,
IconAdjustmentsHorizontal,
IconArrowBackUp,
IconCast,
IconDevices,
IconVolume,
IconVolumeOff,
IconDatabase,
IconBuildingChurch,
IconDots,
IconRefresh,
IconRestore,
IconPresentation,
IconStack2,
IconUnlink,
IconFile,
IconFileTypePdf,
IconFileMusic,
IconHeadphones,
IconBrandYoutube,
IconLink,
IconExternalLink,
IconStar,
IconStarFilled,
IconDownload,
IconPaperclip,
IconMaximize,
IconMinimize,
IconGuitarPick,
IconColumns,
IconSquare,
IconCursorText,
IconDeviceFloppy,
IconMail,
IconSend,
IconTestPipe,
type IconProps as TablerIconProps,
} from '@tabler/icons-react';
/**
* Geteilte Icon-Wrapper der Produktfamilie (1:1 aus media-presenter
* `components/Icon.tsx`, reiner Teil). Die DOMAIN-Mapper `iconForItemKind` /
* `iconForSlideKind` bleiben bewusst app-seitig — sie hängen an den Item-/
* Slide-Kinds der jeweiligen App und werden dort aus diesen Icons zusammengesetzt.
*/
export type IconProps = Omit<TablerIconProps, 'size'> & { size?: number };
const DEFAULT_SIZE = 14;
const withDefaults = (p: IconProps): TablerIconProps => ({
size: p.size ?? DEFAULT_SIZE,
stroke: 1.75,
...p,
});
export const SongIcon = (p: IconProps) => <IconMusic {...withDefaults(p)} />;
export const BibleIcon = (p: IconProps) => <IconBook2 {...withDefaults(p)} />;
export const ImageIcon = (p: IconProps) => <IconPhoto {...withDefaults(p)} />;
export const VideoIcon = (p: IconProps) => <IconVideo {...withDefaults(p)} />;
export const TextIcon = (p: IconProps) => <IconAlignLeft {...withDefaults(p)} />;
export const AllIcon = (p: IconProps) => <IconLayoutGrid {...withDefaults(p)} />;
export const SearchIcon = (p: IconProps) => <IconSearch {...withDefaults(p)} />;
export const ChevronDownIcon = (p: IconProps) => <IconChevronDown {...withDefaults(p)} />;
export const ChevronLeftIcon = (p: IconProps) => <IconChevronLeft {...withDefaults(p)} />;
export const ChevronRightIcon = (p: IconProps) => <IconChevronRight {...withDefaults(p)} />;
export const BlackIcon = (p: IconProps) => <IconSquareFilled {...withDefaults(p)} />;
export const ClearIcon = (p: IconProps) => <IconCircleDot {...withDefaults(p)} />;
export const LogoIcon = (p: IconProps) => <IconCircle {...withDefaults(p)} />;
export const StopIcon = (p: IconProps) => <IconPlayerStopFilled {...withDefaults(p)} />;
export const FreezeIcon = (p: IconProps) => <IconSnowflake {...withDefaults(p)} />;
export const EditIcon = (p: IconProps) => <IconPencil {...withDefaults(p)} />;
export const CopyIcon = (p: IconProps) => <IconCopy {...withDefaults(p)} />;
export const KeyIcon = (p: IconProps) => <IconKey {...withDefaults(p)} />;
export const PlusIcon = (p: IconProps) => <IconPlus {...withDefaults(p)} />;
export const MoreIcon = (p: IconProps) => <IconDots {...withDefaults(p)} />;
export const RefreshIcon = (p: IconProps) => <IconRefresh {...withDefaults(p)} />;
export const RestoreIcon = (p: IconProps) => <IconRestore {...withDefaults(p)} />;
export const TrashIcon = (p: IconProps) => <IconTrash {...withDefaults(p)} />;
export const UploadIcon = (p: IconProps) => <IconUpload {...withDefaults(p)} />;
export const PlayIcon = (p: IconProps) => <IconPlayerPlayFilled {...withDefaults(p)} />;
export const PauseIcon = (p: IconProps) => <IconPlayerPauseFilled {...withDefaults(p)} />;
export const RestartIcon = (p: IconProps) => <IconPlayerTrackPrevFilled {...withDefaults(p)} />;
export const EventIcon = (p: IconProps) => <IconCalendarEvent {...withDefaults(p)} />;
export const MediaIcon = (p: IconProps) => <IconPhotoVideo {...withDefaults(p)} />;
export const DesignIcon = (p: IconProps) => <IconPalette {...withDefaults(p)} />;
export const SlideIcon = (p: IconProps) => <IconPresentation {...withDefaults(p)} />;
export const CollectionIcon = (p: IconProps) => <IconStack2 {...withDefaults(p)} />;
export const UnlinkIcon = (p: IconProps) => <IconUnlink {...withDefaults(p)} />;
export const SettingsIcon = (p: IconProps) => <IconSettings {...withDefaults(p)} />;
export const CheckIcon = (p: IconProps) => <IconCheck {...withDefaults(p)} />;
export const CloseIcon = (p: IconProps) => <IconX {...withDefaults(p)} />;
export const DragHandleIcon = (p: IconProps) => <IconGripVertical {...withDefaults(p)} />;
export const ProfileIcon = (p: IconProps) => <IconUserCircle {...withDefaults(p)} />;
export const LogoutIcon = (p: IconProps) => <IconLogout {...withDefaults(p)} />;
export const InfoIcon = (p: IconProps) => <IconInfoCircle {...withDefaults(p)} />;
export const SubtitlesEditIcon = (p: IconProps) => <IconSubtitlesEdit {...withDefaults(p)} />;
export const DividerIcon = (p: IconProps) => <IconSeparatorHorizontal {...withDefaults(p)} />;
export const ExchangeIcon = (p: IconProps) => <IconExchange {...withDefaults(p)} />;
export const FilterIcon = (p: IconProps) => <IconAdjustmentsHorizontal {...withDefaults(p)} />;
export const CastIcon = (p: IconProps) => <IconCast {...withDefaults(p)} />;
export const DevicesIcon = (p: IconProps) => <IconDevices {...withDefaults(p)} />;
export const JumpToLiveIcon = (p: IconProps) => <IconArrowBackUp {...withDefaults(p)} />;
export const VolumeIcon = (p: IconProps) => <IconVolume {...withDefaults(p)} />;
export const VolumeOffIcon = (p: IconProps) => <IconVolumeOff {...withDefaults(p)} />;
export const DataIcon = (p: IconProps) => <IconDatabase {...withDefaults(p)} />;
export const ChurchIcon = (p: IconProps) => <IconBuildingChurch {...withDefaults(p)} />;
export const FileIcon = (p: IconProps) => <IconFile {...withDefaults(p)} />;
export const FilePdfIcon = (p: IconProps) => <IconFileTypePdf {...withDefaults(p)} />;
export const FileMusicIcon = (p: IconProps) => <IconFileMusic {...withDefaults(p)} />;
export const HeadphonesIcon = (p: IconProps) => <IconHeadphones {...withDefaults(p)} />;
export const YoutubeIcon = (p: IconProps) => <IconBrandYoutube {...withDefaults(p)} />;
export const LinkIcon = (p: IconProps) => <IconLink {...withDefaults(p)} />;
export const ExternalLinkIcon = (p: IconProps) => <IconExternalLink {...withDefaults(p)} />;
export const StarIcon = (p: IconProps) => <IconStar {...withDefaults(p)} />;
export const StarFilledIcon = (p: IconProps) => <IconStarFilled {...withDefaults(p)} />;
export const DownloadIcon = (p: IconProps) => <IconDownload {...withDefaults(p)} />;
export const PaperclipIcon = (p: IconProps) => <IconPaperclip {...withDefaults(p)} />;
export const MaximizeIcon = (p: IconProps) => <IconMaximize {...withDefaults(p)} />;
export const MinimizeIcon = (p: IconProps) => <IconMinimize {...withDefaults(p)} />;
export const GuitarPickIcon = (p: IconProps) => <IconGuitarPick {...withDefaults(p)} />;
export const ColumnsIcon = (p: IconProps) => <IconColumns {...withDefaults(p)} />;
export const SquareIcon = (p: IconProps) => <IconSquare {...withDefaults(p)} />;
export const RenameIcon = (p: IconProps) => <IconCursorText {...withDefaults(p)} />;
export const SaveIcon = (p: IconProps) => <IconDeviceFloppy {...withDefaults(p)} />;
export const MailIcon = (p: IconProps) => <IconMail {...withDefaults(p)} />;
export const SendIcon = (p: IconProps) => <IconSend {...withDefaults(p)} />;
export const TestIcon = (p: IconProps) => <IconTestPipe {...withDefaults(p)} />;
Holen
# MCP (Claude Code / Cursor)
get_component({ name: "icon" })
# Registry direkt
https://www.ekklesi.tools/design/registry/components/icon.json