Joren/qbz
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(icons): rename all deprecated lucide-svelte icons to v1 names

Browse Source 
Replace Github icon with inline SVG (brand icons removed in lucide v1).
Rename 15 deprecated icon aliases to their canonical v1 names:
AlertCircle->CircleAlert, AlertTriangle->TriangleAlert,
BarChart2->ChartNoAxesColumn, CheckCircle->CircleCheckBig,
CheckSquare->SquareCheckBig, Edit3->PenLine, Filter->Funnel,
HelpCircle->CircleHelp, Home->House, Loader2->LoaderCircle,
Mic2->MicVocal, MoreHorizontal->Ellipsis, MoreVertical->EllipsisVertical,
XCircle->CircleX, AlignLeft->AlignStartVertical

cc
This commit is contained in:
victorrhgap committed 2026-03-30 20:53:24 -06:00
1 parent 0ce54c3f10
commit 00cf8cf450
60 files changed
+220 -186
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/lib/components/AboutModal.svelte
+2 -2
View File
@@ -1,5 +1,5 @@
<script lang="ts">
import { X, Github, Globe, ExternalLink } from 'lucide-svelte';
import { X, Globe, ExternalLink } from 'lucide-svelte';
import { t } from 'svelte-i18n';
import { openUrl } from '@tauri-apps/plugin-opener';
import { getName, getVersion } from '@tauri-apps/api/app';
@@ -76,7 +76,7 @@
<!-- Links -->
<div class="links">
<button class="link-btn" onclick={() => handleOpenUrl('https://github.com/vicrodh/qbz')}>
<Github size={16} />
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 98 96" fill="currentColor"><path d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362l-.08-9.127c-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126l-.08 13.526c0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z"/></svg>
<span>GitHub</span>
<ExternalLink size={12} />
</button>
src/lib/components/AlbumCreditsModal.svelte
+2 -2
View File
@@ -1,7 +1,7 @@
<script lang="ts">
import { invoke } from '@tauri-apps/api/core';
import { locale } from 'svelte-i18n';
import { Play, ChevronDown, ChevronUp, Loader2, X } from 'lucide-svelte';
import { Play, ChevronDown, ChevronUp, LoaderCircle, X } from 'lucide-svelte';
import type { AlbumCredits, QobuzAlbum, Performer, TrackCredits } from '$lib/types';
interface Props {
@@ -175,7 +175,7 @@
<div class="credits-modal" role="dialog" aria-modal="true" tabindex="-1" onclick={(e) => e.stopPropagation()}>
{#if loading}
<div class="loading-state">
<Loader2 size={32} class="spinner" />
<LoaderCircle size={32} class="spinner" />
<span>Loading credits...</span>
</div>
{:else if error}
src/lib/components/AlbumMenu.svelte
+2 -2
View File
@@ -3,7 +3,7 @@
import Portal from './Portal.svelte';
import {
ChevronRight,
MoreHorizontal,
Ellipsis,
ListPlus,
ListEnd,
ListMusic,
@@ -325,7 +325,7 @@
}}
aria-label="Album actions"
>
<MoreHorizontal size={20} color="currentColor" />
<Ellipsis size={20} color="currentColor" />
</button>
{#if isOpen && portalTarget}
src/lib/components/CastPicker.svelte
+3 -3
View File
@@ -1,7 +1,7 @@
<script lang="ts">
import { invoke } from '@tauri-apps/api/core';
import { onMount, onDestroy } from 'svelte';
import { X, Cast, Loader2, Monitor, Wifi, Tv, Speaker, Power } from 'lucide-svelte';
import { X, Cast, LoaderCircle, Monitor, Wifi, Tv, Speaker, Power } from 'lucide-svelte';
import {
subscribe as subscribeCast,
getCastState,
@@ -229,12 +229,12 @@
<div class="content">
{#if connecting}
<div class="loading">
<Loader2 size={32} class="spin" />
<LoaderCircle size={32} class="spin" />
<p>Connecting...</p>
</div>
{:else if loading && devices().length === 0}
<div class="loading">
<Loader2 size={32} class="spin" />
<LoaderCircle size={32} class="spin" />
<p>Searching for devices...</p>
</div>
{:else if error}
src/lib/components/DACSetupWizard.svelte
+8 -8
View File
@@ -1,5 +1,5 @@
<script lang="ts">
import { X, CheckCircle, Check, AlertTriangle, XCircle, Search, Loader2 } from 'lucide-svelte';
import { X, CircleCheckBig, Check, TriangleAlert, CircleX, Search, LoaderCircle } from 'lucide-svelte';
import { invoke } from '@tauri-apps/api/core';
import { t } from '$lib/i18n';
import WizardStepper, { type Step } from './wizard/WizardStepper.svelte';
@@ -457,22 +457,22 @@
{#if dacType === 'usb'}
<span class="dac-type usb">
<CheckCircle size={14} />
<CircleCheckBig size={14} />
{$t('dacWizard.detectDac.validation.usbDac')}
</span>
{:else if dacType === 'pci'}
<span class="dac-type pci">
<AlertTriangle size={14} />
<TriangleAlert size={14} />
{$t('dacWizard.detectDac.validation.pciDac')}
</span>
{:else if dacType === 'bluetooth'}
<span class="dac-type bluetooth">
<XCircle size={14} />
<CircleX size={14} />
{$t('dacWizard.detectDac.validation.bluetoothDac')}
</span>
{:else if dacType === 'virtual'}
<span class="dac-type virtual">
<XCircle size={14} />
<CircleX size={14} />
{$t('dacWizard.detectDac.validation.virtualDac')}
</span>
{/if}
@@ -480,7 +480,7 @@
{:else if dacValidation === 'invalid'}
<div class="validation-feedback">
<span class="validation-status invalid">
<XCircle size={14} />
<CircleX size={14} />
{$t('dacWizard.detectDac.validation.invalidFormat')}
</span>
</div>
@@ -496,7 +496,7 @@
disabled={isQueryingDac}
>
{#if isQueryingDac}
<Loader2 size={16} class="spin" />
<LoaderCircle size={16} class="spin" />
{$t('dacWizard.detectDac.query.querying')}
{:else}
<Search size={16} />
@@ -679,7 +679,7 @@
{:else if currentStep === 'done'}
<div class="done-content">
<CheckCircle size={64} class="done-icon" />
<CircleCheckBig size={64} class="done-icon" />
{#if dacCapabilities?.description || dacNodeName}
<div class="done-dac-info">
src/lib/components/DownloadButton.svelte
+2 -2
View File
@@ -1,5 +1,5 @@
<script lang="ts">
import { CloudDownload, AlertCircle, CloudOff } from 'lucide-svelte';
import { CloudDownload, CircleAlert, CloudOff } from 'lucide-svelte';
import { t } from '$lib/i18n';
import {
subscribe as subscribeOffline,
@@ -106,7 +106,7 @@
/>
</svg>
{:else if status === 'failed'}
<AlertCircle {size} />
<CircleAlert {size} />
{:else if isOffline}
<CloudOff {size} />
{:else}
src/lib/components/ExpandedPlayer.svelte
+2 -2
View File
@@ -1,6 +1,6 @@
<script lang="ts">
import { invoke } from '@tauri-apps/api/core';
import { X, Shuffle, SkipBack, Play, Pause, SkipForward, Repeat, Heart, List, Maximize2, MoreHorizontal, Cast } from 'lucide-svelte';
import { X, Shuffle, SkipBack, Play, Pause, SkipForward, Repeat, Heart, List, Maximize2, Ellipsis, Cast } from 'lucide-svelte';
import QualityBadge from './QualityBadge.svelte';
import StackIcon from './StackIcon.svelte';
import LyricsLines from './lyrics/LyricsLines.svelte';
@@ -365,7 +365,7 @@
<Heart size={22} fill={isFavorite ? 'var(--accent-primary)' : 'none'} color={isFavorite ? 'var(--accent-primary)' : 'currentColor'} />
</button>
<button class="action-btn" title="More options">
<MoreHorizontal size={22} />
<Ellipsis size={22} />
</button>
</div>
</div>
src/lib/components/FavoritePlaylistCard.svelte
+2 -2
View File
@@ -1,6 +1,6 @@
<script lang="ts">
import { tick, onMount } from 'svelte';
import { Play, Heart, MoreHorizontal, ListPlus, Share2, ListMusic, Trash2 } from 'lucide-svelte';
import { Play, Heart, Ellipsis, ListPlus, Share2, ListMusic, Trash2 } from 'lucide-svelte';
import PlaylistCollage from './PlaylistCollage.svelte';
import {
openMenu as openGlobalMenu,
@@ -196,7 +196,7 @@
onclick={toggleMenu}
title="More options"
>
<MoreHorizontal size={18} />
<Ellipsis size={18} />
</button>
</div>
</div>
src/lib/components/FolderSettingsModal.svelte
+4 -4
View File
@@ -1,7 +1,7 @@
<script lang="ts">
import { invoke } from '@tauri-apps/api/core';
import { open } from '@tauri-apps/plugin-dialog';
import { X, HardDrive, Network, RefreshCw, Power, PowerOff, AlertTriangle, FolderOpen } from 'lucide-svelte';
import { X, HardDrive, Network, RefreshCw, Power, PowerOff, TriangleAlert, FolderOpen } from 'lucide-svelte';
import { t } from '$lib/i18n';
// LibraryFolder type matching Rust backend
@@ -311,19 +311,19 @@
{#if isNetwork && !detectedIsNetwork}
<!-- User marked as network, but not detected -->
<span class="form-hint override-hint warning">
<AlertTriangle size={12} />
<TriangleAlert size={12} />
{$t('library.networkOverrideMarkedNetwork')}
</span>
{:else}
<!-- User marked as local, but detected as network -->
<span class="form-hint override-hint danger">
<AlertTriangle size={12} />
<TriangleAlert size={12} />
{$t('library.networkOverrideMarkedLocal')}
</span>
{/if}
{:else if userOverrideNetwork}
<span class="form-hint override-hint">
<AlertTriangle size={12} />
<TriangleAlert size={12} />
{$t('library.networkOverrideHint')}
</span>
{:else}
src/lib/components/GenreFilterPopup.svelte
+3 -3
View File
@@ -1,6 +1,6 @@
<script lang="ts">
import { tick } from 'svelte';
import { SlidersHorizontal, X, Minus, Check, ChevronRight, ChevronDown, Search, Loader2 } from 'lucide-svelte';
import { SlidersHorizontal, X, Minus, Check, ChevronRight, ChevronDown, Search, LoaderCircle } from 'lucide-svelte';
import { t } from '$lib/i18n';
import {
getChildGenres,
@@ -299,7 +299,7 @@
{#if hasLoadedChildren || !areChildrenLoaded(parentNode.genre.id)}
<button class="expand-btn" onclick={(e) => { e.stopPropagation(); toggleExpanded(parentNode.genre.id); }} type="button" title={isExpanded ? $t('genreFilter.collapse') : $t('genreFilter.expand')}>
{#if isLoading}
<Loader2 size={14} class="animate-spin" />
<LoaderCircle size={14} class="animate-spin" />
{:else if isExpanded}
<ChevronDown size={14} />
{:else}
@@ -339,7 +339,7 @@
{#if hasGrandchildren}
<button class="expand-btn" onclick={(e) => { e.stopPropagation(); toggleExpanded(childNode.genre.id); }} type="button" title={childExpanded ? $t('genreFilter.collapse') : $t('genreFilter.expand')}>
{#if childLoading}
<Loader2 size={12} class="animate-spin" />
<LoaderCircle size={12} class="animate-spin" />
{:else if childExpanded}
<ChevronDown size={12} />
{:else}
src/lib/components/HeroSection.svelte
+2 -2
View File
@@ -1,5 +1,5 @@
<script lang="ts">
import { Play, MoreHorizontal } from 'lucide-svelte';
import { Play, Ellipsis } from 'lucide-svelte';
interface Props {
artwork: string;
@@ -32,7 +32,7 @@
<span>Play</span>
</button>
<button class="more-btn">
<MoreHorizontal size={16} color="white" />
<Ellipsis size={16} color="white" />
<span>More</span>
</button>
</div>
src/lib/components/LogsModal.svelte
+3 -3
View File
@@ -5,7 +5,7 @@
import Modal from './Modal.svelte';
import { getConsoleLogsAsText } from '$lib/stores/consoleLogStore';
import { showToast } from '$lib/stores/toastStore';
import { Loader2, Copy, Check } from 'lucide-svelte';
import { LoaderCircle, Copy, Check } from 'lucide-svelte';
interface Props {
isOpen: boolean;
@@ -95,7 +95,7 @@
<div class="log-container">
{#if isLoading}
<div class="loading">
<Loader2 size={20} class="spin" />
<LoaderCircle size={20} class="spin" />
</div>
{:else}
<pre class="log-output">{activeTab === 'terminal' ? terminalLogs : consoleLogs}</pre>
@@ -112,7 +112,7 @@
disabled={activeTab === 'terminal' ? isUploadingTerminal : isUploadingConsole}
>
{#if (activeTab === 'terminal' ? isUploadingTerminal : isUploadingConsole)}
<Loader2 size={14} class="spin" />
<LoaderCircle size={14} class="spin" />
{$t('settings.developer.uploading')}
{:else}
{$t('settings.developer.uploadTab', { values: { tab: activeTab === 'terminal' ? $t('settings.developer.tabTerminal') : $t('settings.developer.tabConsole') } })}
src/lib/components/MigrationModal.svelte
+5 -5
View File
@@ -3,7 +3,7 @@
import { listen, type UnlistenFn } from '@tauri-apps/api/event';
import { onMount, onDestroy } from 'svelte';
import Modal from './Modal.svelte';
import { AlertCircle, CheckCircle, Loader, XCircle } from 'lucide-svelte';
import { CircleAlert, CircleCheckBig, Loader, CircleX } from 'lucide-svelte';
interface Props {
isOpen: boolean;
@@ -72,7 +72,7 @@
{#if !migrating && !progress?.completed}
<div class="info-section">
<div class="info-icon">
<AlertCircle size={48} color="var(--accent-primary)" />
<CircleAlert size={48} color="var(--accent-primary)" />
</div>
<h3>Legacy Downloads Detected</h3>
<p>
@@ -116,17 +116,17 @@
{:else if progress?.completed}
<div class="complete-section">
<div class="complete-icon">
<CheckCircle size={48} color="var(--success)" />
<CircleCheckBig size={48} color="var(--success)" />
</div>
<h3>Migration Complete</h3>
<div class="stats">
<div class="stat">
<CheckCircle size={20} color="var(--success)" />
<CircleCheckBig size={20} color="var(--success)" />
<span>{progress.successful} successful</span>
</div>
{#if progress.failed > 0}
<div class="stat error">
<XCircle size={20} color="var(--error)" />
<CircleX size={20} color="var(--error)" />
<span>{progress.failed} failed</span>
</div>
{/if}
src/lib/components/NowPlayingBar.backup.svelte
+2 -2
View File
@@ -13,7 +13,7 @@
VolumeX,
Volume1,
Cast,
Mic2
MicVocal
} from 'lucide-svelte';
import QualityBadge from './QualityBadge.svelte';
import GlassSurface from './glass/GlassSurface.svelte';
@@ -251,7 +251,7 @@
onclick={onToggleLyrics}
title="Lyrics"
>
<Mic2 size={20} />
<MicVocal size={20} />
</button>
<!-- Volume Control -->
src/lib/components/NowPlayingBar.svelte
+4 -4
View File
@@ -14,10 +14,10 @@
VolumeX,
Volume1,
Cast,
Mic2,
MicVocal,
Maximize2,
PictureInPicture2,
AlertTriangle
TriangleAlert
} from 'lucide-svelte';
import QualityBadge from './QualityBadge.svelte';
import AudioOutputBadges from './AudioOutputBadges.svelte';
@@ -457,7 +457,7 @@
title={$translateStore('degraded.title')}
role="status"
>
<AlertTriangle size={16} />
<TriangleAlert size={16} />
</div>
{/if}
@@ -490,7 +490,7 @@
title={isOffline ? $translateStore('offline.featureDisabled') : $translateStore('player.lyrics')}
aria-label={isOffline ? $translateStore('offline.featureDisabled') : $translateStore('player.lyrics')}
>
<Mic2 size={16} aria-hidden="true" />
<MicVocal size={16} aria-hidden="true" />
</button>
{#if onOpenMiniPlayer}
src/lib/components/QobuzPlaylistCard.svelte
+2 -2
View File
@@ -1,6 +1,6 @@
<script lang="ts">
import { tick, onMount } from 'svelte';
import { Play, ListMusic, Plus, MoreHorizontal, ListPlus, Library, Share2 } from 'lucide-svelte';
import { Play, ListMusic, Plus, Ellipsis, ListPlus, Library, Share2 } from 'lucide-svelte';
import { t } from '$lib/i18n';
import {
openMenu as openGlobalMenu,
@@ -257,7 +257,7 @@
onclick={toggleMenu}
title={$t('actions.moreOptions')}
>
<MoreHorizontal size={18} />
<Ellipsis size={18} />
</button>
</div>
</div>
src/lib/components/QueuePanel.svelte
+3 -3
View File
@@ -1,6 +1,6 @@
<script lang="ts">
import { onDestroy } from 'svelte';
import { X, Search, Heart, MoreVertical, Trash2, ListPlus, Info } from 'lucide-svelte';
import { X, Search, Heart, EllipsisVertical, Trash2, ListPlus, Info } from 'lucide-svelte';
import { t } from '$lib/i18n';
import { cachedSrc } from '$lib/actions/cachedImage';
import {
@@ -381,7 +381,7 @@
onclick={(e) => toggleTrackMenu(e, originalIndex)}
title={$t('actions.more')}
>
<MoreVertical size={16} />
<EllipsisVertical size={16} />
</button>
{#if openMenuIndex === originalIndex}
<div class="track-context-menu">
@@ -444,7 +444,7 @@
onclick={(e) => toggleHistoryMenu(e, track.id)}
title={$t('actions.more')}
>
<MoreVertical size={16} />
<EllipsisVertical size={16} />
</button>
{#if openHistoryMenuId === track.id}
<div class="track-context-menu">
src/lib/components/RemoteControlSetupGuide.svelte
+6 -6
View File
@@ -1,5 +1,5 @@
<script lang="ts">
import { X, CheckCircle, Smartphone, Shield, Key, QrCode, Wifi } from 'lucide-svelte';
import { X, CircleCheckBig, Smartphone, Shield, Key, QrCode, Wifi } from 'lucide-svelte';
import { t } from '$lib/i18n';
import WizardStepper, { type Step } from './wizard/WizardStepper.svelte';
@@ -139,19 +139,19 @@
<div class="feature-list">
<div class="feature-item">
<CheckCircle size={16} class="feature-check" />
<CircleCheckBig size={16} class="feature-check" />
<span>{$t('remoteControlWizard.welcome.feature1')}</span>
</div>
<div class="feature-item">
<CheckCircle size={16} class="feature-check" />
<CircleCheckBig size={16} class="feature-check" />
<span>{$t('remoteControlWizard.welcome.feature2')}</span>
</div>
<div class="feature-item">
<CheckCircle size={16} class="feature-check" />
<CircleCheckBig size={16} class="feature-check" />
<span>{$t('remoteControlWizard.welcome.feature3')}</span>
</div>
<div class="feature-item">
<CheckCircle size={16} class="feature-check" />
<CircleCheckBig size={16} class="feature-check" />
<span>{$t('remoteControlWizard.welcome.feature4')}</span>
</div>
</div>
@@ -342,7 +342,7 @@
{:else if currentStep === 'done'}
<div class="done-content">
<CheckCircle size={64} class="done-icon" />
<CircleCheckBig size={64} class="done-icon" />
<p class="body-text pwa-hint">{$t('remoteControlWizard.done.pwaHint')}</p>
src/lib/components/SearchPlaylistCard.svelte
+2 -2
View File
@@ -1,6 +1,6 @@
<script lang="ts">
import { tick, onMount } from 'svelte';
import { Play, Heart, MoreHorizontal, ListPlus, Library, Share2, ListMusic } from 'lucide-svelte';
import { Play, Heart, Ellipsis, ListPlus, Library, Share2, ListMusic } from 'lucide-svelte';
import PlaylistCollage from './PlaylistCollage.svelte';
import type { Playlist } from '$lib/stores/searchState';
import {
@@ -195,7 +195,7 @@
onclick={toggleMenu}
title="More options"
>
<MoreHorizontal size={18} />
<Ellipsis size={18} />
</button>
</div>
</div>
src/lib/components/Sidebar.svelte
+2 -2
View File
@@ -1,6 +1,6 @@
<script lang="ts">
import { tick } from 'svelte';
import { Search, HardDrive, Plus, RefreshCw, ChevronDown, ChevronUp, Heart, ListMusic, Import, Settings, MoreHorizontal, ArrowUpDown, ChevronRight, ChevronLeft, Folder, FolderPlus, X, User, Disc, Music, ShoppingBag, Eye, EyeOff, Pencil } from 'lucide-svelte';
import { Search, HardDrive, Plus, RefreshCw, ChevronDown, ChevronUp, Heart, ListMusic, Import, Settings, Ellipsis, ArrowUpDown, ChevronRight, ChevronLeft, Folder, FolderPlus, X, User, Disc, Music, ShoppingBag, Eye, EyeOff, Pencil } from 'lucide-svelte';
import type { FavoritesPreferences } from '$lib/types';
import { invoke } from '@tauri-apps/api/core';
import { onMount } from 'svelte';
@@ -1611,7 +1611,7 @@
onclick={(e) => { e.stopPropagation(); toggleMenu(); }}
title={$t('actions.more')}
>
<MoreHorizontal size={14} />
<Ellipsis size={14} />
</button>
<button class="icon-btn" onclick={() => { playlistsCollapsed = !playlistsCollapsed; saveSidebarCollapseState(); }} title={playlistsCollapsed ? $t('actions.open') : $t('actions.close')}>
{#if playlistsCollapsed}
src/lib/components/Toast.svelte
+5 -5
View File
@@ -1,6 +1,6 @@
<script lang="ts">
import { onMount } from 'svelte';
import { CheckCircle, AlertCircle, AlertTriangle, Info, Loader2, X } from 'lucide-svelte';
import { CircleCheckBig, CircleAlert, TriangleAlert, Info, LoaderCircle, X } from 'lucide-svelte';
interface Props {
message: string;
@@ -23,13 +23,13 @@
<div class="toast" class:success={type === 'success'} class:error={type === 'error'} class:info={type === 'info'} class:warning={type === 'warning'} class:buffering={type === 'buffering'}>
<div class="icon">
{#if type === 'success'}
<CheckCircle size={20} />
<CircleCheckBig size={20} />
{:else if type === 'error'}
<AlertCircle size={20} />
<CircleAlert size={20} />
{:else if type === 'warning'}
<AlertTriangle size={20} />
<TriangleAlert size={20} />
{:else if type === 'buffering'}
<Loader2 size={20} class="spinning" />
<LoaderCircle size={20} class="spinning" />
{:else}
<Info size={20} />
{/if}
src/lib/components/TrackInfoModal.svelte
+2 -2
View File
@@ -1,6 +1,6 @@
<script lang="ts">
import { invoke } from '@tauri-apps/api/core';
import { X, Loader2 } from 'lucide-svelte';
import { X, LoaderCircle } from 'lucide-svelte';
import type { TrackInfo, Performer } from '$lib/types';
interface Props {
@@ -166,7 +166,7 @@
<div class="track-modal" onclick={(e) => e.stopPropagation()} role="dialog" aria-modal="true" tabindex="-1">
{#if loading}
<div class="loading-state">
<Loader2 size={32} class="spinner" />
<LoaderCircle size={32} class="spinner" />
<span>Loading track info...</span>
</div>
{:else if error}
src/lib/components/TrackMenu.svelte
+2 -2
View File
@@ -2,7 +2,7 @@
import { tick } from 'svelte';
import {
ChevronRight,
MoreHorizontal,
Ellipsis,
Play,
ListPlus,
ListEnd,
@@ -477,7 +477,7 @@
}}
aria-label="Track actions"
>
<MoreHorizontal size={18} />
<Ellipsis size={18} />
</button>
{#if isOpen}
src/lib/components/TrackReplacementModal.svelte
+5 -5
View File
@@ -1,6 +1,6 @@
<script lang="ts">
import { invoke } from '@tauri-apps/api/core';
import { X, Search, Play, Check, AlertCircle, Loader2 } from 'lucide-svelte';
import { X, Search, Play, Check, CircleAlert, LoaderCircle } from 'lucide-svelte';
import { t } from '$lib/i18n';
interface SearchTrack {
@@ -138,7 +138,7 @@
<div class="search-section">
<div class="search-info">
<AlertCircle size={16} />
<CircleAlert size={16} />
<span>{$t('playlist.searchingFor')}: <strong>{trackTitle}</strong>{trackArtist ? ` - ${trackArtist}` : ''}</span>
</div>
<div class="search-input-container">
@@ -152,7 +152,7 @@
/>
<button class="search-btn" onclick={doSearch} disabled={loading}>
{#if loading}
<Loader2 size={16} class="spinner" />
<LoaderCircle size={16} class="spinner" />
{:else}
{$t('playlist.searchButton')}
{/if}
@@ -163,12 +163,12 @@
<div class="results-section">
{#if loading}
<div class="loading-state">
<Loader2 size={24} class="spinner" />
<LoaderCircle size={24} class="spinner" />
<span>{$t('playlist.loading')}</span>
</div>
{:else if searched && results.length === 0}
<div class="empty-state">
<AlertCircle size={32} />
<CircleAlert size={32} />
<p>{$t('playlist.noReplacementsFound')}</p>
<p class="hint">{$t('playlist.tryDifferentSearch')}</p>
</div>
src/lib/components/TrackRow.svelte
+2 -2
View File
@@ -1,6 +1,6 @@
<script lang="ts">
import { onMount } from 'svelte';
import { Play, Pause, Heart, HardDrive, AlertCircle, Ban, Music } from 'lucide-svelte';
import { Play, Pause, Heart, HardDrive, CircleAlert, Ban, Music } from 'lucide-svelte';
import { t } from '$lib/i18n';
import { cachedSrc } from '$lib/actions/cachedImage';
import TrackMenu from './TrackMenu.svelte';
@@ -197,7 +197,7 @@
</span>
{:else if isUnavailable}
<span class="unavailable-icon" title={unavailableTooltip}>
<AlertCircle size={16} />
<CircleAlert size={16} />
</span>
{:else if isActiveTrack || isPlaying}
{#if isHovered}
src/lib/components/UserCard.svelte
+2 -2
View File
@@ -1,5 +1,5 @@
<script lang="ts">
import { Settings, SlidersHorizontal, Keyboard, Bug, BookOpen, HelpCircle } from 'lucide-svelte';
import { Settings, SlidersHorizontal, Keyboard, Bug, BookOpen, CircleHelp } from 'lucide-svelte';
import { openUrl } from '@tauri-apps/plugin-opener';
import { t } from '$lib/i18n';
@@ -124,7 +124,7 @@
<span>{$t('settings.about.reportIssue')}</span>
</button>
<button class="menu-item" onclick={handleAboutClick}>
<HelpCircle size={16} />
<CircleHelp size={16} />
<span>{$t('settings.about.title')}</span>
</button>
</div>
src/lib/components/VirtualizedArtistGrid.svelte
+2 -2
View File
@@ -1,6 +1,6 @@
<script lang="ts">
import { onMount, onDestroy } from 'svelte';
import { Mic2, Upload } from 'lucide-svelte';
import { MicVocal, Upload } from 'lucide-svelte';
import { restoreScrollOnBackForward } from '$lib/utils/scrollRestore';
// eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -242,7 +242,7 @@
{#if artistImage}
<img src={artistImage} alt={displayName} class="artist-image" loading="lazy" />
{:else}
<Mic2 size={32} />
<MicVocal size={32} />
{/if}
</div>
{#if showSettings}
src/lib/components/VirtualizedArtistList.svelte
+2 -2
View File
@@ -1,6 +1,6 @@
<script lang="ts">
import { onMount, onDestroy } from 'svelte';
import { Mic2 } from 'lucide-svelte';
import { MicVocal } from 'lucide-svelte';
import { restoreScrollOnBackForward } from '$lib/utils/scrollRestore';
// eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -219,7 +219,7 @@
{#if artistImage}
<img src={artistImage} alt={displayName} loading="lazy" />
{:else}
<Mic2 size={20} />
<MicVocal size={20} />
{/if}
</div>
<div class="artist-info">
src/lib/components/VirtualizedFavoritesAlbumGrid.svelte
+2 -2
View File
@@ -1,7 +1,7 @@
<script lang="ts">
import { onMount, onDestroy } from 'svelte';
import { t } from '$lib/i18n';
import { Disc3, Loader2 } from 'lucide-svelte';
import { Disc3, LoaderCircle } from 'lucide-svelte';
import AlbumCard from './AlbumCard.svelte';
import QualityBadge from './QualityBadge.svelte';
import { restoreScrollOnBackForward } from '$lib/utils/scrollRestore';
@@ -374,7 +374,7 @@
</div>
{#if isLoadingMore}
<div class="loading-more">
<Loader2 size={20} class="spin" />
<LoaderCircle size={20} class="spin" />
<span>{$t('discover.loadingMore')}</span>
</div>
{/if}
src/lib/components/VirtualizedFavoritesArtistGrid.svelte
+2 -2
View File
@@ -1,7 +1,7 @@
<script lang="ts">
import { onMount, onDestroy, type Snippet } from 'svelte';
import { t } from '$lib/i18n';
import { Mic2 } from 'lucide-svelte';
import { MicVocal } from 'lucide-svelte';
import { cachedSrc } from '$lib/actions/cachedImage';
import { restoreScrollOnBackForward } from '$lib/utils/scrollRestore';
@@ -274,7 +274,7 @@
<img use:cachedSrc={artist.image?.small || artist.image?.thumbnail} alt={artist.name} loading="lazy" decoding="async" />
{:else}
<div class="artist-placeholder">
<Mic2 size={32} />
<MicVocal size={32} />
</div>
{/if}
</div>
src/lib/components/VirtualizedFavoritesArtistList.svelte
+2 -2
View File
@@ -1,7 +1,7 @@
<script lang="ts">
import { onMount, onDestroy } from 'svelte';
import { t } from '$lib/i18n';
import { Mic2 } from 'lucide-svelte';
import { MicVocal } from 'lucide-svelte';
import { cachedSrc } from '$lib/actions/cachedImage';
import { restoreScrollOnBackForward } from '$lib/utils/scrollRestore';
@@ -254,7 +254,7 @@
<img use:cachedSrc={artist.image?.thumbnail || artist.image?.small} alt={artist.name} loading="lazy" decoding="async" />
{:else}
<div class="artist-list-placeholder">
<Mic2 size={20} />
<MicVocal size={20} />
</div>
{/if}
</div>
src/lib/components/immersive/ImmersiveHeader.svelte
+2 -2
View File
@@ -1,5 +1,5 @@
<script lang="ts">
import { Disc3, Disc, Mic2, ListMusic, Music2, Info, Radio, Maximize, Minimize, ChevronDown, X, Square, Copy, Minus, Image, Activity, AudioWaveform, CircleDot, Crosshair, Zap, HeartPulse, Move } from 'lucide-svelte';
import { Disc3, Disc, MicVocal, ListMusic, Music2, Info, Radio, Maximize, Minimize, ChevronDown, X, Square, Copy, Minus, Image, Activity, AudioWaveform, CircleDot, Crosshair, Zap, HeartPulse, Move } from 'lucide-svelte';
import { t } from '$lib/i18n';
import { getCurrentWindow } from '@tauri-apps/api/window';
@@ -127,7 +127,7 @@
];
const focusTabsBottom: { id: FocusTab; labelKey: string; icon: typeof Disc3 }[] = [
{ id: 'lyrics-focus', labelKey: 'settings.appearance.immersiveViews.lyrics-focus', icon: Mic2 },
{ id: 'lyrics-focus', labelKey: 'settings.appearance.immersiveViews.lyrics-focus', icon: MicVocal },
{ id: 'queue-focus', labelKey: 'settings.appearance.immersiveViews.queue-focus', icon: ListMusic },
];
src/lib/components/immersive/PlayerControlsCompact.svelte
+2 -2
View File
@@ -9,7 +9,7 @@
Heart,
Volume2,
VolumeX,
MoreHorizontal,
Ellipsis,
Infinity,
Maximize,
Minimize2,
@@ -311,7 +311,7 @@
onclick={toggleMenu}
title={$t('actions.moreOptions')}
>
<MoreHorizontal size={12} />
<Ellipsis size={12} />
</button>
{#if menuOpen}
<div class="window-menu" bind:this={menuRef}>
src/lib/components/immersive/panels/SuggestionsPanel.svelte
+3 -3
View File
@@ -1,6 +1,6 @@
<script lang="ts">
import { invoke } from '@tauri-apps/api/core';
import { Loader2, Play, Radio, ListPlus, ListEnd, Info } from 'lucide-svelte';
import { LoaderCircle, Play, Radio, ListPlus, ListEnd, Info } from 'lucide-svelte';
import { t } from '$lib/i18n';
interface Playlist {
@@ -248,7 +248,7 @@
<div class="suggestions-panel" class:centered-layout={centeredLayout}>
{#if isLoading}
<div class="loading-state">
<Loader2 size={28} class="spinner" />
<LoaderCircle size={28} class="spinner" />
</div>
{:else if !artistId}
<div class="empty-state">
@@ -334,7 +334,7 @@
<div class="radio-collage">
{#if loadingRadio}
<div class="collage-loading">
<Loader2 size={32} class="spinner" />
<LoaderCircle size={32} class="spinner" />
</div>
{:else if radioCollageImages.length >= 4}
<div class="collage-diamond">
src/lib/components/immersive/panels/TrackInfoPanel.svelte
+2 -2
View File
@@ -1,6 +1,6 @@
<script lang="ts">
import { invoke } from '@tauri-apps/api/core';
import { Loader2, Disc3, Clock, Music2, Tag, Building2 } from 'lucide-svelte';
import { LoaderCircle, Disc3, Clock, Music2, Tag, Building2 } from 'lucide-svelte';
import { t } from '$lib/i18n';
import type { TrackInfo, Performer } from '$lib/types';
@@ -139,7 +139,7 @@
<div class="track-info-panel" class:centered-layout={centeredLayout}>
{#if loading}
<div class="loading-state">
<Loader2 size={28} class="spinner" />
<LoaderCircle size={28} class="spinner" />
</div>
{:else if error}
<div class="error-state">
src/lib/components/lyrics/LyricsSidebar.svelte
+2 -2
View File
@@ -1,5 +1,5 @@
<script lang="ts">
import { Mic2 } from 'lucide-svelte';
import { MicVocal } from 'lucide-svelte';
import { t } from 'svelte-i18n';
import LyricsLines from './LyricsLines.svelte';
@@ -33,7 +33,7 @@
<aside class="lyrics-sidebar">
<div class="header">
<div class="header-icon">
<Mic2 size={18} />
<MicVocal size={18} />
</div>
<div class="header-text">
<div class="header-title">{$t('player.lyrics')}</div>
src/lib/components/miniplayer/MiniPlayerLyricsSurface.svelte
+2 -2
View File
@@ -1,5 +1,5 @@
<script lang="ts">
import { Mic2 } from 'lucide-svelte';
import { MicVocal } from 'lucide-svelte';
import { t } from '$lib/i18n';
import LyricsLines from '$lib/components/lyrics/LyricsLines.svelte';
import type { LyricsLine } from '$lib/stores/lyricsStore';
@@ -18,7 +18,7 @@
<div class="lyrics-surface">
{#if !hasLines}
<div class="lyrics-empty">
<Mic2 size={30} strokeWidth={1.6} />
<MicVocal size={30} strokeWidth={1.6} />
<span>{$t('player.noLyrics')}</span>
</div>
{:else}
src/lib/components/miniplayer/MiniPlayerWindowControls.svelte
+2 -2
View File
@@ -1,5 +1,5 @@
<script lang="ts">
import { Minus, Disc3, Image, ListMusic, AlignLeft, Maximize2, Pin, Move, X, Square } from 'lucide-svelte';
import { Minus, Disc3, Image, ListMusic, AlignStartVertical, Maximize2, Pin, Move, X, Square } from 'lucide-svelte';
import { t } from '$lib/i18n';
import type { MiniPlayerSurface } from './types';
@@ -28,7 +28,7 @@
{ id: 'compact', icon: Disc3, labelKey: 'player.miniSurfaceCompact' },
{ id: 'artwork', icon: Image, labelKey: 'player.miniSurfaceArtwork' },
{ id: 'queue', icon: ListMusic, labelKey: 'player.miniSurfaceQueue' },
{ id: 'lyrics', icon: AlignLeft, labelKey: 'player.miniSurfaceLyrics' }
{ id: 'lyrics', icon: AlignStartVertical, labelKey: 'player.miniSurfaceLyrics' }
];
function handleMouseEnter(): void {
src/lib/components/views/AlbumDetailView.svelte
+3 -3
View File
@@ -10,7 +10,7 @@
setCustomAlbumCover,
removeCustomAlbumCover as removeCustomCoverFromStore
} from '$lib/stores/customAlbumCoverStore';
import { ArrowLeft, Play, Shuffle, Heart, Radio, CloudDownload, ChevronLeft, ChevronRight, Loader2, CheckSquare, BookOpen } from 'lucide-svelte';
import { ArrowLeft, Play, Shuffle, Heart, Radio, CloudDownload, ChevronLeft, ChevronRight, LoaderCircle, SquareCheckBig, BookOpen } from 'lucide-svelte';
import { cachedSrc } from '$lib/actions/cachedImage';
import AlbumCard from '../AlbumCard.svelte';
import TrackRow from '../TrackRow.svelte';
@@ -557,7 +557,7 @@
disabled={radioLoading}
>
{#if radioLoading}
<Loader2 size={18} class="spin" />
<LoaderCircle size={18} class="spin" />
{:else}
<Radio size={18} />
{/if}
@@ -601,7 +601,7 @@
onclick={toggleMultiSelectMode}
title={multiSelectMode ? $t('actions.cancelSelection') : $t('actions.select')}
>
<CheckSquare size={18} />
<SquareCheckBig size={18} />
</button>
</div>
</div>
src/lib/components/views/ArtistDetailView.svelte
+3 -3
View File
@@ -5,7 +5,7 @@
import { setCustomImage, removeCustomImage as removeCustomImageFromStore } from '$lib/stores/customArtistImageStore';
import { t, locale } from 'svelte-i18n';
import { cachedSrc } from '$lib/actions/cachedImage';
import { ArrowLeft, User, ChevronDown, ChevronUp, Play, Music, Heart, Search, X, ChevronLeft, ChevronRight, Radio, MoreHorizontal, Info, Disc, Settings, CheckSquare, PanelRightClose, ThumbsDown } from 'lucide-svelte';
import { ArrowLeft, User, ChevronDown, ChevronUp, Play, Music, Heart, Search, X, ChevronLeft, ChevronRight, Radio, Ellipsis, Info, Disc, Settings, SquareCheckBig, PanelRightClose, ThumbsDown } from 'lucide-svelte';
import {
isBlacklisted,
isEnabled as isFilteringEnabled,
@@ -2006,7 +2006,7 @@
onclick={toggleMultiSelectMode}
title={multiSelectMode ? $t('actions.cancelSelection') : $t('actions.select')}
>
<CheckSquare size={18} />
<SquareCheckBig size={18} />
</button>
<div class="context-menu-wrapper">
<button
@@ -2014,7 +2014,7 @@
onclick={() => showTracksContextMenu = !showTracksContextMenu}
title="More options"
>
<MoreHorizontal size={18} />
<Ellipsis size={18} />
</button>
{#if showTracksContextMenu}
<div class="context-menu-backdrop" onclick={() => showTracksContextMenu = false} role="presentation"></div>
src/lib/components/views/ArtistsByLocationView.svelte
+4 -4
View File
@@ -3,7 +3,7 @@
import { t } from '$lib/i18n';
import { invoke } from '@tauri-apps/api/core';
import { listen } from '@tauri-apps/api/event';
import { ArrowLeft, Loader2, Music, Search, X, LayoutGrid, PanelLeftClose, Mic2, Disc3, ChevronDown, Filter, SlidersHorizontal, Globe, Share2 } from 'lucide-svelte';
import { ArrowLeft, LoaderCircle, Music, Search, X, LayoutGrid, PanelLeftClose, MicVocal, Disc3, ChevronDown, Funnel, SlidersHorizontal, Globe, Share2 } from 'lucide-svelte';
import VirtualizedFavoritesArtistGrid from '../VirtualizedFavoritesArtistGrid.svelte';
import VirtualizedFavoritesArtistList from '../VirtualizedFavoritesArtistList.svelte';
import AlbumCard from '../AlbumCard.svelte';
@@ -486,7 +486,7 @@
onclick={() => { showGenrePopup = !showGenrePopup; genreSearchQuery = ''; }}
title={$t('genreFilter.title')}
>
<Filter size={16} />
<Funnel size={16} />
{#if activeGenreFilters.size > 0}
<span class="filter-badge">{activeGenreFilters.size}</span>
{/if}
@@ -725,12 +725,12 @@
<div class="artist-albums-column">
{#if !selectedArtist}
<div class="artist-albums-empty">
<Mic2 size={48} />
<MicVocal size={48} />
<p>{$t('favorites.selectArtistHint')}</p>
</div>
{:else if loadingAlbums}
<div class="artist-albums-loading">
<Loader2 size={32} class="spinner-icon" />
<LoaderCircle size={32} class="spinner-icon" />
<p>{$t('favorites.loadingAlbums')}</p>
</div>
{:else if albumsError}
src/lib/components/views/BlacklistManagerView.svelte
+2 -2
View File
@@ -1,6 +1,6 @@
<script lang="ts">
import { onMount } from 'svelte';
import { ArrowLeft, Search, X, Trash2, Ban, ToggleLeft, ToggleRight, AlertCircle } from 'lucide-svelte';
import { ArrowLeft, Search, X, Trash2, Ban, ToggleLeft, ToggleRight, CircleAlert } from 'lucide-svelte';
import ViewTransition from '../ViewTransition.svelte';
import { t, locale } from '$lib/i18n';
import { showToast } from '$lib/stores/toastStore';
@@ -174,7 +174,7 @@
<!-- Disabled Warning -->
{#if !enabled}
<div class="warning-banner">
<AlertCircle size={16} />
<CircleAlert size={16} />
<span>{$t('settings.blacklist.disabledWarning')}</span>
</div>
{/if}
src/lib/components/views/DynamicSuggestView.svelte
+2 -2
View File
@@ -1,7 +1,7 @@
<script lang="ts">
import { invoke } from '@tauri-apps/api/core';
import { onMount, onDestroy } from 'svelte';
import { ArrowLeft, CloudDownload, Heart, Info, ListPlus, Play, RefreshCw, Search, Shuffle, X, CheckSquare } from 'lucide-svelte';
import { ArrowLeft, CloudDownload, Heart, Info, ListPlus, Play, RefreshCw, Search, Shuffle, X, SquareCheckBig } from 'lucide-svelte';
import PlaylistModal from '$lib/components/PlaylistModal.svelte';
import TrackRow from '$lib/components/TrackRow.svelte';
import BulkActionBar from '$lib/components/BulkActionBar.svelte';
@@ -497,7 +497,7 @@
disabled={loading || filteredTracks.length === 0}
title={multiSelectMode ? $t('actions.cancelSelection') : $t('actions.select')}
>
<CheckSquare size={18} />
<SquareCheckBig size={18} />
</button>
</div>
</div>
src/lib/components/views/FavQView.svelte
+2 -2
View File
@@ -1,7 +1,7 @@
<script lang="ts">
import { invoke } from '@tauri-apps/api/core';
import { onMount, onDestroy } from 'svelte';
import { ArrowLeft, CloudDownload, Heart, Info, ListPlus, Play, RefreshCw, Search, Shuffle, X, CheckSquare } from 'lucide-svelte';
import { ArrowLeft, CloudDownload, Heart, Info, ListPlus, Play, RefreshCw, Search, Shuffle, X, SquareCheckBig } from 'lucide-svelte';
import PlaylistModal from '$lib/components/PlaylistModal.svelte';
import TrackRow from '$lib/components/TrackRow.svelte';
import BulkActionBar from '$lib/components/BulkActionBar.svelte';
@@ -439,7 +439,7 @@
disabled={loading || filteredTracks.length === 0}
title={multiSelectMode ? $t('actions.cancelSelection') : $t('actions.select')}
>
<CheckSquare size={18} />
<SquareCheckBig size={18} />
</button>
</div>
</div>
src/lib/components/views/FavoritesView.svelte
+8 -8
View File
@@ -4,7 +4,7 @@
import { resolveArtistImage } from '$lib/stores/customArtistImageStore';
import { onMount, tick } from 'svelte';
import { t } from '$lib/i18n';
import { Play, Disc3, Mic2, Music, Search, X, LayoutGrid, List, ChevronDown, ListMusic, Edit3, CloudDownload, Shuffle, MoreHorizontal, PanelLeftClose, Loader2, ArrowLeft, CheckSquare } from 'lucide-svelte';
import { Play, Disc3, MicVocal, Music, Search, X, LayoutGrid, List, ChevronDown, ListMusic, PenLine, CloudDownload, Shuffle, Ellipsis, PanelLeftClose, LoaderCircle, ArrowLeft, SquareCheckBig } from 'lucide-svelte';
import AlbumCard from '../AlbumCard.svelte';
import TrackRow from '../TrackRow.svelte';
import QualityBadge from '../QualityBadge.svelte';
@@ -593,7 +593,7 @@
switch (tab) {
case 'tracks': return Music;
case 'albums': return Disc3;
case 'artists': return Mic2;
case 'artists': return MicVocal;
case 'playlists': return ListMusic;
}
}
@@ -1304,7 +1304,7 @@
</button>
{/if}
<button class="edit-btn" onclick={() => editModalOpen = true} title={$t('favorites.editSettings')}>
<Edit3 size={16} />
<PenLine size={16} />
</button>
</div>
<!-- Header -->
@@ -1324,7 +1324,7 @@
onclick={() => showTracksContextMenu = !showTracksContextMenu}
title={$t('actions.more')}
>
<MoreHorizontal size={18} />
<Ellipsis size={18} />
</button>
{#if showTracksContextMenu}
<div class="context-menu-backdrop" onclick={() => showTracksContextMenu = false} role="presentation"></div>
@@ -1485,7 +1485,7 @@
onclick={toggleTrackSelectMode}
title={trackSelectMode ? $t('actions.cancelSelection') : $t('actions.select')}
>
<CheckSquare size={16} />
<SquareCheckBig size={16} />
</button>
<GenreFilterButton context={GENRE_CONTEXT_TRACKS} variant="control" align="right" onFilterChange={handleGenreFilterChange} />
<div class="dropdown-container">
@@ -1795,7 +1795,7 @@
<ViewTransition duration={200} distance={12} direction="up">
{#if favoriteArtists.length === 0}
<div class="empty">
<Mic2 size={48} />
<MicVocal size={48} />
<p>{$t('favorites.noFavoriteArtists')}</p>
<p class="empty-hint">{$t('favorites.likeArtistsHint')}</p>
</div>
@@ -1823,12 +1823,12 @@
<div class="artist-albums-column">
{#if !selectedFavoriteArtist}
<div class="artist-albums-empty">
<Mic2 size={48} />
<MicVocal size={48} />
<p>{$t('favorites.selectArtistHint')}</p>
</div>
{:else if loadingArtistAlbums}
<div class="artist-albums-loading">
<Loader2 size={32} class="spinner-icon" />
<LoaderCircle size={32} class="spinner-icon" />
<p>{$t('favorites.loadingAlbums')}</p>
</div>
{:else if artistAlbumsError}
src/lib/components/views/ForYouTab.svelte
+3 -3
View File
@@ -1,7 +1,7 @@
<script lang="ts">
import { onMount } from 'svelte';
import { invoke } from '@tauri-apps/api/core';
import { Music, User, Loader2, ArrowRight, Heart, Play, Share2, UserPlus } from 'lucide-svelte';
import { Music, User, LoaderCircle, ArrowRight, Heart, Play, Share2, UserPlus } from 'lucide-svelte';
import { cachedSrc } from '$lib/actions/cachedImage';
import { t } from '$lib/i18n';
import HorizontalScrollRow from '../HorizontalScrollRow.svelte';
@@ -1281,7 +1281,7 @@
disabled={artist.isFavoriting}
>
{#if artist.isFavoriting}
<Loader2 size={14} class="spinner" />
<LoaderCircle size={14} class="spinner" />
{:else}
<UserPlus size={14} />
{/if}
@@ -1339,7 +1339,7 @@
<div class="spotlight-actions">
<button class="action-btn-circle primary" onclick={() => handleSpotlightTopTracks()} disabled={spotlightTopTracksLoading}>
{#if spotlightTopTracksLoading}
<Loader2 size={20} class="spinner" />
<LoaderCircle size={20} class="spinner" />
{:else}
<Play size={20} fill="currentColor" color="currentColor" />
{/if}
src/lib/components/views/HomeView.svelte
+5 -5
View File
@@ -2,7 +2,7 @@
import { onMount } from 'svelte';
import { invoke } from '@tauri-apps/api/core';
import { resolveArtistImage } from '$lib/stores/customArtistImageStore';
import { Music, User, Loader2, ArrowRight, Home } from 'lucide-svelte';
import { Music, User, LoaderCircle, ArrowRight, House } from 'lucide-svelte';
import ForYouTab from './ForYouTab.svelte';
import { cachedSrc } from '$lib/actions/cachedImage';
import { type OfflineCacheStatus } from '$lib/stores/offlineCacheState';
@@ -900,7 +900,7 @@
class:active={activeTab === 'home'}
onclick={() => switchTab('home')}
>
<Home size={13} />
<House size={13} />
</button>
<button
class="home-tab compact"
@@ -948,7 +948,7 @@
class:active={activeTab === 'home'}
onclick={() => switchTab('home')}
>
<Home size={14} />
<House size={14} />
</button>
<button
class="home-tab"
@@ -1280,7 +1280,7 @@
{#snippet children()}
{#if loadingQobuzPlaylists}
<div class="loading-playlists">
<Loader2 size={24} class="spinner" />
<LoaderCircle size={24} class="spinner" />
</div>
{:else}
{#each qobuzPlaylists as playlist (playlist.id)}
@@ -1938,7 +1938,7 @@
{#snippet children()}
{#if loadingQobuzPlaylists}
<div class="loading-playlists">
<Loader2 size={24} class="spinner" />
<LoaderCircle size={24} class="spinner" />
</div>
{:else}
{#each qobuzPlaylists as playlist (playlist.id)}
src/lib/components/views/LabelReleasesView.svelte
+3 -3
View File
@@ -2,7 +2,7 @@
import { invoke } from '@tauri-apps/api/core';
import { onMount } from 'svelte';
import { t } from 'svelte-i18n';
import { ArrowLeft, Search, X, Disc3, Loader2, ArrowUpDown, Filter, ChevronDown, Users } from 'lucide-svelte';
import { ArrowLeft, Search, X, Disc3, LoaderCircle, ArrowUpDown, Funnel, ChevronDown, Users } from 'lucide-svelte';
import AlbumCard from '../AlbumCard.svelte';
import type { QobuzAlbum, LabelDetail, LabelPageData } from '$lib/types';
import type { OfflineCacheStatus } from '$lib/stores/offlineCacheState';
@@ -420,7 +420,7 @@
onclick={toggleHiResFilter}
title={$t('labelReleases.filterHiRes')}
>
<Filter size={16} />
<Funnel size={16} />
<span class="toolbar-label">Hi-Res</span>
</button>
@@ -543,7 +543,7 @@
{#if loadingMore}
<div class="loading-more">
<Loader2 size={20} class="spinner-icon" />
<LoaderCircle size={20} class="spinner-icon" />
<span>{$t('labelReleases.loadingMore')}</span>
</div>
{/if}
src/lib/components/views/LabelView.svelte
+3 -3
View File
@@ -2,7 +2,7 @@
import { invoke } from '@tauri-apps/api/core';
import { resolveArtistImage } from '$lib/stores/customArtistImageStore';
import { onMount, onDestroy } from 'svelte';
import { ArrowLeft, Disc3, Play, Music, MoreHorizontal, Heart, User, ChevronDown, ChevronUp, CheckSquare } from 'lucide-svelte';
import { ArrowLeft, Disc3, Play, Music, Ellipsis, Heart, User, ChevronDown, ChevronUp, SquareCheckBig } from 'lucide-svelte';
import BulkActionBar from '../BulkActionBar.svelte';
import { t } from '$lib/i18n';
import AlbumCard from '../AlbumCard.svelte';
@@ -833,7 +833,7 @@
disabled={topTracks.length === 0}
title={multiSelectMode ? $t('actions.cancelSelection') : $t('actions.select')}
>
<CheckSquare size={18} />
<SquareCheckBig size={18} />
</button>
<div class="context-menu-wrapper">
<button
@@ -841,7 +841,7 @@
onclick={() => showTracksContextMenu = !showTracksContextMenu}
title="More options"
>
<MoreHorizontal size={18} />
<Ellipsis size={18} />
</button>
{#if showTracksContextMenu}
<div class="context-menu-backdrop" onclick={() => showTracksContextMenu = false} role="presentation"></div>
src/lib/components/views/LocalLibraryView.svelte
+12 -12
View File
@@ -5,8 +5,8 @@
import { open, ask } from '@tauri-apps/plugin-dialog';
import { onMount, onDestroy, tick } from 'svelte';
import {
HardDrive, Music, Disc3, Mic2, FolderPlus, Trash2, RefreshCw,
Settings, ArrowLeft, X, Play, AlertCircle, ImageDown, Upload, Search, LayoutGrid, List, Edit3,
HardDrive, Music, Disc3, MicVocal, FolderPlus, Trash2, RefreshCw,
Settings, ArrowLeft, X, Play, CircleAlert, ImageDown, Upload, Search, LayoutGrid, List, PenLine,
Network, Power, PowerOff, ChevronLeft, ChevronRight, Shuffle, SlidersHorizontal, ArrowUpDown, ChevronDown, Check
} from 'lucide-svelte';
import FolderSettingsModal from '../FolderSettingsModal.svelte';
@@ -3210,7 +3210,7 @@
: $t('actions.edit')}
disabled={selectedAlbum?.source === 'plex' && getUserItem(PLEX_METADATA_WRITE_KEY) !== 'true'}
>
<Edit3 size={16} />
<PenLine size={16} />
</button>
</div>
</div>
@@ -3253,7 +3253,7 @@
{/if}
{#if selectedAlbum.likely_single_file_album}
<div class="single-file-notice">
<AlertCircle size={14} />
<CircleAlert size={14} />
<span>{$t('library.singleFileAlbumNotice')}</span>
</div>
{/if}
@@ -3352,7 +3352,7 @@
<!-- Offline Notice Banner -->
{#if isOffline && !offlineNoticeDismissed}
<div class="offline-notice">
<AlertCircle size={16} />
<CircleAlert size={16} />
<span>{$t('library.playlistOfflineMode')}</span>
<button class="dismiss-btn" onclick={() => offlineNoticeDismissed = true} title="Dismiss">
<X size={14} />
@@ -3407,7 +3407,7 @@
disabled={selectedFolders.size !== 1}
title={selectedFolders.size === 1 ? $t('library.editFolder') : $t('library.editFolderHint')}
>
<Edit3 size={16} />
<PenLine size={16} />
</button>
<button
class="icon-btn"
@@ -3592,7 +3592,7 @@
</div>
{:else if error}
<div class="error">
<AlertCircle size={48} />
<CircleAlert size={48} />
<p>{$t('library.failedLoadLibrary')}</p>
<p class="error-detail">{error}</p>
<button class="retry-btn" onclick={() => loadLibraryData()}>{$t('actions.retry')}</button>
@@ -3915,7 +3915,7 @@
<ViewTransition duration={200} distance={12} direction="up">
{#if artists.length === 0}
<div class="empty">
<Mic2 size={48} />
<MicVocal size={48} />
<p>{$t('library.noArtistsInLibrary')}</p>
</div>
{:else}
@@ -3947,7 +3947,7 @@
</div>
{#if filteredArtists.length === 0}
<div class="empty-small">
<Mic2 size={32} />
<MicVocal size={32} />
<p>{$t('library.noArtistsMatch')}</p>
</div>
{:else}
@@ -3972,7 +3972,7 @@
<img src={artistImage} alt={displayName} />
{:else}
<div class="artist-placeholder">
<Mic2 size={24} />
<MicVocal size={24} />
</div>
{/if}
</div>
@@ -4021,7 +4021,7 @@
{/if}
{:else}
<div class="empty-small centered">
<Mic2 size={48} />
<MicVocal size={48} />
<p>{$t('library.selectArtist')}</p>
</div>
{/if}
@@ -4170,7 +4170,7 @@
onclick={openTagEditorFromAlbumSettings}
title={$t('library.editAlbumMetadataTitle')}
>
<Edit3 size={18} />
<PenLine size={18} />
<span>{$t('library.editAlbumInfo')}</span>
</button>
<button
src/lib/components/views/PlaylistDetailView.svelte
+4 -4
View File
@@ -1,5 +1,5 @@
<script lang="ts">
import { ArrowLeft, Play, Shuffle, ListMusic, Search, X, ChevronDown, ChevronRight, ChevronUp, ImagePlus, Edit3, BarChart2, Heart, CloudDownload, ListPlus, GripVertical, CheckSquare, Bookmark } from 'lucide-svelte';
import { ArrowLeft, Play, Shuffle, ListMusic, Search, X, ChevronDown, ChevronRight, ChevronUp, ImagePlus, PenLine, ChartNoAxesColumn, Heart, CloudDownload, ListPlus, GripVertical, SquareCheckBig, Bookmark } from 'lucide-svelte';
import AlbumMenu from '../AlbumMenu.svelte';
import PlaylistCollage from '../PlaylistCollage.svelte';
import PlaylistModal from '../PlaylistModal.svelte';
@@ -2072,7 +2072,7 @@
</button>
{#if playlist}
<button class="edit-btn" onclick={() => editModalOpen = true} title={$t('playlist.editPlaylist')}>
<Edit3 size={16} />
<PenLine size={16} />
</button>
{/if}
</div>
@@ -2134,7 +2134,7 @@
{#if playlistStats && playlistStats.play_count > 0}
<span class="separator">•</span>
<span class="play-count" title={$t('playlist.playCount')}>
<BarChart2 size={12} />
<ChartNoAxesColumn size={12} />
{playlistStats.play_count}
</span>
{/if}
@@ -2253,7 +2253,7 @@
onclick={toggleMultiSelectMode}
title={multiSelectMode ? $t('actions.cancelSelection') : $t('actions.select')}
>
<CheckSquare size={16} />
<SquareCheckBig size={16} />
</button>
</div>
src/lib/components/views/PlaylistManagerView.svelte
+3 -3
View File
@@ -1,7 +1,7 @@
<script lang="ts">
import { onMount } from 'svelte';
import { invoke } from '@tauri-apps/api/core';
import { ArrowLeft, Filter, ArrowUpDown, LayoutGrid, List, GripVertical, EyeOff, Eye, BarChart2, Play, Pencil, Search, X, Cloud, CloudOff, Wifi, Heart, Folder, FolderPlus, FolderOpen, ChevronRight, ChevronDown, ChevronUp, Trash2, Star, Music, Disc, Library, Info, Rows3, Network } from 'lucide-svelte';
import { ArrowLeft, Funnel, ArrowUpDown, LayoutGrid, List, GripVertical, EyeOff, Eye, ChartNoAxesColumn, Play, Pencil, Search, X, Cloud, CloudOff, Wifi, Heart, Folder, FolderPlus, FolderOpen, ChevronRight, ChevronDown, ChevronUp, Trash2, Star, Music, Disc, Library, Info, Rows3, Network } from 'lucide-svelte';
import PlaylistCollage from '../PlaylistCollage.svelte';
import PlaylistModal from '../PlaylistModal.svelte';
import ViewTransition from '../ViewTransition.svelte';
@@ -937,7 +937,7 @@
{:else if filter === 'offline_unavailable'}
<CloudOff size={16} />
{:else}
<Filter size={16} />
<Funnel size={16} />
{/if}
<span>
{#if offlineStatus.isOffline}
@@ -1565,7 +1565,7 @@
{/if}
{#if stats && stats.play_count > 0}
<span class="play-count-badge" title="Play count">
<BarChart2 size={12} />
<ChartNoAxesColumn size={12} />
{stats.play_count}
</span>
{/if}
src/lib/components/views/PurchaseAlbumDetailView.svelte
+8 -8
View File
@@ -2,7 +2,7 @@
import { onMount } from 'svelte';
import { t, locale } from '$lib/i18n';
import { invoke } from '@tauri-apps/api/core';
import { ArrowLeft, Download, Check, Loader2, AlertTriangle, Library, Play, X } from 'lucide-svelte';
import { ArrowLeft, Download, Check, LoaderCircle, TriangleAlert, Library, Play, X } from 'lucide-svelte';
import QualityBadge from '../QualityBadge.svelte';
import Dropdown from '../Dropdown.svelte';
import ViewTransition from '../ViewTransition.svelte';
@@ -239,7 +239,7 @@
<img src={getQobuzImage(album.image)} alt={album.title} />
{#if !album.downloadable}
<div class="artwork-unavailable-overlay">
<AlertTriangle size={18} />
<TriangleAlert size={18} />
<span>{$t('purchases.unavailable')}</span>
</div>
{/if}
@@ -295,7 +295,7 @@
title={$t('purchases.downloadAll')}
>
{#if isDownloadingAll}
<Loader2 size={20} class="spin" />
<LoaderCircle size={20} class="spin" />
{:else}
<Download size={20} />
{/if}
@@ -324,7 +324,7 @@
<X size={14} />
<span>{$t('purchases.downloadCancelled', { values: { completed: completedCount, total: totalTracks } })}</span>
{:else}
<Loader2 size={14} class="spin" />
<LoaderCircle size={14} class="spin" />
<span>{$t('purchases.downloadProgress', { values: { current: completedCount, total: totalTracks } })}</span>
<button
class="cancel-download-btn"
@@ -352,7 +352,7 @@
<div class="add-to-library">
<button class="add-to-library-btn" onclick={handleAddToLibrary} disabled={addingToLibrary}>
{#if addingToLibrary}
<Loader2 size={14} class="spin" />
<LoaderCircle size={14} class="spin" />
{:else}
<Library size={14} />
{/if}
@@ -408,7 +408,7 @@
<span></span><span></span><span></span>
</div>
{:else if status === 'downloading'}
<Loader2 size={14} class="spin" />
<LoaderCircle size={14} class="spin" />
{:else}
<span>{track.track_number}</span>
{/if}
@@ -438,14 +438,14 @@
<span class="redownload-icon"><Download size={14} /></span>
</button>
{:else if status === 'downloading'}
<span class="download-active"><Loader2 size={14} class="spin" /></span>
<span class="download-active"><LoaderCircle size={14} class="spin" /></span>
{:else if status === 'failed'}
<button
class="download-track-btn failed"
onclick={(e) => { e.stopPropagation(); promptForFolder(track.id); }}
title={$t('purchases.failed')}
>
<AlertTriangle size={14} />
<TriangleAlert size={14} />
</button>
{:else if album.downloadable}
<button
src/lib/components/views/PurchasesView.svelte
+2 -2
View File
@@ -1,7 +1,7 @@
<script lang="ts">
import { t, locale } from '$lib/i18n';
import {
Search, X, Download, Check, Loader2, Music, Disc3, ShoppingBag,
Search, X, Download, Check, LoaderCircle, Music, Disc3, ShoppingBag,
ChevronDown, LayoutGrid, List
} from 'lucide-svelte';
import AlbumCard from '../AlbumCard.svelte';
@@ -980,7 +980,7 @@
<span class="redownload-icon"><Download size={14} /></span>
</button>
{:else if dlStatus === 'downloading'}
<span class="download-active"><Loader2 size={14} class="spin" /></span>
<span class="download-active"><LoaderCircle size={14} class="spin" /></span>
{:else if dlStatus === 'failed'}
<button class="download-btn failed" onclick={(e) => handleTrackDownload(e, track)} title={$t('purchases.failed')}>
<Download size={14} />
src/lib/components/views/SearchView.svelte
+3 -3
View File
@@ -3,7 +3,7 @@
import { invoke } from '@tauri-apps/api/core';
import { resolveArtistImage } from '$lib/stores/customArtistImageStore';
import { cachedSrc } from '$lib/actions/cachedImage';
import { Search, Disc3, Music, Mic2, User, X, ChevronLeft, ChevronRight, Crown, Heart, Play, MoreHorizontal, ListPlus } from 'lucide-svelte';
import { Search, Disc3, Music, MicVocal, User, X, ChevronLeft, ChevronRight, Crown, Heart, Play, Ellipsis, ListPlus } from 'lucide-svelte';
import AlbumCard from '../AlbumCard.svelte';
import SearchPlaylistCard from '../SearchPlaylistCard.svelte';
import ViewTransition from '../ViewTransition.svelte';
@@ -1339,7 +1339,7 @@
onclick={(e) => { e.stopPropagation(); mostPopularMenuOpen ? mostPopularMenuOpen = false : openPopularMenu(); }}
title={$t('actions.moreOptions')}
>
<MoreHorizontal size={16} />
<Ellipsis size={16} />
</button>
{#if mostPopularMenuOpen}
<!-- svelte-ignore a11y_click_events_have_key_events -->
@@ -1441,7 +1441,7 @@
onclick={(e) => { e.stopPropagation(); mostPopularMenuOpen ? mostPopularMenuOpen = false : openPopularMenu(); }}
title={$t('actions.moreOptions')}
>
<MoreHorizontal size={16} />
<Ellipsis size={16} />
</button>
{#if mostPopularMenuOpen}
<!-- svelte-ignore a11y_click_events_have_key_events -->
src/lib/components/views/SettingsView.svelte
+6 -6
View File
@@ -5,7 +5,7 @@
import { getCurrentWebview } from '@tauri-apps/api/webview';
import { writeText as copyToClipboard } from '@tauri-apps/plugin-clipboard-manager';
import { ask, open as openFileDialog } from '@tauri-apps/plugin-dialog';
import { ArrowLeft, ChevronRight, ChevronDown, ChevronUp, Loader2, Sun, Moon, SunMoon, Ban, AlertTriangle, RefreshCw } from 'lucide-svelte';
import { ArrowLeft, ChevronRight, ChevronDown, ChevronUp, LoaderCircle, Sun, Moon, SunMoon, Ban, TriangleAlert, RefreshCw } from 'lucide-svelte';
import Toggle from '../Toggle.svelte';
import Dropdown from '../Dropdown.svelte';
import DeviceDropdown from '../DeviceDropdown.svelte';
@@ -3756,7 +3756,7 @@
{#if isLoadingDevices}
<div class="loading-overlay">
<div class="loading-content">
<Loader2 size={48} class="spinner" />
<LoaderCircle size={48} class="spinner" />
<p>{$t('settings.audio.loadingAudioDevices')}</p>
<p class="loading-subtitle">{$t('settings.audio.parsingHardware')}</p>
</div>
@@ -4182,7 +4182,7 @@
{#if autoThemeGenerating}
<div class="auto-theme-overlay">
<div class="auto-theme-overlay-content">
<Loader2 size={32} class="spinner" />
<LoaderCircle size={32} class="spinner" />
<span>{$t('settings.appearance.autoThemeGenerating')}</span>
</div>
</div>
@@ -4563,7 +4563,7 @@
{#if graphicsUsingFallback}
<div class="composition-warning fallback-warning">
<AlertTriangle size={14} />
<TriangleAlert size={14} />
<div>
<span class="fallback-title">{$t('settings.appearance.composition.fallbackWarning')}</span>
<span class="fallback-desc">{$t('settings.appearance.composition.fallbackDesc')}</span>
@@ -4573,7 +4573,7 @@
{/if}
<div class="composition-warning">
<AlertTriangle size={14} />
<TriangleAlert size={14} />
<div>
<span>{$t('settings.appearance.composition.recoveryNote')}</span>
<code class="recovery-cmd">{$t('settings.appearance.composition.recoveryCmd')}</code>
@@ -5325,7 +5325,7 @@
type="button"
>
{#if isCheckingUpdates}
<Loader2 size={14} class="spin" />
<LoaderCircle size={14} class="spin" />
<span>{$t('settings.updates.checking')}</span>
{:else}
<span>{$t('settings.updates.check')}</span>
src/lib/components/views/TopQView.svelte
+2 -2
View File
@@ -1,7 +1,7 @@
<script lang="ts">
import { invoke } from '@tauri-apps/api/core';
import { onMount, onDestroy } from 'svelte';
import { ArrowLeft, Info, ListPlus, Play, RefreshCw, Search, Shuffle, X, CheckSquare } from 'lucide-svelte';
import { ArrowLeft, Info, ListPlus, Play, RefreshCw, Search, Shuffle, X, SquareCheckBig } from 'lucide-svelte';
import PlaylistModal from '$lib/components/PlaylistModal.svelte';
import TrackRow from '$lib/components/TrackRow.svelte';
import BulkActionBar from '$lib/components/BulkActionBar.svelte';
@@ -552,7 +552,7 @@
disabled={loading || filteredTracks.length === 0}
title={multiSelectMode ? $t('actions.cancelSelection') : $t('actions.select')}
>
<CheckSquare size={18} />
<SquareCheckBig size={18} />
</button>
</div>
</div>
src/lib/components/views/WeeklySuggestView.svelte
+2 -2
View File
@@ -1,7 +1,7 @@
<script lang="ts">
import { invoke } from '@tauri-apps/api/core';
import { onMount, onDestroy } from 'svelte';
import { ArrowLeft, CloudDownload, Heart, Info, ListPlus, Play, Search, Shuffle, X, CheckSquare } from 'lucide-svelte';
import { ArrowLeft, CloudDownload, Heart, Info, ListPlus, Play, Search, Shuffle, X, SquareCheckBig } from 'lucide-svelte';
import PlaylistModal from '$lib/components/PlaylistModal.svelte';
import TrackRow from '$lib/components/TrackRow.svelte';
import BulkActionBar from '$lib/components/BulkActionBar.svelte';
@@ -492,7 +492,7 @@
disabled={loading || filteredTracks.length === 0}
title={multiSelectMode ? $t('actions.cancelSelection') : $t('actions.select')}
>
<CheckSquare size={18} />
<SquareCheckBig size={18} />
</button>
</div>
</div>
src/lib/components/wizard/WarningBanner.svelte
+2 -2
View File
@@ -1,5 +1,5 @@
<script lang="ts">
import { AlertTriangle, Info, ExternalLink } from 'lucide-svelte';
import { TriangleAlert, Info, ExternalLink } from 'lucide-svelte';
import type { Snippet } from 'svelte';
interface Props {
@@ -18,7 +18,7 @@
{#if variant === 'info'}
<Info size={18} />
{:else}
<AlertTriangle size={18} />
<TriangleAlert size={18} />
{/if}
</div>
<div class="banner-content">
static/github.svg
+34
View File
@@ -0,0 +1,34 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 512 512" fill="currentColor">
<path d="M6.962,266.753c22.59-5.641,53.305-13.324,107.118-14.753
c-1.487-2.974-2.83-6.053-4.019-9.228c-20.94-0.182-85.43,2.792-107.521,8.25
c-0.125,0.039-0.259,0.048-0.393,0.048c-0.739,0-1.42-0.508-1.602-1.256
c-0.211-0.873,0.326-1.774,1.208-1.995c21.89-5.41,84.825-8.413,107.118-8.355
c-5.017-14.753-7.233-31.655-7.233-50.523c0-33.516,10.437-46.159,24.46-64.02
c-10.724-38.197,3.847-64.307,3.847-64.307s22.533-4.671,65.132,25.832
c23.089-9.89,84.647-10.714,113.77-2.196c17.88-11.818,50.571-28.585,63.77-23.895
c3.568,5.755,11.262,22.513,4.662,59.348c4.489,8.077,27.761,25.286,27.856,73.928
c-0.384,17.938-2.245,33.084-5.698,45.899c55.54-0.47,88.212,4.115,110.715,8.259
c0.883,0.182,1.478,1.036,1.324,1.928c-0.153,0.787-0.844,1.353-1.611,1.353
c-0.115,0-0.211-0.009-0.326-0.019c-22.466-4.163-55.194-8.729-111.061-8.221
c-0.979,3.252-2.072,6.341-3.262,9.286c19.013,0.633,71.233,2.667,113.823,15.693
c0.883,0.269,1.362,1.189,1.094,2.072c-0.211,0.7-0.863,1.16-1.573,1.16
c-0.153,0-0.326-0.019-0.479-0.076c-43.185-13.199-96.538-15.012-114.283-15.598
c-15.444,33.929-47.118,46.59-98.322,51.856c16.595,10.446,21.353,23.548,21.353,59.003
c0,35.453-0.479,40.211-0.364,48.363c0.173,13.383,19.779,19.789,19.051,24.096
c-0.729,4.299-16.403,3.607-23.731,1.047c-20.758-7.232-18.687-24.5-18.687-24.5
l-0.69-47.404c0,0,1.42-25.516-8-25.516c0,5.131,0,59.242,0,77.592
c0,16.863,11.799,21.986,11.799,28.221c0,10.715-21.563-1.016-28.202-7.703
c-10.134-10.168-8.982-31.73-8.733-48.785c0.23-16.471-0.153-52.49-0.153-52.49
l-6.877,0.145c0,0,2.82,78.686-3.626,93.025c-8.335,18.408-33.477,24.74-33.477,16.355
c0-5.641,6.196-3.846,9.621-16.488c2.925-10.754,1.928-90.975,1.928-90.975
s-8.057,4.768-8.057,19.789c0,6.877-0.192,46.158-0.192,57.852
c0,14.705-20.883,23.078-30.917,23.078c-5.084,0-11.405-0.248-11.405-2.943
c0-6.801,19.099-10.793,19.099-24.941c0-12.268-0.269-43.826-0.269-43.826
s-9.631,1.648-23.367,1.648c-34.628,0-45.583-22.1-50.792-34.465
c-6.782-16.105-15.578-23.673-24.921-29.717c-5.736-3.712-7.06-8.096-0.422-9.343
c30.657-5.774,38.494,34.763,58.964,41.218c14.609,4.615,33.391,2.619,42.734-3.424
c1.238-12.385,10.159-23.089,17.593-28.729c-52.067-4.998-82.936-23.079-98.936-52.145
c-54.466,1.305-85.372,9.036-108.029,14.695c-1.65,0.413-3.261,0.815-4.815,1.209
c-0.134,0.028-0.269,0.038-0.403,0.038c-0.739,0-1.41-0.499-1.602-1.247
c-0.221-0.882,0.326-1.784,1.209-2.005C3.72,267.567,5.322,267.175,6.962,266.753z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB