Webinterface: Emojis durch Lucide-Icons ersetzt
Deploy / check (push) Has been cancelled
Deploy / deploy (push) Has been cancelled

Emojis werden vom Betriebssystem gerendert — auf Windows, Mac und Android
sehen sie unterschiedlich aus, und sie sind bunt. Im streng zweifarbigen
D4RKST3R-Look stachen sie entsprechend heraus.

Jetzt kommen die Symbole aus einem einzigen Set (Lucide, dünne Outlines),
zentral in src/icons.jsx gebündelt: eine Größe, eine Strichstärke, überall
gleich — und sie erben die Textfarbe, sind also Teil der Marke statt
Fremdkörper. Betroffen sind Navigation, Startseite, Server, Roadmap,
Profil, Level, Galerie, Devlogs, Lightbox, Composer und alle Setup-Tabs.

Bewusst Emojis geblieben sind:
- die Spiel-Presets der Server (landen als Icon im Discord-Embed)
- Rollen-Menü-Emojis und Platzhalter für Discord-Inhalte
- beschreibende Hinweise wie „🔔-Button am Post" oder „🟢/🔴 im Embed",
  die zeigen, wie etwas in Discord aussehen wird
- die selbst gepflegten Dienst-Icons im Portal

Dazu Detailarbeit: Server-Status als farbiger Punkt statt Emoji, Platz 1–3
der Bestenliste als Pokal in Gold/Silber/Bronze, Pagination mit Chevrons.
Bundle wächst um 19 kB (Tree-Shaking greift, nur die ~70 genutzten Icons).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
2026-07-31 14:37:25 +02:00
co-authored by Claude Fable 5
parent 6daa1f7d43
commit 1afbe9d238
20 changed files with 295 additions and 79 deletions
+105
View File
@@ -0,0 +1,105 @@
// Zentrale Icon-Sammlung (Lucide) — ein Set, eine Strichstärke, überall gleich.
//
// Bewusst NICHT ersetzt werden Emojis, die im Discord landen oder von Nutzern
// kommen: Spiel-Icons der Server-Presets, Rollen-Menü-Emojis, Embed-Inhalte.
// Discord kennt keine SVGs — dort sind Emojis die richtige Wahl.
import {
Activity, AlertTriangle, Archive, ArrowLeft, ArrowRight, Award, Bell, Bot,
Cake, Calendar, Camera, Check, ChevronDown, ChevronLeft, ChevronRight,
Clock, Copy, Database, Download, Ticket, FileText, Gamepad2, Gauge, Gift,
Globe, Hash, Heart, Image, Key, Layers, Link2, List, Lock, LogOut, Mail,
MapPin, Megaphone, MessageSquare, Mic, Monitor, Moon, Package, Palette, UserCog,
PartyPopper, Pencil, Play, Plus, RefreshCw, Rocket, Save, Search, Send,
Server, Settings, Shield, Sparkles, Star, Tag, Terminal, ThumbsUp, Trash2,
TrendingUp, Trophy, Upload, User, Users, Wand2, Wrench, X, Zap,
} from 'lucide-react';
/** Einheitliche Darstellung: 18px, dünne Linien, am Text ausgerichtet */
const defaults = { size: 18, strokeWidth: 1.75, 'aria-hidden': true };
const make = (Cmp) => function Icon(props) {
return <Cmp {...defaults} {...props} className={`ic ${props.className ?? ''}`} />;
};
/* ── Bereiche & Navigation ──────────────────────────── */
export const IconDevlog = make(FileText);
export const IconRoadmap = make(MapPin);
export const IconMapPin = make(MapPin);
export const IconServer = make(Server);
export const IconGallery = make(Image);
export const IconLevel = make(TrendingUp);
export const IconEvents = make(Calendar);
export const IconChangelog = make(Rocket);
export const IconCommits = make(Terminal);
export const IconSetup = make(Settings);
export const IconProfile = make(User);
export const IconHome = make(Layers);
export const IconLogout = make(LogOut);
export const IconMenu = make(List);
/* ── Setup-Tabs ─────────────────────────────────────── */
export const IconStatus = make(Gauge);
export const IconBrand = make(Palette);
export const IconFeeds = make(Megaphone);
export const IconCommunity = make(Users);
export const IconRoles = make(Shield);
export const IconSupport = make(Ticket);
export const IconApplications = make(FileText);
export const IconComposer = make(Pencil);
export const IconSystem = make(Wrench);
export const IconApi = make(Key);
export const IconTeam = make(UserCog);
/* ── Aktionen & Zustände ────────────────────────────── */
export const IconCheck = make(Check);
export const IconX = make(X);
export const IconPlus = make(Plus);
export const IconTrash = make(Trash2);
export const IconEdit = make(Pencil);
export const IconSave = make(Save);
export const IconSend = make(Send);
export const IconCopy = make(Copy);
export const IconSearch = make(Search);
export const IconRefresh = make(RefreshCw);
export const IconUpload = make(Upload);
export const IconDownload = make(Download);
export const IconLink = make(Link2);
export const IconPlay = make(Play);
export const IconWarning = make(AlertTriangle);
export const IconLock = make(Lock);
export const IconArrowLeft = make(ArrowLeft);
export const IconArrowRight = make(ArrowRight);
export const IconChevronDown = make(ChevronDown);
export const IconChevronLeft = make(ChevronLeft);
export const IconChevronRight = make(ChevronRight);
/* ── Inhalte & Features ─────────────────────────────── */
export const IconBot = make(Bot);
export const IconBell = make(Bell);
export const IconBirthday = make(Cake);
export const IconGiveaway = make(Gift);
export const IconStar = make(Star);
export const IconTag = make(Tag);
export const IconKey = make(Key);
export const IconTrophy = make(Trophy);
export const IconAward = make(Award);
export const IconThumbsUp = make(ThumbsUp);
export const IconIdea = make(Sparkles);
export const IconMessage = make(MessageSquare);
export const IconMail = make(Mail);
export const IconVoice = make(Mic);
export const IconGame = make(Gamepad2);
export const IconMonitor = make(Monitor);
export const IconDatabase = make(Database);
export const IconArchive = make(Archive);
export const IconPackage = make(Package);
export const IconGlobe = make(Globe);
export const IconChannel = make(Hash);
export const IconClock = make(Clock);
export const IconActivity = make(Activity);
export const IconCamera = make(Camera);
export const IconHeart = make(Heart);
export const IconParty = make(PartyPopper);
export const IconMagic = make(Wand2);
export const IconZap = make(Zap);
export const IconMoon = make(Moon);