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

* feat: automatic icon generation

* fix: lint

* fix: broken icon imports after changes

* fix: deps
This commit is contained in:
IMB11
2025-07-01 21:54:21 +01:00
committed by GitHub
parent f1207f0a3a
commit 1846c59733
20 changed files with 660 additions and 427 deletions

View File

@@ -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";

View File

@@ -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,

View File

@@ -142,7 +142,7 @@
"
>
<nuxt-link to="/resourcepacks">
<PaintBrushIcon aria-hidden="true" /> Resource Packs
<PaintbrushIcon aria-hidden="true" /> Resource Packs
</nuxt-link>
</ButtonStyled>
<ButtonStyled
@@ -221,7 +221,7 @@
v-if="route.name === 'search-mods' || route.path.startsWith('/mod/')"
aria-hidden="true"
/>
<PaintBrushIcon
<PaintbrushIcon
v-else-if="
route.name === 'search-resourcepacks' || route.path.startsWith('/resourcepack/')
"
@@ -250,7 +250,7 @@
<template #mods> <BoxIcon aria-hidden="true" /> Mods </template>
<template #resourcepacks>
<PaintBrushIcon aria-hidden="true" /> Resource Packs
<PaintbrushIcon aria-hidden="true" /> Resource Packs
</template>
<template #datapacks> <BracesIcon aria-hidden="true" /> Data Packs </template>
<template #plugins> <PlugIcon aria-hidden="true" /> Plugins </template>
@@ -696,14 +696,14 @@ import {
CurrencyIcon,
BracesIcon,
GlassesIcon,
PaintBrushIcon,
PaintbrushIcon,
PackageOpenIcon,
DiscordIcon,
BlueskyIcon,
TumblrIcon,
TwitterIcon,
MastodonIcon,
GitHubIcon,
GithubIcon,
ScaleIcon,
} from "@modrinth/assets";
import {
@@ -1202,7 +1202,7 @@ const socialLinks = [
defineMessage({ id: "layout.footer.social.github", defaultMessage: "GitHub" }),
),
href: "https://github.com/modrinth",
icon: GitHubIcon,
icon: GithubIcon,
},
];

View File

@@ -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 {

View File

@@ -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();

View File

@@ -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";

View File

@@ -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";

View File

@@ -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,

View File

@@ -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",