Skip to content

feat: ganti emoji toolbar ke lucide icons #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
ajianaz wants to merge 1 commit into from
Closed

feat: ganti emoji toolbar ke lucide icons #3

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 10 additions & 8 deletions src/lib/Toolbar.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
<script lang="ts">
import type { Tool, Point } from './types';
import { drawMode, currentTool, currentColor, currentThickness } from './stores';
import { Pen, Highlighter, Eraser, Undo2, Trash2, X } from '@lucide/svelte';

interface Props {
onundo: () => void;
Expand Down Expand Up @@ -75,10 +76,10 @@

// Auto-subscribe to stores (Svelte 5 $store syntax in template)

const tools: { id: Tool; icon: string; label: string }[] = [
{ id: 'pen', icon: '✏️', label: 'Pen' },
{ id: 'highlighter', icon: '🖍️', label: 'Highlighter' },
{ id: 'eraser', icon: '⌫', label: 'Eraser' }
const tools: { id: Tool; icon: typeof Pen; label: string }[] = [
{ id: 'pen', icon: Pen, label: 'Pen' },
{ id: 'highlighter', icon: Highlighter, label: 'Highlighter' },
{ id: 'eraser', icon: Eraser, label: 'Eraser' }
];

const colors = ['#ef4444', '#facc15', '#22c55e', '#ffffff'];
Expand All @@ -100,6 +101,7 @@
>
<!-- Tool buttons -->
{#each tools as tool (tool.id)}
{@const Icon = tool.icon}
<button
data-btn
class="btn tool-btn"
Expand All @@ -109,7 +111,7 @@
aria-pressed={$currentTool === tool.id}
title={tool.label}
>
{tool.icon}
<Icon size={16} strokeWidth={2} />
</button>
{/each}

Expand Down Expand Up @@ -137,17 +139,17 @@

<!-- Undo -->
<button data-btn class="btn" onclick={onundo} aria-label="Undo" title="Undo">
↩
<Undo2 size={16} strokeWidth={2} />
</button>

<!-- Clear all -->
<button data-btn class="btn" onclick={onclear} aria-label="Clear all" title="Clear all">
🗑
<Trash2 size={16} strokeWidth={2} />
</button>

<!-- Exit -->
<button data-btn class="btn exit-btn" onclick={onexit} aria-label="Exit draw mode" title="Exit">
✕
<X size={16} strokeWidth={2} />
</button>
</div>

Expand Down
Loading