From 9e29052ede85b6c0ebded77e54b2f4687de1b0ef Mon Sep 17 00:00:00 2001
From: Valexr <valexr@gmail.com>
Date: Wed, 24 Apr 2024 21:45:57 +0200
Subject: [PATCH] add: Icon

---
 public/assets/sprite.svg       | 16 +++++++++++++
 src/App.svelte                 | 43 +++++-----------------------------
 src/lib/components/Icon.svelte | 40 +++++++++++++++++++++++++++++++
 src/svg/sprite.svg             | 16 +++++++++++++
 4 files changed, 78 insertions(+), 37 deletions(-)
 create mode 100644 public/assets/sprite.svg
 create mode 100644 src/lib/components/Icon.svelte
 create mode 100644 src/svg/sprite.svg

diff --git a/public/assets/sprite.svg b/public/assets/sprite.svg
new file mode 100644
index 0000000..9fac6ba
--- /dev/null
+++ b/public/assets/sprite.svg
@@ -0,0 +1,16 @@
+<svg id="svelte-khights-ui-icons"
+    xmlns="http://www.w3.org/2000/svg">
+    <symbol id="Images" viewBox="0 0 18 18">
+        <path class="fill" d="M16 2.5a.534.534 0 0 0-.563-.5H.563A.534.534 0 0 0 0 2.5v11a.534.534 0 0 0 .563.5H1V3h15Z" />
+        <path class="fill" d="M17.5 4h-15a.5.5 0 0 0-.5.5v11a.5.5 0 0 0 .5.5h15a.5.5 0 0 0 .5-.5v-11a.5.5 0 0 0-.5-.5Zm-.5 9.687-2.636-2.637a1 1 0 0 0-1.414 0l-1.536 1.536-3.778-3.779a1 1 0 0 0-1.414 0L3 12.03V5h14Z" />
+        <circle class="fill" cx="14.5" cy="7.5" r="1.25" />
+    </symbol>
+    <symbol id="Quote" viewBox="0 0 18 18">
+        <path class="fill" d="M17.5 9h-9a.5.5 0 0 0-.5.5v2a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5V11h2v5h-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5H14v-5h2v.5a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-2a.5.5 0 0 0-.5-.5Z"/>
+        <path class="fill" d="M15.5 1h-14a.5.5 0 0 0-.5.5v11a.5.5 0 0 0 .5.5H7V9a1 1 0 0 1 1-1h1.344L6.636 5.293a1 1 0 0 0-1.414 0L2 8.514V2h13v6h1V1.5a.5.5 0 0 0-.5-.5Z"/>
+        <circle class="fill" cx="12.35" cy="4.65" r="1.35"/>
+    </symbol>
+    <symbol id="Delete" viewBox="0 0 18 18">
+        <path d="M15.75 3H12V2a1 1 0 0 0-1-1H6a1 1 0 0 0-1 1v1H1.25a.25.25 0 0 0-.25.25v.5a.25.25 0 0 0 .25.25h1l1.207 12.55a.5.5 0 0 0 .5.45h9.089a.5.5 0 0 0 .5-.45L14.75 4h1a.25.25 0 0 0 .25-.25v-.5a.25.25 0 0 0-.25-.25ZM5.532 14.5A.5.5 0 0 1 5 14.035v-.001l-.535-8a.501.501 0 0 1 1-.067l.535 8a.5.5 0 0 1-.465.533ZM9 14a.5.5 0 0 1-1 0V6a.5.5 0 0 1 1 0Zm2-11H6V2h5Zm1 11.034a.501.501 0 0 1-1-.067l.535-8a.501.501 0 1 1 1 .067Z" />
+    </symbol>
+</svg>
\ No newline at end of file
diff --git a/src/App.svelte b/src/App.svelte
index 5869bc5..6104858 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -6,6 +6,7 @@
     import DateForm from "$lib/components/Date.svelte";
     import County from "$lib/components/County.svelte";
     import Quote from "$lib/components/Quote.svelte";
+    import Icon from "$lib/components/Icon.svelte";
 </script>
 
 <script lang="ts">
@@ -65,8 +66,9 @@
                 </header>
                 <County {counter} />
                 <footer>
-                    <button id={String(id)} on:click={deleteDate}>
-                        {t("Delete", "Удалить")}
+                    <button class="box" id={String(id)} on:click={deleteDate}>
+                        <!-- {t("Delete", "Удалить")} -->
+                        <Icon name="Delete" />
                     </button>
                 </footer>
             </section>
@@ -84,45 +86,12 @@
     <footer>
         <button class="box" on:click={images.back}>
             <!-- {t("Image", "Картинка")} -->
-            <svg
-                xmlns="http://www.w3.org/2000/svg"
-                height="18"
-                width="18"
-                fill="currentColor"
-            >
-                <path
-                    class="fill"
-                    d="M16 2.5a.534.534 0 0 0-.563-.5H.563A.534.534 0 0 0 0 2.5v11a.534.534 0 0 0 .563.5H1V3h15Z"
-                />
-                <path
-                    class="fill"
-                    d="M17.5 4h-15a.5.5 0 0 0-.5.5v11a.5.5 0 0 0 .5.5h15a.5.5 0 0 0 .5-.5v-11a.5.5 0 0 0-.5-.5Zm-.5 9.687-2.636-2.637a1 1 0 0 0-1.414 0l-1.536 1.536-3.778-3.779a1 1 0 0 0-1.414 0L3 12.03V5h14Z"
-                />
-                <circle class="fill" cx="14.5" cy="7.5" r="1.25" />
-            </svg>
+            <Icon name="Images" />
         </button>
         <h2>{$time}</h2>
         <button class="box" on:click={quote.random}>
             <!-- {t("Quote", "Цитата")} -->
-            <svg
-                xmlns="http://www.w3.org/2000/svg"
-                height="18"
-                width="18"
-                fill="currentColor"
-            >
-                <path
-                    class="fill"
-                    d="M17.5 9h-9a.5.5 0 0 0-.5.5v2a.5.5 0 0 0
-                .5.5h1a.5.5 0 0 0 .5-.5V11h2v5h-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0
-                .5.5h3a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5H14v-5h2v.5a.5.5 0 0
-                0 .5.5h1a.5.5 0 0 0 .5-.5v-2a.5.5 0 0 0-.5-.5Z"
-                />
-                <path
-                    class="fill"
-                    d="M15.5 1h-14a.5.5 0 0 0-.5.5v11a.5.5 0 0 0 .5.5H7V9a1 1 0 0 1 1-1h1.344L6.636 5.293a1 1 0 0 0-1.414 0L2 8.514V2h13v6h1V1.5a.5.5 0 0 0-.5-.5Z"
-                />
-                <circle class="fill" cx="12.35" cy="4.65" r="1.35" />
-            </svg>
+            <Icon name="Quote" />
         </button>
     </footer>
 {/await}
diff --git a/src/lib/components/Icon.svelte b/src/lib/components/Icon.svelte
new file mode 100644
index 0000000..cae8cea
--- /dev/null
+++ b/src/lib/components/Icon.svelte
@@ -0,0 +1,40 @@
+<script lang="ts">
+    export let id = "";
+    export let name = "Close";
+    export let size = "16px";
+    export let color = "currentColor";
+    export let rotate = 0;
+    export let spin = false;
+    export let style = "";
+    export let bordered = false;
+</script>
+
+<svg
+    {id}
+    width={size}
+    height={size}
+    fill={color}
+    class:spin
+    class:bordered
+    style="transform: rotate({rotate}deg); --icon-size: {size}; {style}"
+>
+    <use href="./assets/sprite.svg#{name}" />
+</svg>
+
+<style>
+    svg {
+        flex: 0 0 var(--icon-size);
+    }
+    .spin {
+        animation: spin 0.75s linear infinite;
+    }
+    .bordered {
+        box-shadow: 0 0 0 1px var(--color-border);
+        border-radius: 4px;
+    }
+    @keyframes spin {
+        to {
+            transform: rotate(360deg);
+        }
+    }
+</style>
diff --git a/src/svg/sprite.svg b/src/svg/sprite.svg
new file mode 100644
index 0000000..9fac6ba
--- /dev/null
+++ b/src/svg/sprite.svg
@@ -0,0 +1,16 @@
+<svg id="svelte-khights-ui-icons"
+    xmlns="http://www.w3.org/2000/svg">
+    <symbol id="Images" viewBox="0 0 18 18">
+        <path class="fill" d="M16 2.5a.534.534 0 0 0-.563-.5H.563A.534.534 0 0 0 0 2.5v11a.534.534 0 0 0 .563.5H1V3h15Z" />
+        <path class="fill" d="M17.5 4h-15a.5.5 0 0 0-.5.5v11a.5.5 0 0 0 .5.5h15a.5.5 0 0 0 .5-.5v-11a.5.5 0 0 0-.5-.5Zm-.5 9.687-2.636-2.637a1 1 0 0 0-1.414 0l-1.536 1.536-3.778-3.779a1 1 0 0 0-1.414 0L3 12.03V5h14Z" />
+        <circle class="fill" cx="14.5" cy="7.5" r="1.25" />
+    </symbol>
+    <symbol id="Quote" viewBox="0 0 18 18">
+        <path class="fill" d="M17.5 9h-9a.5.5 0 0 0-.5.5v2a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5V11h2v5h-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5H14v-5h2v.5a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-2a.5.5 0 0 0-.5-.5Z"/>
+        <path class="fill" d="M15.5 1h-14a.5.5 0 0 0-.5.5v11a.5.5 0 0 0 .5.5H7V9a1 1 0 0 1 1-1h1.344L6.636 5.293a1 1 0 0 0-1.414 0L2 8.514V2h13v6h1V1.5a.5.5 0 0 0-.5-.5Z"/>
+        <circle class="fill" cx="12.35" cy="4.65" r="1.35"/>
+    </symbol>
+    <symbol id="Delete" viewBox="0 0 18 18">
+        <path d="M15.75 3H12V2a1 1 0 0 0-1-1H6a1 1 0 0 0-1 1v1H1.25a.25.25 0 0 0-.25.25v.5a.25.25 0 0 0 .25.25h1l1.207 12.55a.5.5 0 0 0 .5.45h9.089a.5.5 0 0 0 .5-.45L14.75 4h1a.25.25 0 0 0 .25-.25v-.5a.25.25 0 0 0-.25-.25ZM5.532 14.5A.5.5 0 0 1 5 14.035v-.001l-.535-8a.501.501 0 0 1 1-.067l.535 8a.5.5 0 0 1-.465.533ZM9 14a.5.5 0 0 1-1 0V6a.5.5 0 0 1 1 0Zm2-11H6V2h5Zm1 11.034a.501.501 0 0 1-1-.067l.535-8a.501.501 0 1 1 1 .067Z" />
+    </symbol>
+</svg>
\ No newline at end of file