Merge pull request #67 from it-at-m/custom-icons

Custom icons

Author: FabianWilms

.storybook/main.ts

@@ -6,8 +6,12 @@ import { StorybookConfig } from "@storybook/vue3-vite";
 const fs = require("fs");
 const path = require("path");
 const mucIconsSvg = fs.readFileSync(
-  path.resolve(__dirname, "../public/assets/temporary/muc-icons.svg"),
-  "utf8"
+    path.resolve(__dirname, "../public/assets/temporary/muc-icons.svg"),
+    "utf8"
+);
+const customIconsSvg = fs.readFileSync(
+    path.resolve(__dirname, "../public/assets/temporary/custom-icons.svg"),
+    "utf8"
 );
 
 const config: StorybookConfig = {
@@ -27,6 +31,7 @@ const config: StorybookConfig = {
   previewBody: (body) => `
     ${body}
     ${mucIconsSvg}
+    ${customIconsSvg}
  `,
   docs: {
     autodocs: "tag",

docs/Iconography.mdx

@@ -0,0 +1,24 @@
+import { Meta, IconGallery, IconItem } from '@storybook/blocks';
+
+<Meta title="Iconography" />
+
+# Iconography
+
+This library already contains MDE5-Patternlabs iconset. The documentation to it can be found [here](https://patternlab.muenchen.space/?p=viewall-guidelines-icons).
+
+Additionally, it adds some specialty icons from [Pictogrammers](https://pictogrammers.com/library/mdi) which can be accessed by embedding the SVG-Sprite `custom-icons.svg` as described in [the getting started guide](/docs/getting-started--docs#setup).
+
+<IconGallery>
+    <IconItem name="pencil">
+        <svg fill="currentColor"><use href="#icon-pencil" /></svg>
+    </IconItem>
+    <IconItem name="dots-vertical">
+        <svg fill="currentColor"><use href="#icon-dots-vertical" /></svg>
+    </IconItem>
+    <IconItem name="circle-off-outline">
+        <svg fill="currentColor"><use href="#icon-circle-off-outline" /></svg>
+    </IconItem>
+    <IconItem name="account">
+        <svg fill="currentColor"><use href="#icon-account" /></svg>
+    </IconItem>
+</IconGallery>