fix: replace emoji icons with inline SVG (Icon.svelte + icons.js)

All emoji characters replaced with inline SVG icons:
- Plugin Manager sidebar: puzzle SVG icon
- Verstak logo: stack/tray SVG icon
- Plugin icons: flask SVG (from plugin manifest)
- Warning/error indicators: warning triangle SVG
- Settings button: gear SVG
- Vault recent: vault/shield SVG
- Fallback: dot SVG

New components:
- frontend/src/lib/ui/icons.js — SVG path map
- frontend/src/lib/ui/Icon.svelte — reusable SVG icon component

Icon policy: NO emoji or unicode pictographic symbols in the app.
Only SVG icons registered in icons.js are allowed.
Wails WebKitGTK does not render colour emoji.
This commit is contained in:
2026-06-17 19:02:51 +08:00
parent c2e14cae69
commit 6d2f7858eb
8 changed files with 214 additions and 26 deletions
@@ -1,4 +1,5 @@
<script>
import Icon from '../ui/Icon.svelte';
import PluginCard from './PluginCard.svelte';
import PluginBundleHost from '../plugin-host/PluginBundleHost.svelte';
import { onMount } from 'svelte';
@@ -151,7 +152,7 @@
<div class="loading">Scanning plugin directories...</div>
{:else if error}
<div class="error">
<div class="error-icon">⚠</div>
<Icon name="warning" size={24} className="error-icon" />
<div class="error-message">{error}</div>
<button class="retry-btn" on:click={loadAll} type="button">⟳ Retry</button>
</div>
@@ -329,7 +330,7 @@
padding: 2rem; text-align: center; color: #a0a0b8;
}
.error { color: #e94560; }
.error-icon { font-size: 2rem; margin-bottom: 0.5rem; }
.error-icon { color: #e94560; margin-bottom: 0.5rem; }
.error-message {
font-family: monospace; font-size: 0.85rem; margin-bottom: 1rem; word-break: break-word;
}