feature: added Icon component (#664)

- added functional Icons from Tabler - Icons can be selected through a drop down. - Icons are wrapped in the Icon component from Utrecht. --------- Co-authored-by: Mees Work <[email protected]>
nl-design-system · Sep 26, 2024 · 37e386f · 37e386f
1 parent 8c11a64
commit 37e386f
Show file tree

Hide file tree

Showing 6 changed files with 1,372 additions and 34 deletions.
diff --git a/packages/components-react/package.json b/packages/components-react/package.json
@@ -36,6 +36,7 @@
   "dependencies": {
     "@rijkshuisstijl-community/components-css": "workspace:*",
     "@rijkshuisstijl-community/web-components-react": "workspace:*",
+    "@tabler/icons-react": "3.11.0",
     "@utrecht/component-library-css": "4.0.0",
     "@utrecht/component-library-react": "5.0.0",
     "clsx": "2.1.1",

diff --git a/packages/components-react/src/icon/Icon.tsx b/packages/components-react/src/icon/Icon.tsx
@@ -0,0 +1,157 @@
+import {
+  IconAlertCircle,
+  IconAlertTriangle,
+  IconApi,
+  IconArrowIteration,
+  IconArrowNarrowDown,
+  IconArrowNarrowLeft,
+  IconArrowNarrowRight,
+  IconArrowNarrowUp,
+  IconArrowsDiagonal,
+  IconArrowUpRight,
+  IconBackhoe,
+  IconBell,
+  IconBubble,
+  IconCalendarCheck,
+  IconCaretDown,
+  IconCaretLeft,
+  IconCaretRight,
+  IconCaretUp,
+  IconCheck,
+  IconClock,
+  IconCloudLock,
+  IconCornerLeftUp,
+  IconDeviceFloppy,
+  IconDeviceMobile,
+  IconDotsVertical,
+  IconDownload,
+  IconEdit,
+  IconExternalLink,
+  IconEye,
+  IconFile,
+  IconFilePencil,
+  IconGridDots,
+  IconHash,
+  IconHeart,
+  IconHome,
+  IconInfoSquare,
+  IconLink,
+  IconLock,
+  IconLogin2,
+  IconMail,
+  IconMapPin,
+  IconMenu2,
+  IconMessageDots,
+  IconNews,
+  IconPaperclip,
+  IconPhone,
+  IconPlayerPlay,
+  IconPlus,
+  IconPower,
+  IconPrinter,
+  IconQuestionMark,
+  IconReload,
+  IconRss,
+  IconSearch,
+  IconSend,
+  IconSettings,
+  IconShare,
+  IconSquare,
+  IconTransfer,
+  IconTrash,
+  IconUpload,
+  IconUser,
+  IconVolume,
+  IconVolumeOff,
+  IconX,
+} from '@tabler/icons-react';
+import { Icon as UtrechtIcon } from '@utrecht/component-library-react';
+import { PropsWithChildren } from 'react';
+import { RijkshuisstijlIconID } from './IconTypes';
+
+export const IconenSet: Partial<Record<RijkshuisstijlIconID, any>> = {
+  activiteit: <IconCalendarCheck />,
+  'agile-werken': <IconArrowIteration />,
+  'api-inrichting': <IconApi />,
+  audio: <IconVolume />,
+  bel: <IconBell />,
+  bewerken: <IconEdit />,
+  blog: <IconFilePencil />,
+  comment: <IconMessageDots />,
+  communicatie: <IconBubble />,
+  delen: <IconShare />,
+  'delta-naar-links': <IconCaretLeft />,
+  'delta-naar-rechts': <IconCaretRight />,
+  'delta-omhoog': <IconCaretUp />,
+  'delta-omlaag': <IconCaretDown />,
+  'diagonale-pijl': <IconArrowUpRight />,
+  downloaden: <IconDownload />,
+  'externe-link': <IconExternalLink />,
+  favoriet: <IconHeart />,
+  'foto-vergroten': <IconArrowsDiagonal />,
+  gegevensuitwisseling: <IconTransfer />,
+  'geluid-aan': <IconVolume />,
+  'geluid-uit': <IconVolumeOff />,
+  'haakse-pijl': <IconCornerLeftUp />,
+  hashtag: <IconHash />,
+  home: <IconHome />,
+  info: <IconInfoSquare />,
+  inloggen: <IconLogin2 />,
+  instellingen: <IconSettings />,
+  'interne-link': <IconLink />,
+  kalender: <IconCalendarCheck />,
+  klok: <IconClock />,
+  kruis: <IconX />,
+  'let-op-met-loep': <IconAlertCircle />,
+  'let-op': <IconAlertTriangle />,
+  locatiemarker: <IconMapPin />,
+  mail: <IconMail />,
+  meer: <IconDotsVertical />,
+  menu: <IconMenu2 />,
+  nieuws: <IconNews />,
+  paperclip: <IconPaperclip />,
+  'permanent-beta': <IconBackhoe />,
+  'pijl-naar-rechts': <IconArrowNarrowRight />,
+  'pijl-naar-rechtsboven': <IconArrowUpRight />,
+  'pijl-omhoog': <IconArrowNarrowUp />,
+  'pijl-omlaag': <IconArrowNarrowDown />,
+  plus: <IconPlus />,
+  printer: <IconPrinter />,
+  publicatie: <IconFile />,
+  'rechte-pijl': <IconArrowNarrowUp />,
+  refresh: <IconReload />,
+  rss: <IconRss />,
+  save: <IconDeviceFloppy />,
+  'secure-link': <IconLock />,
+  smartphone: <IconDeviceMobile />,
+  tegelweergave: <IconGridDots />,
+  telefoon: <IconPhone />,
+  terug: <IconArrowNarrowLeft />,
+  toegankelijkheid: <IconEye />,
+  toelichting: <IconSquare />,
+  'uit-aanknop': <IconPower />,
+  upload: <IconUpload />,
+  user: <IconUser />,
+  versleutelen: <IconCloudLock />,
+  verwijderen: <IconTrash />,
+  verzenden: <IconSend />,
+  video: <IconPlayerPlay />,
+  vinkje: <IconCheck />,
+  vraagteken: <IconQuestionMark />,
+  zoek: <IconSearch />,
+};
+
+export const iconOptions = Object.keys(IconenSet);
+
+interface IconProps {
+  icon?: any;
+}
+
+export const Icon = ({ children, icon }: PropsWithChildren<IconProps>) => {
+  return (
+    <UtrechtIcon>
+      {icon && IconenSet[icon as keyof typeof IconenSet]}
+      {children}
+    </UtrechtIcon>
+  );
+};