till/managarten
1
0
Fork 0
mirror of https://github.com/Memo-2023/mana-monorepo.git synced 2026-05-23 22:16:43 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

feat(icons): migrate to phosphor-svelte for all icon usage

Browse source 
- Replace custom Icon.svelte component with phosphor-svelte library
- Remove iconPaths.ts with manually maintained SVG paths
- Update @manacore/shared-icons to re-export phosphor-svelte
- Migrate shared-ui Modal and ConfirmationModal components
- Migrate shared-theme-ui ThemeToggle and ThemeModeSelector
- Migrate all chat app components to use Phosphor Icons
- All apps now use consistent icon API: <IconName size={24} weight="bold" />

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Till-JS 2025-11-29 07:02:59 +01:00
parent 655da23d14
commit b97149ac12
17 changed files with 255 additions and 451 deletions
Download patch file Download diff file Expand all files Collapse all files

20
packages/shared-theme-ui/src/ThemeModeSelector.svelte
View file

@ -1,6 +1,6 @@
<script lang="ts">
import type { ThemeStore, ThemeMode } from '@manacore/shared-theme';
import { Icon } from '@manacore/shared-icons';
import { Sun, Moon, Desktop } from '@manacore/shared-icons';
interface Props {
/** Theme store instance */
@ -11,15 +11,15 @@
let { theme, class: className = '' }: Props = $props();
const modes: { mode: ThemeMode; icon: string; label: string }[] = [
{ mode: 'light', icon: 'sun', label: 'Light' },
{ mode: 'dark', icon: 'moon', label: 'Dark' },
{ mode: 'system', icon: 'monitor', label: 'System' },
const modes: { mode: ThemeMode; label: string }[] = [
{ mode: 'light', label: 'Light' },
{ mode: 'dark', label: 'Dark' },
{ mode: 'system', label: 'System' },
];
</script>
<div class="mode-selector {className}" role="radiogroup" aria-label="Theme mode">
{#each modes as { mode, icon, label }}
{#each modes as { mode, label }}
{@const isActive = theme.mode === mode}
<button
type="button"
@ -30,7 +30,13 @@
aria-checked={isActive}
aria-label="{label} mode"
>
<Icon name={icon} size={16} />
{#if mode === 'light'}
<Sun size={16} weight="bold" />
{:else if mode === 'dark'}
<Moon size={16} weight="bold" />
{:else}
<Desktop size={16} weight="bold" />
{/if}
<span class="label">{label}</span>
</button>
{/each}

6
packages/shared-theme-ui/src/ThemeToggle.svelte
View file

@ -1,6 +1,6 @@
<script lang="ts">
import type { ThemeStore } from '@manacore/shared-theme';
import { Icon } from '@manacore/shared-icons';
import { Sun, Moon } from '@manacore/shared-icons';
interface Props {
/** Theme store instance */
@ -31,9 +31,9 @@
title={showTooltip ? getTooltipText() : undefined}
>
{#if theme.effectiveMode === 'dark'}
<Icon name="sun" {size} class="theme-toggle-icon" />
<Sun {size} weight="bold" class="theme-toggle-icon" />
{:else}
<Icon name="moon" {size} class="theme-toggle-icon" />
<Moon {size} weight="bold" class="theme-toggle-icon" />
{/if}
</button>