Webinterface: Emojis durch Lucide-Icons ersetzt
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:
@@ -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);
|
||||
Reference in New Issue
Block a user