feat: DEV-132 automatic icon generation (#3878)

* feat: automatic icon generation

* fix: lint

* fix: broken icon imports after changes

* fix: deps

apps/frontend/src/components/ui/ModerationChecklist.vue

@@ -9,7 +9,7 @@
       </h1>
       <ButtonStyled circular color="red" color-fill="none" hover-color-fill="background">
         <button v-tooltip="`Exit moderation`" @click="exitModeration">
-          <CrossIcon />
+          <XIcon />
         </button>
       </ButtonStyled>
       <ButtonStyled circular>
@@ -306,7 +306,7 @@
           <div class="flex items-center gap-2">
             <ButtonStyled v-if="!done">
               <button aria-label="Skip" @click="goToNextProject">
-                <ExitIcon aria-hidden="true" />
+                <XIcon aria-hidden="true" />
                 <template v-if="futureProjects.length > 0">Skip</template>
                 <template v-else>Exit</template>
               </button>
@@ -335,7 +335,7 @@
               <div class="joined-buttons">
                 <ButtonStyled color="red">
                   <button @click="sendMessage('rejected')">
-                    <CrossIcon aria-hidden="true" /> Reject
+                    <XIcon aria-hidden="true" /> Reject
                   </button>
                 </ButtonStyled>
                 <ButtonStyled color="red">
@@ -373,9 +373,8 @@ import {
   UpdatedIcon,
   CheckIcon,
   DropdownIcon,
-  XIcon as CrossIcon,
   EyeOffIcon,
-  ExitIcon,
+  XIcon,
   ScaleIcon,
 } from "@modrinth/assets";
 import { ButtonStyled, MarkdownEditor, OverflowMenu, Collapsible } from "@modrinth/ui";

apps/frontend/src/components/ui/servers/ServerStats.vue

@@ -68,7 +68,7 @@
 
 <script setup lang="ts">
 import { ref, computed, shallowRef } from "vue";
-import { FolderOpenIcon, CPUIcon, DatabaseIcon, IssuesIcon } from "@modrinth/assets";
+import { FolderOpenIcon, CpuIcon, DatabaseIcon, IssuesIcon } from "@modrinth/assets";
 import { useStorage } from "@vueuse/core";
 import type { Stats } from "@modrinth/utils";
 
@@ -126,7 +126,7 @@ const metrics = computed(() => {
         title: "CPU usage",
         value: "0.00%",
         max: "100%",
-        icon: CPUIcon,
+        icon: CpuIcon,
         data: cpuData.value,
         showGraph: false,
         warning: null,
@@ -157,7 +157,7 @@ const metrics = computed(() => {
       title: "CPU usage",
       value: `${cpuPercent.toFixed(2)}%`,
       max: "100%",
-      icon: CPUIcon,
+      icon: CpuIcon,
       data: cpuData.value,
       showGraph: true,
       warning: cpuPercent >= 90 ? "CPU usage is very high" : null,