jakob48/crumbs
1
0
Fork 0
forked from mirror/crumbs-original
Code Pull Requests Activity

refactor: migrate Header, SearchBar, Sidebar, NoteCard, NoteEditor icons to Iconify pixelarticons

Browse Source 
Replace lucide-svelte imports with @iconify/svelte using pixelarticons
icon set across the five main UI components.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Frederic Cabassut
2026-03-20 19:59:40 +01:00
co-authored by Claude Opus 4.6
parent e8c3aca5ec
commit 92743cda5f
5 changed files with 34 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/Layout/Header.svelte
+3 -4
View File
@@ -1,8 +1,7 @@
<script lang="ts">
import SearchBar from '../SearchBar.svelte';
import SyncIndicator from '../SyncIndicator.svelte';
import Menu from 'lucide-svelte/icons/menu';
import Search from 'lucide-svelte/icons/search';
import Icon from '@iconify/svelte';
interface Props {
onMenuToggle: () => void;
@@ -24,7 +23,7 @@
class="rounded-sm p-2 hover:bg-[var(--border)]/10"
aria-label="Toggle sidebar"
>
<Menu class="h-6 w-6 text-[var(--text)]" />
<Icon icon="pixelarticons:menu" class="h-6 w-6 text-[var(--text)]" />
</button>
<div class="flex items-center gap-2">
@@ -43,7 +42,7 @@
class="ml-auto rounded-sm p-2 hover:bg-[var(--border)]/10 lg:hidden"
aria-label="Search"
>
<Search class="h-5 w-5 text-[var(--text)]" />
<Icon icon="pixelarticons:search" class="h-5 w-5 text-[var(--text)]" />
</button>
<div class="flex items-center gap-2">
src/lib/components/Layout/Sidebar.svelte
+7 -7
View File
@@ -1,7 +1,7 @@
<script lang="ts">
import { page } from '$app/stores';
import { allTags } from '$lib/stores/notes.js';
import { StickyNote, Archive, Trash2, Tag, Settings } from 'lucide-svelte';
import Icon from '@iconify/svelte';
interface Props {
open: boolean;
@@ -17,9 +17,9 @@
}
const navItems = [
{ href: '/', label: 'Crumbs', icon: StickyNote, match: (p: string) => p === '/' },
{ href: '/archive', label: 'Archive', icon: Archive, match: (p: string) => p === '/archive' },
{ href: '/trash', label: 'Trash', icon: Trash2, match: (p: string) => p === '/trash' }
{ href: '/', label: 'Crumbs', icon: 'pixelarticons:sticky-note', match: (p: string) => p === '/' },
{ href: '/archive', label: 'Archive', icon: 'pixelarticons:archive', match: (p: string) => p === '/archive' },
{ href: '/trash', label: 'Trash', icon: 'pixelarticons:trash', match: (p: string) => p === '/trash' }
];
</script>
@@ -44,7 +44,7 @@
onclick={closeMobile}
class="flex w-full items-center gap-3 rounded-sm px-6 py-3 text-left text-sm transition-colors {item.match($page.url.pathname) ? 'bg-[var(--primary)]/15 text-[var(--primary)]' : 'text-[var(--text)] hover:bg-[var(--bg-base)]'}"
>
<item.icon size={20} />
<Icon icon={item.icon} width={20} />
{item.label}
</a>
</li>
@@ -62,7 +62,7 @@
onclick={closeMobile}
class="flex w-full items-center gap-3 rounded-sm px-6 py-2 text-left text-sm transition-colors {$page.url.pathname === `/tag/${tag}` ? 'bg-[var(--primary)]/15 text-[var(--primary)]' : 'text-[var(--text)] hover:bg-[var(--bg-base)]'}"
>
<Tag size={16} />
<Icon icon="pixelarticons:label" width={16} />
#{tag}
</a>
</li>
@@ -78,7 +78,7 @@
onclick={closeMobile}
data-testid="settings-link"
>
<Settings size={20} />
<Icon icon="pixelarticons:settings-cog" width={20} />
Settings
</a>
</div>
src/lib/components/NoteCard.svelte
+9 -14
View File
@@ -5,12 +5,7 @@
import ImageLightbox from './ImageLightbox.svelte';
import CollaboratorPopover from './CollaboratorPopover.svelte';
import type { Note } from '$lib/types/index.js';
import Undo2 from 'lucide-svelte/icons/undo-2';
import Trash2 from 'lucide-svelte/icons/trash-2';
import Bookmark from 'lucide-svelte/icons/bookmark';
import Archive from 'lucide-svelte/icons/archive';
import ArchiveRestore from 'lucide-svelte/icons/archive-restore';
import UserMinus from 'lucide-svelte/icons/user-minus';
import Icon from '@iconify/svelte';
interface ChecklistItem {
text: string;
@@ -114,7 +109,7 @@
title="Unfavorite"
data-testid="favorite-indicator"
>
<Bookmark class="h-4 w-4 fill-[var(--primary)]" />
<Icon icon="pixelarticons:heart" class="h-4 w-4 fill-[var(--primary)]" />
</button>
{/if}
</div>
@@ -156,7 +151,7 @@
title="Restore"
data-testid="restore-btn"
>
<Undo2 class="h-4 w-4" />
<Icon icon="pixelarticons:undo" class="h-4 w-4" />
</button>
<button
onclick={stop(() => deleteNote(note.id))}
@@ -164,7 +159,7 @@
title="Delete forever"
data-testid="delete-forever-btn"
>
<Trash2 class="h-4 w-4 text-[var(--destructive)]" />
<Icon icon="pixelarticons:trash" class="h-4 w-4 text-[var(--destructive)]" />
</button>
{:else}
{#if !note.pinned}
@@ -174,7 +169,7 @@
title="Favorite"
data-testid="favorite-btn"
>
<Bookmark class="h-4 w-4" />
<Icon icon="pixelarticons:heart" class="h-4 w-4" />
</button>
{/if}
{#if $currentFilter === 'archived'}
@@ -184,7 +179,7 @@
title="Unarchive"
data-testid="unarchive-btn"
>
<ArchiveRestore class="h-4 w-4" />
<Icon icon="pixelarticons:archive" class="h-4 w-4" />
</button>
{:else}
<button
@@ -193,7 +188,7 @@
title="Archive"
data-testid="archive-btn"
>
<Archive class="h-4 w-4" />
<Icon icon="pixelarticons:archive" class="h-4 w-4" />
</button>
{/if}
{#if note.isShared && !note.isOwner}
@@ -203,7 +198,7 @@
title="Leave note"
data-testid="leave-btn"
>
<UserMinus class="h-4 w-4" />
<Icon icon="pixelarticons:user-minus" class="h-4 w-4" />
</button>
{:else}
<button
@@ -212,7 +207,7 @@
title="Delete"
data-testid="trash-btn"
>
<Trash2 class="h-4 w-4" />
<Icon icon="pixelarticons:trash" class="h-4 w-4" />
</button>
{/if}
{/if}
src/lib/components/NoteEditor.svelte
+11 -19
View File
@@ -13,15 +13,7 @@
import { getPreferences } from '$lib/stores/preferences.svelte.js';
import type { Editor } from '@tiptap/core';
import type { Note, NoteColor, Attachment, Collaborator } from '$lib/types/index.js';
import Palette from 'lucide-svelte/icons/palette';
import SquareCheck from 'lucide-svelte/icons/square-check';
import ImageIcon from 'lucide-svelte/icons/image';
import Type from 'lucide-svelte/icons/type';
import FileCode from 'lucide-svelte/icons/file-code';
import FileText from 'lucide-svelte/icons/file-text';
import UserPlus from 'lucide-svelte/icons/user-plus';
import Users from 'lucide-svelte/icons/users';
import History from 'lucide-svelte/icons/history';
import Icon from '@iconify/svelte';
interface Props {
note: Note | null;
@@ -345,7 +337,7 @@
title="Background color"
data-testid="color-picker-toggle"
>
<Palette class="h-5 w-5 text-[var(--text-muted)]" />
<Icon icon="pixelarticons:colors-swatch" class="h-5 w-5 text-[var(--text-muted)]" />
</button>
{#if showColorPicker}
<div class="absolute left-0 bottom-full z-10 mb-2 w-[calc(100vw-4rem)] max-w-xs rounded-sm border border-[var(--border)] bg-[var(--bg-surface)] p-2">
@@ -362,9 +354,9 @@
data-testid="checklist-toggle"
>
{#if checklistMode}
<Type class="h-5 w-5" />
<Icon icon="pixelarticons:art-text" class="h-5 w-5" />
{:else}
<SquareCheck class="h-5 w-5" />
<Icon icon="pixelarticons:checkbox-on" class="h-5 w-5" />
{/if}
</button>
@@ -375,7 +367,7 @@
title="Image attachments"
data-testid="image-toggle"
>
<ImageIcon class="h-5 w-5 {showImageUpload ? 'text-[var(--primary)]' : ''}" />
<Icon icon="pixelarticons:image" class="h-5 w-5 {showImageUpload ? 'text-[var(--primary)]' : ''}" />
</button>
<!-- Raw markdown mode toggle -->
@@ -387,9 +379,9 @@
data-testid="markdown-toggle"
>
{#if rawMarkdownMode}
<FileText class="h-5 w-5" />
<Icon icon="pixelarticons:file-text" class="h-5 w-5" />
{:else}
<FileCode class="h-5 w-5" />
<Icon icon="pixelarticons:script" class="h-5 w-5" />
{/if}
</button>
@@ -402,14 +394,14 @@
data-testid="share-toggle"
>
{#if isShared}
<Users class="h-5 w-5 text-[var(--primary)]" />
<Icon icon="pixelarticons:users" class="h-5 w-5 text-[var(--primary)]" />
{:else}
<UserPlus class="h-5 w-5" />
<Icon icon="pixelarticons:user-plus" class="h-5 w-5" />
{/if}
</button>
{:else if isShared}
<span class="flex items-center gap-1 rounded-sm p-2 text-[var(--text-muted)]" title="Shared note">
<Users class="h-5 w-5" />
<Icon icon="pixelarticons:users" class="h-5 w-5" />
</span>
{/if}
@@ -421,7 +413,7 @@
title="Version history"
data-testid="history-toggle"
>
<History class="h-5 w-5 {showHistory ? 'text-[var(--primary)]' : ''}" />
<Icon icon="pixelarticons:timeline" class="h-5 w-5 {showHistory ? 'text-[var(--primary)]' : ''}" />
</button>
{/if}
</div>
src/lib/components/SearchBar.svelte
+4 -6
View File
@@ -1,9 +1,7 @@
<script lang="ts">
import { notes, loadNotes, currentFilter } from '$lib/stores/notes.js';
import type { Note } from '$lib/types/index.js';
import Search from 'lucide-svelte/icons/search';
import X from 'lucide-svelte/icons/x';
import ArrowLeft from 'lucide-svelte/icons/arrow-left';
import Icon from '@iconify/svelte';
interface Props {
onClose?: () => void;
@@ -59,10 +57,10 @@
<div class="flex items-center rounded-sm border border-[var(--border-subtle)] bg-[var(--bg-base)] px-4 py-2 focus-within:border-[var(--primary)]">
{#if onClose}
<button onclick={close} class="mr-2 text-[var(--text-muted)] hover:text-[var(--text)]" aria-label="Back">
<ArrowLeft class="h-5 w-5" />
<Icon icon="pixelarticons:arrow-left" class="h-5 w-5" />
</button>
{:else}
<Search class="mr-3 h-5 w-5 text-[var(--text-muted)]" />
<Icon icon="pixelarticons:search" class="mr-3 h-5 w-5 text-[var(--text-muted)]" />
{/if}
<input
bind:this={inputEl}
@@ -75,7 +73,7 @@
/>
{#if query}
<button onclick={clearSearch} class="ml-2 text-[var(--text-muted)] hover:text-[var(--text)]" aria-label="Clear search">
<X class="h-5 w-5" />
<Icon icon="pixelarticons:close" class="h-5 w-5" />
</button>
{/if}
</div>