mirror of
https://github.com/Memo-2023/mana-monorepo.git
synced 2026-05-14 20:41:09 +02:00
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) <noreply@anthropic.com>
This commit is contained in:
parent
14df2cd9e2
commit
c02e2649af
1 changed files with 32 additions and 0 deletions
|
|
@ -190,6 +190,38 @@ async consume(userId: string, amount: number, reason: string): Promise<Result<Ba
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
|
## Icons
|
||||||
|
|
||||||
|
All SvelteKit web apps use **Phosphor icons** via `@manacore/shared-icons` (re-exports `phosphor-svelte`).
|
||||||
|
|
||||||
|
### Usage
|
||||||
|
|
||||||
|
```svelte
|
||||||
|
<script>
|
||||||
|
import { Plus, Trash, MagnifyingGlass } from '@manacore/shared-icons';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<Plus size={20} />
|
||||||
|
<Trash size={16} class="text-red-500" />
|
||||||
|
<MagnifyingGlass size={20} weight="bold" />
|
||||||
|
```
|
||||||
|
|
||||||
|
### Rules
|
||||||
|
|
||||||
|
- **Never use inline SVG `<path d="...">` 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
|
## Code Organization
|
||||||
|
|
||||||
### File Size
|
### File Size
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue