add loader symbols

apps/app-frontend/src/components/ui/instance_settings/icon-editor-modal/editor-catalog.ts

@@ -18,6 +18,8 @@ import enchantingTable from '@/assets/instance-icons/enchanting-table.png'
 import enderChest from '@/assets/instance-icons/ender-chest.png'
 import enderDragon from '@/assets/instance-icons/ender-dragon.png'
 import engine from '@/assets/instance-icons/engine.png'
+import fabric from '@/assets/instance-icons/fabric.png'
+import forge from '@/assets/instance-icons/forge.png'
 import furnace from '@/assets/instance-icons/furnace.png'
 import gizmo from '@/assets/instance-icons/gizmo.png'
 import globe from '@/assets/instance-icons/globe.png'
@@ -25,11 +27,13 @@ import grassBlock from '@/assets/instance-icons/grass-block.png'
 import lantern from '@/assets/instance-icons/lantern.png'
 import moobloom from '@/assets/instance-icons/moobloom.png'
 import mrPack from '@/assets/instance-icons/mr-pack.png'
+import neoForge from '@/assets/instance-icons/neoforge.png'
 import orb from '@/assets/instance-icons/orb.png'
 import oxygenDistributor from '@/assets/instance-icons/oxygen-distributor.png'
 import pancakes from '@/assets/instance-icons/pancakes.png'
 import pickaxe from '@/assets/instance-icons/pickaxe.png'
 import pokeBall from '@/assets/instance-icons/poke-ball.png'
+import quilt from '@/assets/instance-icons/quilt.png'
 import redstoneBlock from '@/assets/instance-icons/redstone-block.png'
 import sculkSensor from '@/assets/instance-icons/sculk-sensor.png'
 import skeleton from '@/assets/instance-icons/skeleton.png'
@@ -197,6 +201,10 @@ const names = defineMessages({
 		defaultMessage: 'Modrinth Wrench',
 	},
 	zombie: { id: 'instance.icon-editor.symbol.zombie', defaultMessage: 'Zombie' },
+	fabric: { id: 'instance.icon-editor.symbol.fabric', defaultMessage: 'Fabric' },
+	forge: { id: 'instance.icon-editor.symbol.forge', defaultMessage: 'Forge' },
+	neoForge: { id: 'instance.icon-editor.symbol.neoforge', defaultMessage: 'NeoForge' },
+	quilt: { id: 'instance.icon-editor.symbol.quilt', defaultMessage: 'Quilt' },
 })
 
 export const backgroundOptions = [
@@ -438,6 +446,15 @@ export const symbolOptions = [
 	{ id: 'lantern', name: names.lantern, asset: lantern, category: 'vanilla' },
 	{ id: 'tnt', name: names.tnt, asset: tnt, category: 'vanilla' },
 	{ id: 'command_block', name: names.commandBlock, asset: commandBlock, category: 'vanilla' },
+
+	/////////////////////////
+	// loaders
+	/////////////////////////
+
+	{ id: 'fabric', name: names.fabric, asset: fabric, category: 'loader' },
+	{ id: 'forge', name: names.forge, asset: forge, category: 'loader' },
+	{ id: 'neoforge', name: names.neoForge, asset: neoForge, category: 'loader' },
+	{ id: 'quilt', name: names.quilt, asset: quilt, category: 'loader' },
 ] as const
 
 export type BackgroundId = (typeof backgroundOptions)[number]['id']

apps/app-frontend/src/components/ui/instance_settings/icon-editor-modal/index.vue

@@ -67,6 +67,7 @@ const selectedSymbolOption = computed(
 	() => symbolOptions.find((option) => option.id === selectedSymbol.value)!,
 )
 const vanillaSymbolStartIndex = symbolOptions.findIndex((option) => option.category === 'vanilla')
+const loaderSymbolStartIndex = symbolOptions.findIndex((option) => option.category === 'loader')
 const selectedConfig = computed<InstanceIconConfig>(() => ({
 	background: { ...selectedBackgroundOption.value.background },
 	symbol: selectedSymbol.value,
@@ -453,7 +454,7 @@ const messages = defineMessages({
 					<div class="grid grid-cols-6 gap-2.5">
 						<template v-for="(option, index) in symbolOptions" :key="option.id">
 							<hr
-								v-if="index === vanillaSymbolStartIndex"
+								v-if="index === vanillaSymbolStartIndex || index === loaderSymbolStartIndex"
 								class="col-span-6 my-2.5 mx-1 w-full border-0 border-t border-solid border-surface-5"
 							/>
 							<button