fix: change icons to use @lucide/svelte

2026-02-08 15:50:33 +05:00
parent b09e3aeab4
commit 4a6e459407
25 changed files with 33 additions and 123 deletions
@@ -8,6 +8,7 @@
      "name": "twitch-panels",
      "version": "0.0.1",
      "dependencies": {
+        "@lucide/svelte": "^0.563.1",
        "@types/cropperjs": "^1.1.5",
        "@types/uuid": "^10.0.0",
        "cropperjs": "^2.1.0",
@@ -1135,6 +1136,15 @@
        "@jridgewell/sourcemap-codec": "^1.4.14"
      }
    },
+    "node_modules/@lucide/svelte": {
+      "version": "0.563.1",
+      "resolved": "https://registry.npmjs.org/@lucide/svelte/-/svelte-0.563.1.tgz",
+      "integrity": "sha512-Kt+MbnE5D9RsuI/csmf7M+HWxALe57x3A0DhQ8pPnnUpneh7zuldrYjlT+veWtk+tVnp5doQtaAAxLujzIlhBw==",
+      "license": "ISC",
+      "peerDependencies": {
+        "svelte": "^5"
+      }
+    },
    "node_modules/@playwright/test": {
      "version": "1.58.1",
      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.58.1.tgz",
@@ -41,6 +41,7 @@
    "web-animations-js": "^2.3.2"
  },
  "dependencies": {
+    "@lucide/svelte": "^0.563.1",
    "@types/cropperjs": "^1.1.5",
    "@types/uuid": "^10.0.0",
    "cropperjs": "^2.1.0",
@@ -3,10 +3,8 @@
  import SettingsGrid from "$components/layout/SettingsGrid.svelte";
  import SettingsRow from "$components/layout/SettingsRow.svelte";
  import Button from "$components/ui/Button.svelte";
-  import IconEdit from "$components/ui/Icons/IconEdit.svelte";
-  import IconReset from "$components/ui/Icons/IconReset.svelte";
-  import IconUpload from "$components/ui/Icons/IconUpload.svelte";
  import RangeSlider from "$components/ui/RangeSlider.svelte";
+  import { Pencil, RotateCcw as Reset, Upload } from "@lucide/svelte";
  import CropInline from "./CropInline.svelte";

  let brightness = $state(100);
@@ -18,9 +16,9 @@
    <CropInline />

    <div class="crop-controls">
-      <Button label="Загрузить" icon={IconUpload} type="secondary" />
-      <Button label="Редактировать" icon={IconEdit} type="outline" />
-      <Button label="Сбросить" icon={IconReset} type="outline" />
+      <Button label="Загрузить" icon={Upload} type="secondary" />
+      <Button label="Редактировать" icon={Reset} type="outline" />
+      <Button label="Сбросить" icon={Pencil} type="outline" />
    </div>

    <SettingsGrid>
@@ -1,7 +1,6 @@
 <script lang="ts">
-  import IconMoon from "$components/ui/Icons/IconMoon.svelte";
-  import IconSun from "$components/ui/Icons/IconSun.svelte";
  import { themeState } from "$states/theme.svelte";
+  import { Moon, Sun } from "@lucide/svelte";

  function toggleTheme() {
    themeState.toggle();
@@ -12,8 +11,8 @@
  <div class="header-content">
    <h1>Twitch Panels</h1>
    <button class="theme-toggle" aria-label="Toggle theme" onclick={toggleTheme}>
-      <IconSun />
-      <IconMoon />
+      <Sun />
+      <Moon />
    </button>
  </div>
 </header>
@@ -1,9 +1,8 @@
 <script lang="ts">
  import Button from "$components/ui/Button.svelte";
-  import IconArrowLeft from "$components/ui/Icons/IconArrowLeft.svelte";
-  import IconArrowRight from "$components/ui/Icons/IconArrowRight.svelte";
  import type { SlideDirectionType } from "$lib/constants";
  import { PANEL_SETTINGS } from "$lib/constants";
+  import { ChevronLeft, ChevronRight } from "@lucide/svelte";

  interface Props {
    current: number;
@@ -29,9 +28,9 @@
  let xDirection = $derived(direction == "next" ? PANEL_SETTINGS.PANEL_WIDTH : -PANEL_SETTINGS.PANEL_WIDTH);
 </script>

-<Button icon={IconArrowLeft} type="mini" onclick={prev} disabled={isFirst} />
+<Button icon={ChevronLeft} type="mini" onclick={prev} disabled={isFirst} />
 <span class="panel-indicator">{current + 1} / {max}</span>
-<Button icon={IconArrowRight} type="mini" onclick={next} disabled={isLast} />
+<Button icon={ChevronRight} type="mini" onclick={next} disabled={isLast} />

 <style>
  .panel-indicator {
@@ -2,13 +2,12 @@
  import Card from "$components/layout/Card.svelte";
  import Badge from "$components/ui/Badge.svelte";
  import Button from "$components/ui/Button.svelte";
-  import IconDownload from "$components/ui/Icons/IconDownload.svelte";
-  import IconEmpty from "$components/ui/Icons/IconEmpty.svelte";
  import { PANEL_SETTINGS, type SlideDirectionType } from "$lib/constants";
  import { downloadService, type DownloadItem } from "$services/downloadService";
  import { konvaAllStagesState } from "$states/konvaAllStages.svelte";
  import { konvaStageState } from "$states/konvaStage.svelte";
  import { textsState } from "$states/texts.svelte";
+  import { Download, StickyNote } from "@lucide/svelte";
  import { fly } from "svelte/transition";
  import Preview from "./Preview.svelte";
  import PreviewAll from "./PreviewAll.svelte";
@@ -70,15 +69,15 @@
        {/key}
      {:else}
        <div class="empty-state">
-          <IconEmpty />
+          <StickyNote />
          <p>Добавьте тексты для создания панелей</p>
        </div>
      {/if}
    </div>

    <div class="panel-actions">
-      <Button label="Скачать всё" icon={IconDownload} onclick={downloadAll} />
-      <Button label="Скачать" type="outline" icon={IconDownload} onclick={downloadCurrent} />
+      <Button label="Скачать всё" icon={Download} onclick={downloadAll} />
+      <Button label="Скачать" type="outline" icon={Download} onclick={downloadCurrent} />
    </div>
  </div>
 </Card>
@@ -1,6 +1,6 @@
 <script lang="ts">
  import Button from "$components/ui/Button.svelte";
-  import IconCross from "$components/ui/Icons/IconCross.svelte";
+  import { X as Cross } from "@lucide/svelte";
  import { fly } from "svelte/transition";

  interface Props {
@@ -14,7 +14,7 @@

 <div class="text-item" transition:fly={{ x: 600, duration: 300 }}>
  <input type="text" bind:value={text} />
-  <Button icon={IconCross} type="danger" onclick={() => ondelete(id)} />
+  <Button icon={Cross} type="danger" onclick={() => ondelete(id)} />
 </div>

 <style>
@@ -2,8 +2,8 @@
  import Card from "$components/layout/Card.svelte";
  import InputGroup from "$components/layout/InputGroup.svelte";
  import Button from "$components/ui/Button.svelte";
-  import IconPlus from "$components/ui/Icons/IconPlus.svelte";
  import { textsState } from "$states/texts.svelte";
+  import { Plus } from "@lucide/svelte";
  import TextInlineEdit from "./TextInlineEdit.svelte";
  import TextInput from "./TextInput.svelte";

@@ -25,7 +25,7 @@
 <Card title="Тексты панелей">
  <InputGroup>
    <TextInput bind:text onenter={addText} />
-    <Button icon={IconPlus} onclick={addText} />
+    <Button icon={Plus} onclick={addText} />
  </InputGroup>
  <div class="texts-list">
    {#each textsState.texts as { text, id } (id)}
@@ -1,8 +1,6 @@
 <script lang="ts">
  import type { TextAlignType } from "$lib/constants";
-  import IconAlignCenter from "./Icons/IconAlignCenter.svelte";
-  import IconAlignLeft from "./Icons/IconAlignLeft.svelte";
-  import IconAlignRight from "./Icons/IconAlignRight.svelte";
+  import { TextAlignCenter, TextAlignEnd, TextAlignStart } from "@lucide/svelte";

  interface Props {
    align: TextAlignType;
@@ -12,13 +10,13 @@
 </script>

 <button class="align-btn" class:active={align === "left"} onclick={() => (align = "left")}>
-  <IconAlignLeft />
+  <TextAlignStart />
 </button>
 <button class="align-btn" class:active={align === "center"} onclick={() => (align = "center")}>
-  <IconAlignCenter />
+  <TextAlignCenter />
 </button>
 <button class="align-btn" class:active={align === "right"} onclick={() => (align = "right")}>
-  <IconAlignRight />
+  <TextAlignEnd />
 </button>

 <style>
@@ -1,6 +0,0 @@
-<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-  <line x1="18" y1="10" x2="6" y2="10"></line>
-  <line x1="21" y1="6" x2="3" y2="6"></line>
-  <line x1="21" y1="14" x2="3" y2="14"></line>
-  <line x1="18" y1="18" x2="6" y2="18"></line>
-</svg>
@@ -1,6 +0,0 @@
-<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-  <line x1="17" y1="10" x2="3" y2="10"></line>
-  <line x1="21" y1="6" x2="3" y2="6"></line>
-  <line x1="21" y1="14" x2="3" y2="14"></line>
-  <line x1="17" y1="18" x2="3" y2="18"></line>
-</svg>
@@ -1,6 +0,0 @@
-<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-  <line x1="21" y1="10" x2="7" y2="10"></line>
-  <line x1="21" y1="6" x2="3" y2="6"></line>
-  <line x1="21" y1="14" x2="3" y2="14"></line>
-  <line x1="21" y1="18" x2="7" y2="18"></line>
-</svg>
@@ -1,3 +0,0 @@
-<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-  <polyline points="15 18 9 12 15 6"></polyline>
-</svg>
@@ -1,3 +0,0 @@
-<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-  <polyline points="9 18 15 12 9 6"></polyline>
-</svg>
@@ -1,4 +0,0 @@
-<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-  <line x1="5" y1="5" x2="19" y2="19"></line>
-  <line x1="5" y1="19" x2="19" y2="5"></line>
-</svg>
@@ -1,5 +0,0 @@
-<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-  <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
-  <polyline points="7 10 12 15 17 10"></polyline>
-  <line x1="12" y1="15" x2="12" y2="3"></line>
-</svg>
@@ -1,14 +0,0 @@
-<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-  <path
-    d="M21.2799 6.40005L11.7399 15.94C10.7899 16.89 7.96987 17.33 7.33987 16.7C6.70987 16.07 7.13987 13.25 8.08987 12.3L17.6399 2.75002C17.8754 2.49308 18.1605 2.28654 18.4781 2.14284C18.7956 1.99914 19.139 1.92124 19.4875 1.9139C19.8359 1.90657 20.1823 1.96991 20.5056 2.10012C20.8289 2.23033 21.1225 2.42473 21.3686 2.67153C21.6147 2.91833 21.8083 3.21243 21.9376 3.53609C22.0669 3.85976 22.1294 4.20626 22.1211 4.55471C22.1128 4.90316 22.0339 5.24635 21.8894 5.5635C21.7448 5.88065 21.5375 6.16524 21.2799 6.40005V6.40005Z"
-    stroke-width="1.5"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-  />
-  <path
-    d="M11 4H6C4.93913 4 3.92178 4.42142 3.17163 5.17157C2.42149 5.92172 2 6.93913 2 8V18C2 19.0609 2.42149 20.0783 3.17163 20.8284C3.92178 21.5786 4.93913 22 6 22H17C19.21 22 20 20.2 20 18V13"
-    stroke-width="1.5"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-  />
-</svg>
@@ -1,4 +0,0 @@
-<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-  <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
-  <line x1="9" y1="9" x2="15" y2="9"></line>
-</svg>
@@ -1,11 +0,0 @@
-<svg fill="currentColor" viewBox="0 0 24 24">
-  <path
-    d="M4.215 7.266h0.003a0.545 0.545 0 0 0 0.539 0.544v0H19.243v0a0.545 0.545 0 0 0 0.542 -0.544h0.002V4.756a0.545 0.545 0 0 0 -0.545 -0.544H4.757a0.545 0.545 0 0 0 -0.545 0.545c0 0.009 0.002 0.018 0.003 0.028z"
-  />
-  <path
-    d="M19.243 10.201H4.757a0.545 0.545 0 0 0 -0.545 0.545c0 0.009 0.002 0.018 0.003 0.028v2.482h0.003a0.545 0.545 0 0 0 0.539 0.544v0h14.486v0a0.545 0.545 0 0 0 0.542 -0.544h0.002V10.745a0.545 0.545 0 0 0 -0.545 -0.544"
-  />
-  <path
-    d="M19.243 16.189H4.757a0.545 0.545 0 0 0 -0.545 0.545c0 0.009 0.002 0.018 0.003 0.028v2.482h0.003a0.545 0.545 0 0 0 0.539 0.544v0h14.486v0a0.545 0.545 0 0 0 0.542 -0.545h0.002V16.732a0.545 0.545 0 0 0 -0.545 -0.543"
-  />
-</svg>
@@ -1,3 +0,0 @@
-<svg class="moon-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-  <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
-</svg>
@@ -1,4 +0,0 @@
-<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-  <line x1="12" y1="5" x2="12" y2="19"></line>
-  <line x1="5" y1="12" x2="19" y2="12"></line>
-</svg>
@@ -1,4 +0,0 @@
-<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-  <polyline points="1 4 1 10 7 10"></polyline>
-  <path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"></path>
-</svg>
@@ -1,11 +0,0 @@
-<svg class="sun-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-  <circle cx="12" cy="12" r="5"></circle>
-  <line x1="12" y1="1" x2="12" y2="3"></line>
-  <line x1="12" y1="21" x2="12" y2="23"></line>
-  <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
-  <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
-  <line x1="1" y1="12" x2="3" y2="12"></line>
-  <line x1="21" y1="12" x2="23" y2="12"></line>
-  <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
-  <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
-</svg>
@@ -1,5 +0,0 @@
-<svg viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="1">
-  <path
-    d="M8.293 14.293a1 1 0 0 1 1.414 0L12 16.586l2.293-2.293a1 1 0 0 1 1.414 1.414l-3 3a1 1 0 0 1-1.414 0l-3-3a1 1 0 0 1 0-1.414ZM11.293 5.293a1 1 0 0 1 1.414 0l3 3a1 1 0 0 1-1.414 1.414L12 7.414 9.707 9.707a1 1 0 0 1-1.414-1.414l3-3Z"
-  />
-</svg>
@@ -1,5 +0,0 @@
-<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-  <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
-  <polyline points="17 8 12 3 7 8"></polyline>
-  <line x1="12" y1="3" x2="12" y2="15"></line>
-</svg>