From c02e2649af111db6231bc43afa20742f0ae38e1f Mon Sep 17 00:00:00 2001 From: Till JS Date: Tue, 31 Mar 2026 12:46:39 +0200 Subject: [PATCH] docs: add Phosphor icon guidelines to code-style.md Document the icon standard: always use Phosphor components from @manacore/shared-icons, never inline SVG paths. Lists exceptions (spinners, brand logos, charts, decorative SVGs). Co-Authored-By: Claude Opus 4.6 (1M context) --- .claude/guidelines/code-style.md | 32 ++++++++++++++++++++++++++++++++ 1 file changed, 32 insertions(+) diff --git a/.claude/guidelines/code-style.md b/.claude/guidelines/code-style.md index 6fbffb0f3..0c4a62085 100644 --- a/.claude/guidelines/code-style.md +++ b/.claude/guidelines/code-style.md @@ -190,6 +190,38 @@ async consume(userId: string, amount: number, reason: string): Promise + import { Plus, Trash, MagnifyingGlass } from '@manacore/shared-icons'; + + + + + +``` + +### Rules + +- **Never use inline SVG `` for icons.** Always use Phosphor components. +- Available weights: `thin`, `light`, `regular` (default), `bold`, `fill`, `duotone` +- Use `weight="fill"` for filled variants (e.g., filled heart, filled star) +- Size prop replaces Tailwind `w-N h-N` classes: `w-4 h-4` → `size={16}`, `w-5 h-5` → `size={20}` +- Browse icons at [phosphoricons.com](https://phosphoricons.com) + +### Exceptions (inline SVG allowed) + +- **Spinners/loading animations** (circle + arc with `stroke-opacity`) +- **Brand logos** (Mana, Google, app-specific logos) +- **Charts & data visualizations** (DonutChart, RadarChart, etc.) +- **Complex decorative illustrations** (maps, scenes) +- **Dynamic icon rendering** via `{@html}` (Icon.svelte wrappers) + ## Code Organization ### File Size