Add Comet UX Library Icons (#1462)

This PR adds new icons from the Comet UX library. It also replaces
existing icons with new versions and deprecates the icons `Pool`,
`Pool2`, `Vignette1`, `Vignette2`, `Betrieb` and `LogischeFilter`.

---------

Co-authored-by: Thomas Dax <thomas.dax@vivid-planet.com>
Co-authored-by: Johannes Obermair <48853629+johnnyomair@users.noreply.github.com>

.changeset/real-cars-impress.md

@@ -0,0 +1,5 @@
+---
+"@comet/admin-icons": minor
+---
+
+Add new icons from the Comet UX library. Replace existing icons with new versions. Mark icons Pool, Pool2, Vignette1, Vignette2, Betrieb, LogischeFilter as deprecated.

packages/admin/admin-icons/generate-icons.ts

@@ -6,48 +6,65 @@ import { pascalCase, pascalCaseTransformMerge } from "pascal-case";
 import * as path from "path";
 const eslint = new ESLint({ fix: true });
 
+type Icon = {
+    name: string;
+    path: string;
+    componentName: string;
+    deprecated?: boolean;
+};
+
 const main = async () => {
-    const files = readdirSync("icons").filter((file) => {
-        return path.extname(file).toLowerCase() === ".svg";
-    });
+    const isSvg = (file: string) => path.extname(file).toLowerCase() === ".svg";
+
+    const iconFiles = readdirSync("icons").filter(isSvg);
+    const deprecatedIconFiles = readdirSync("icons/deprecated").filter(isSvg);
+
+    const icons: Icon[] = [
+        ...iconFiles.map((file) => ({ name: file, path: `icons/${file}`, componentName: getComponentName(file) })),
+        ...deprecatedIconFiles.map((file) => ({
+            name: file,
+            path: `icons/deprecated/${file}`,
+            componentName: getComponentName(file),
+            deprecated: true,
+        })),
+    ];
 
     const bar = new SingleBar(
         {
             format: `{bar} {percentage}% | {value}/{total} {title}`,
         },
         Presets.shades_classic,
     );
-    bar.start(files.length, 0);
+    bar.start(icons.length, 0);
 
     if (existsSync("src/generated")) {
         rmSync("src/generated", { recursive: true });
     }
 
     mkdirSync("src/generated");
     await Promise.all(
-        files.map((file) => {
+        icons.map((icon) => {
             bar.increment(1, {
-                title: `Generate icons ${file}`,
+                title: `Generate icons ${icon.name}`,
             });
-            const componentName = getComponentName(file);
-            const pathData = getPathData(file);
+            const pathData = getPathData(icon);
 
-            return writeComponent(componentName, pathData);
+            return writeComponent(icon, pathData);
         }),
     );
     bar.stop();
 
-    await writeIndexFile(files);
+    await writeIndexFile(icons);
 };
 
 const getComponentName = (fileName: string) => pascalCase(fileName.split(".")[0], { transform: pascalCaseTransformMerge });
 
-const getPathData = (fileName: string) => {
-    const fileContents = readFileSync(`icons/${fileName}`);
+const getPathData = (icon: Icon) => {
+    const fileContents = readFileSync(icon.path);
     const parsedXml = new XMLParser({ ignoreAttributes: false, attributeNamePrefix: "" }).parse(fileContents.toString());
 
     if (parsedXml?.svg?.path?.d === undefined) {
-        throw new Error(`The file ${fileName} must contain a <path> element with a d attribute`);
+        throw new Error(`The file ${icon.name} must contain a <path> element with a d attribute`);
     }
 
     return parsedXml.svg.path.d;
@@ -63,29 +80,35 @@ const getFormattedText = async (text: string) => {
     return results[0].output;
 };
 
-const writeComponent = async (componentName: string, pathData: string) => {
+const writeComponent = async (icon: Icon, pathData: string) => {
     const component = await getFormattedText(`
         import { SvgIcon, SvgIconProps } from "@mui/material";
         import * as React from "react";
         
-        export default function ${componentName}(props: SvgIconProps): JSX.Element {
+        ${
+            icon.deprecated
+                ? `/**
+                    * @deprecated Will be removed in a future major release.
+                    */`
+                : ""
+        };
+        export function ${icon.componentName}(props: SvgIconProps): JSX.Element {
             return (
                 <SvgIcon {...props} viewBox="0 0 16 16">
                     <path d="${pathData}" />
                 </SvgIcon>
             );
-        }  
+        }
     `);
 
-    if (componentName != null && component != null) {
-        writeFileSync(`src/generated/${componentName}.tsx`, component);
+    if (icon.componentName != null && component != null) {
+        writeFileSync(`src/generated/${icon.componentName}.tsx`, component);
     }
 };
 
-const writeIndexFile = async (files: string[]) => {
-    const exports = files.map((file) => {
-        const componentName = getComponentName(file);
-        return `export { default as ${componentName} } from "./${componentName}";`;
+const writeIndexFile = async (icons: Icon[]) => {
+    const exports = icons.map((icon) => {
+        return `export { ${icon.componentName} } from "./${icon.componentName}";`;
     });
 
     const indexFile = await getFormattedText(exports.join("\n"));