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