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

* feat: automatic icon generation

* fix: lint

* fix: broken icon imports after changes

* fix: deps

apps/frontend/src/pages/[type]/[id]/moderation.vue

@@ -50,7 +50,7 @@
           Listed in search results
         </li>
         <li v-else>
-          <ExitIcon class="bad" />
+          <XIcon class="bad" />
           Not listed in search results
         </li>
         <li v-if="isListed(project)">
@@ -58,11 +58,11 @@
           Listed on the profiles of members
         </li>
         <li v-else>
-          <ExitIcon class="bad" />
+          <XIcon class="bad" />
           Not listed on the profiles of members
         </li>
         <li v-if="isPrivate(project)">
-          <ExitIcon class="bad" />
+          <XIcon class="bad" />
           Not accessible with a direct link
         </li>
         <li v-else>
@@ -92,7 +92,7 @@
   </div>
 </template>
 <script setup>
-import { ExitIcon, CheckIcon, IssuesIcon } from "@modrinth/assets";
+import { XIcon, CheckIcon, IssuesIcon } from "@modrinth/assets";
 import { Badge } from "@modrinth/ui";
 import ConversationThread from "~/components/ui/thread/ConversationThread.vue";
 import {

apps/frontend/src/pages/dashboard/projects.vue

@@ -146,7 +146,7 @@
         />
         <div class="push-right input-group">
           <button class="iconified-button" @click="$refs.editLinksModal.hide()">
-            <CrossIcon />
+            <XIcon />
             Cancel
           </button>
           <button class="iconified-button brand-button" @click="bulkEditLinks()">
@@ -199,8 +199,8 @@
                 class="square-button"
                 @click="updateDescending()"
               >
-                <DescendingIcon v-if="descending" />
-                <AscendingIcon v-else />
+                <SortDescIcon v-if="descending" />
+                <SortAscIcon v-else />
               </button>
             </div>
           </div>
@@ -306,12 +306,12 @@ import {
   SettingsIcon,
   TrashIcon,
   PlusIcon,
-  XIcon as CrossIcon,
+  XIcon,
   IssuesIcon,
   EditIcon,
   SaveIcon,
-  SortAscendingIcon as AscendingIcon,
-  SortDescendingIcon as DescendingIcon,
+  SortAscIcon,
+  SortDescIcon,
 } from "@modrinth/assets";
 import {
   Avatar,
@@ -337,15 +337,15 @@ export default defineNuxtComponent({
     Checkbox,
     IssuesIcon,
     PlusIcon,
-    CrossIcon,
+    XIcon,
     EditIcon,
     SaveIcon,
     Modal,
     ModalCreation,
     Multiselect,
     CopyCode,
-    AscendingIcon,
-    DescendingIcon,
+    SortAscIcon,
+    SortDescIcon,
   },
   async setup() {
     const { formatMessage } = useVIntl();

apps/frontend/src/pages/moderation/review.vue

@@ -8,11 +8,11 @@
         :format-label="(x) => (x === 'all' ? 'All' : formatProjectType(x) + 's')"
       />
       <button v-if="oldestFirst" class="iconified-button push-right" @click="oldestFirst = false">
-        <SortDescendingIcon />
+        <SortDescIcon />
         Sorting by oldest
       </button>
       <button v-else class="iconified-button push-right" @click="oldestFirst = true">
-        <SortAscendingIcon />
+        <SortAscIcon />
         Sorting by newest
       </button>
       <button
@@ -109,8 +109,8 @@ import { Avatar, ProjectStatusBadge, Chips, useRelativeTime } from "@modrinth/ui
 import {
   UnknownIcon,
   EyeIcon,
-  SortAscendingIcon,
-  SortDescendingIcon,
+  SortAscIcon,
+  SortDescIcon,
   IssuesIcon,
   ScaleIcon,
 } from "@modrinth/assets";

apps/frontend/src/pages/organization/[id]/settings/projects.vue

@@ -201,8 +201,8 @@
                 icon-only
                 @click="updateDescending()"
               >
-                <SortDescendingIcon v-if="descending" />
-                <SortAscendingIcon v-else />
+                <SortDescIcon v-if="descending" />
+                <SortAscIcon v-else />
               </Button>
             </div>
           </div>
@@ -308,8 +308,8 @@ import {
   XIcon,
   EditIcon,
   SaveIcon,
-  SortAscendingIcon,
-  SortDescendingIcon,
+  SortAscIcon,
+  SortDescIcon,
 } from "@modrinth/assets";
 import { Button, Modal, Avatar, CopyCode, Badge, Checkbox, commonMessages } from "@modrinth/ui";
 

apps/frontend/src/pages/settings.vue

@@ -12,7 +12,7 @@
               link="/settings"
               :label="formatMessage(commonSettingsMessages.appearance)"
             >
-              <PaintBrushIcon />
+              <PaintbrushIcon />
             </NavStackItem>
             <NavStackItem
               v-if="isStaging"
@@ -82,7 +82,7 @@
 import {
   ServerIcon,
   GridIcon,
-  PaintBrushIcon,
+  PaintbrushIcon,
   UserIcon,
   ShieldIcon,
   KeyIcon,

apps/frontend/src/pages/settings/account.vue

@@ -422,7 +422,7 @@ import {
 } from "@modrinth/assets";
 import QrcodeVue from "qrcode.vue";
 import { ConfirmModal } from "@modrinth/ui";
-import GitHubIcon from "assets/icons/auth/sso-github.svg";
+import GithubIcon from "assets/icons/auth/sso-github.svg";
 import MicrosoftIcon from "assets/icons/auth/sso-microsoft.svg";
 import GoogleIcon from "assets/icons/auth/sso-google.svg";
 import SteamIcon from "assets/icons/auth/sso-steam.svg";
@@ -583,7 +583,7 @@ const authProviders = [
   {
     id: "github",
     display: "GitHub",
-    icon: GitHubIcon,
+    icon: GithubIcon,
   },
   {
     id: "gitlab",