How to List: pictogram statt image

gfi-ihk-2024/stories/components/howto-list/HowToListComponent.js

@@ -16,7 +16,7 @@ export const createHowToList =
     listItems.map((item) => {
       const li = createElement('li', [], null, ul);
       const a = createElement('a', [], null, li);
-      createImage(item.icon, 100, 100, '', [], a);
+      createElement('div', ['pictogram', item.icon], null, a);
       createElement('h3', [], item.headline, a);
       createElement('p', [], item.text, a);
       createElement('span', [], item.more, a);

gfi-ihk-2024/stories/components/howto-list/HowToListData.js

@@ -4,20 +4,20 @@ export const howToListData = [
     text: 'Ihr Unternehmen ist IHK-Mitglied? Dann bekommen Sie automatisch am  12.02.2024 die Wahlunterlagen zugesandt.',
     more: 'Mehr erfahren',
     link: '#',
-    icon: './dummy/howto-list-01.svg',
+    icon: 'pictogram-bueroklammer',
   },
   {
     headline: '2. Kandidat:innen',
     text: 'Informieren Sie sich über die Kandidat:innen und deren Programm um Ihre Entscheidung zu fällen.',
     more: 'Mehr erfahren',
     link: '#',
-    icon: './dummy/howto-list-02.svg',
+    icon: 'pictogram-fabrik',
   },
   {
     headline: '3. Stimmabgabe',
     text: 'Geben Sie Ihre Stimmen auf den Ihnen zugesandten Unterlagen ab und schicken sie diese mit dem Rückumschlag an uns.',
     more: 'Mehr erfahren',
     link: '#',
-    icon: './dummy/howto-list-03.svg',
+    icon: 'pictogram-diagramm-wachstum',
   },
 ]

gfi-ihk-2024/stories/components/howto-list/howto-list.scss

@@ -58,12 +58,29 @@
     span {
       text-decoration: underline;
     }
-    img {
+    img,
+    .pictogram {
       position: absolute;
       left: -132px;
       top: 2px;
       width: 100px;
-      height: auto;
+      height: 100px;
+      font-family: "Pictograms", sans-serif;
+      font-size: 70px;
+      line-height: 1.4285;
+      text-align: center;
+      color: var(--theme-color-primary) !important;
+      &:after {
+        content: "";
+        position: absolute;
+        z-index: -1;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        border-radius: 50%;
+        background: var(--theme-color-secondary);
+      }
       @media(max-width: 399px) {
         position: static;
         left: auto;