Feature/cor 959/dynamic icons

packages/app/src/components/get-icon-by-name.tsx

@@ -0,0 +1,38 @@
+import * as allIcons from '@corona-dashboard/icons';
+import { iconName2filename, IconProps } from '@corona-dashboard/icons';
+import React from 'react';
+import { isDefined } from 'ts-is-present';
+import { assert } from '~/utils/assert';
+
+type IconName = keyof typeof iconName2filename;
+type IconCollection = Record<IconName, React.ComponentType>;
+
+interface DynamicIconProps extends IconProps {
+  name: IconName;
+}
+
+/**
+ * Returns an icon component by the name of the icon
+ * Throws when requested component was not found
+ */
+function getIconByName(name: IconName) {
+  const icons: IconCollection = allIcons;
+  const DynamicIcon = icons[name];
+
+  assert(
+    isDefined(DynamicIcon),
+    `[${getIconByName.name}] Icon with name "${name}" does not exist`
+  );
+
+  return DynamicIcon;
+}
+
+/**
+ * Renders an icon component by the name of the icon
+ */
+function DynamicIcon({ name, ...otherProps }: DynamicIconProps) {
+  const Icon = getIconByName(name);
+  return <Icon {...otherProps} />;
+}
+
+export default DynamicIcon;

packages/app/src/pages/nieuw-actueel.tsx

@@ -5,6 +5,7 @@ import { ArticleList, TopicalSectionHeader } from '~/domain/topical';
 import { isPresent } from 'ts-is-present';
 import { Search } from '~/domain/topical/components/search';
 import { Languages, SiteText } from '~/locale';
+import DynamicIcon from '~/components/get-icon-by-name';
 import {
   createGetStaticProps,
   StaticProps,
@@ -62,6 +63,9 @@ const Home = (props: StaticProps<typeof getStaticProps>) => {
             pt={{ _: 3, md: 5 }}
             px={{ _: 3, sm: 4 }}
           >
+            <Box py={4}>
+              <DynamicIcon name={selectedTopicalData.themes[0].icon} />
+            </Box>
             <Box py={4}>
               <Search title={textShared.secties.search.title.nl} />
             </Box>

packages/cms/src/components/portable-text/kpi-configuration/kpi-icon-input.tsx

@@ -18,10 +18,15 @@ import { PatchEvent, set, unset } from 'part:@sanity/form-builder/patch-event';
 import React, { forwardRef, useCallback, useState } from 'react';
 import { isDefined } from 'ts-is-present';
 
-const filename2IconName = Object.keys(iconName2filename).reduce((aggr, key) => {
-  aggr[iconName2filename[key]] = key;
-  return aggr;
-}, {} as Record<string, string>);
+const allIconsToFilename: Record<string, string> = iconName2filename;
+
+const filename2IconName = Object.keys(allIconsToFilename).reduce(
+  (aggr, key) => {
+    aggr[allIconsToFilename[key]] = key;
+    return aggr;
+  },
+  {} as Record<string, string>
+);
 
 export type KpiIconKey = keyof typeof allIcons;
 
@@ -83,11 +88,14 @@ export const KpiIconInput = forwardRef((props: any, ref: any) => {
                     key={id}
                     direction="column"
                     align="center"
-                    onClick={() => onChangeIcon(iconName2filename[id])}
+                    onClick={() => onChangeIcon(allIconsToFilename[id])}
                     title={id}
                   >
                     <GridIcon width="35" height="35" color="black" />
-                    <Radio checked={value === iconName2filename[id]} readOnly />
+                    <Radio
+                      checked={value === allIconsToFilename[id]}
+                      readOnly
+                    />
                   </Flex>
                 ))}
 

packages/icons/bin/generate.js

@@ -83,9 +83,12 @@ const attrsToString = (attrs) => {
 };
 
 const lookup = icons.sort().map((x) => `${pascalcase(x)}: '${x}.svg'`);
+const iconNames = icons.sort().map((x) => `'${pascalcase(x)}'`);
 
 const iconName2filename = [
-  'export const iconName2filename: Record<string, string> = {',
+  `export type IconName = ${iconNames.join(' | ')};`,
+  '',
+  'export const iconName2filename: Record<IconName, string> = {',
 ]
   .concat(lookup.join(','))
   .concat(['}', '']);

packages/icons/src/icon-name2filename.ts

@@ -1,4 +1,189 @@
-export const iconName2filename: Record<string, string> = {
+export type IconName =
+  | 'Afstand'
+  | 'AfstandSporten'
+  | 'AlcoholVerkoop'
+  | 'Arrow'
+  | 'Arts'
+  | 'ArtsSmall'
+  | 'AvoidCrowds'
+  | 'Avondklok'
+  | 'BarChart'
+  | 'BasisregelsAfstand'
+  | 'BasisregelsBlijfThuis'
+  | 'BasisregelsDrukte'
+  | 'BasisregelsElleboog'
+  | 'BasisregelsGeenBezoek'
+  | 'BasisregelsHandenwassen'
+  | 'BasisregelsMondkapje'
+  | 'BasisregelsTesten'
+  | 'Bevolking'
+  | 'Bezoek'
+  | 'Bibliotheken'
+  | 'BinnenMetZitplaats'
+  | 'BinnenZonderZitplaats'
+  | 'Binnensporten'
+  | 'Binnensportlocaties'
+  | 'Boosterprik'
+  | 'Calendar'
+  | 'Chart'
+  | 'Check'
+  | 'CheckSmall'
+  | 'Checked'
+  | 'Chevron'
+  | 'ChevronDown'
+  | 'ChevronDownMagenta'
+  | 'ChevronLarge'
+  | 'Clock'
+  | 'Close'
+  | 'CloseThick'
+  | 'Contactberoepen'
+  | 'Coronavirus'
+  | 'Cross'
+  | 'CrossSmall'
+  | 'Curfew'
+  | 'Database'
+  | 'Doorstroomevenementen'
+  | 'Dot'
+  | 'Down'
+  | 'Download'
+  | 'EenPersoonDoorgestreept'
+  | 'Elderly'
+  | 'Elleboog'
+  | 'Expand'
+  | 'Experimenteel'
+  | 'External'
+  | 'Eye'
+  | 'Frame2'
+  | 'FrisseLucht'
+  | 'Gathering'
+  | 'GedeeltelijkOpenRugzak'
+  | 'Gedrag'
+  | 'GeenEntertainment'
+  | 'GeenMaxAantalBezoekers'
+  | 'GeenWedstrijden'
+  | 'GehandicaptenZorg'
+  | 'Gehandicaptenzorg'
+  | 'Gelijk'
+  | 'GeorganiseerdeKunstEnCultuurbeoefening'
+  | 'GgdTesten'
+  | 'Groepen'
+  | 'Handenwassen'
+  | 'HealthCare'
+  | 'HomeAndVisits'
+  | 'HorecaEnEvenementenBestellen'
+  | 'HorecaEnEvenementenEtendrinken'
+  | 'HorecaEnEvenementenEvenementen'
+  | 'HorecaEvenementen'
+  | 'Hospitality'
+  | 'Information'
+  | 'KeepDistance'
+  | 'Klachten'
+  | 'Klok2100'
+  | 'KunstCultuur'
+  | 'KunstcultuurMusea'
+  | 'Line'
+  | 'Locatie'
+  | 'Locaties'
+  | 'Lopend'
+  | 'Maatregelen'
+  | 'MaxAantalBezoekers'
+  | 'MaxVisitors'
+  | 'MedischeScreening'
+  | 'MeerInformatie'
+  | 'MeerdaagseEvenementen'
+  | 'Menu'
+  | 'Mondkapje'
+  | 'Nederland'
+  | 'NederlandGroot'
+  | 'Notification'
+  | 'OnderwijsEnKinderopvangKinderopvang'
+  | 'OnderwijsEnKinderopvangNoodopvang'
+  | 'OnderwijsEnKinderopvangOpAfstand'
+  | 'OntmoetingenBezoek'
+  | 'OpenbaarVervoer'
+  | 'Openingstijden'
+  | 'Other'
+  | 'Overig'
+  | 'Oversterfte'
+  | 'Phone'
+  | 'PositiefGetesteMensen'
+  | 'PubliekToegankelijkeLocaties'
+  | 'Recreatie'
+  | 'Reizen'
+  | 'ReproductieGraf'
+  | 'Reproductiegetal'
+  | 'ReproductiegetalSmall'
+  | 'Reset'
+  | 'Rioolvirus'
+  | 'RioolwaterMonitoring'
+  | 'SchoolAndDayCare'
+  | 'Search'
+  | 'SearchIcon'
+  | 'SearchIconBold'
+  | 'SneezeCoughElbow'
+  | 'SportBinnensportlocaties'
+  | 'SportBuiten'
+  | 'SportWedstrijden'
+  | 'SporterMetZweetband'
+  | 'Stap1Avondklok'
+  | 'Stap1HorecaMax'
+  | 'Stap1HorecaPertafel'
+  | 'Stap1HorecaReserveren'
+  | 'Stap1HorecaSportaccomodaties'
+  | 'Stap1HorecaTerras'
+  | 'Stap1HorecaVerplaatsen'
+  | 'Stap1OnderwijsBibliotheek'
+  | 'Stap1OnderwijsOpen'
+  | 'Stap1Theorie'
+  | 'Stap1Thuisbezoek'
+  | 'Stap1Uitvaarten'
+  | 'Stap1WinkelsAlleen'
+  | 'Stap1WinkelsMarkten'
+  | 'Stap1WinkelsMax'
+  | 'Stap1WinkelsOpen'
+  | 'Sterfte'
+  | 'Stopwatch'
+  | 'SymptomsGetTested'
+  | 'SymptomsStayHome'
+  | 'Taxi'
+  | 'Test'
+  | 'Testbewijs'
+  | 'Testen'
+  | 'Teststraat'
+  | 'Thuis'
+  | 'Thuisblijven'
+  | 'Thuiswerken'
+  | 'Toegangsbewijzen'
+  | 'Travel'
+  | 'Unchecked'
+  | 'Up'
+  | 'Vaccinaties'
+  | 'Vaccine'
+  | 'VaccineBoosterThird'
+  | 'Varianten'
+  | 'Vermijd'
+  | 'Verpleeghuis'
+  | 'Verpleeghuiszorg'
+  | 'VervoerEnReizenBlijfthuis'
+  | 'VervoerEnReizenBuitenland'
+  | 'VervoerEnReizenOv'
+  | 'Vliegen'
+  | 'Warn'
+  | 'Warning'
+  | 'WashHands'
+  | 'WearMaskPublicIndoors'
+  | 'WearMaskPublicTransport'
+  | 'WhiteArrow'
+  | 'WhiteArrowLg'
+  | 'WinkelenEnBoodschappenAlcohol'
+  | 'WinkelenEnBoodschappenOpen'
+  | 'Work'
+  | 'WorkFromHome'
+  | 'Ziekenhuis'
+  | 'ZiekenhuisSmall'
+  | 'Ziektegolf';
+
+export const iconName2filename: Record<IconName, string> = {
   Afstand: 'afstand.svg',
   AfstandSporten: 'afstand-sporten.svg',
   AlcoholVerkoop: 'alcohol-verkoop.svg',
@@ -52,6 +237,7 @@ export const iconName2filename: Record<string, string> = {
   Expand: 'expand.svg',
   Experimenteel: 'experimenteel.svg',
   External: 'external.svg',
+  Eye: 'eye.svg',
   Frame2: 'frame_2.svg',
   FrisseLucht: 'frisse_lucht.svg',
   Gathering: 'gathering.svg',