add: Icon

Valexr · Apr 24, 2024 · 9e29052 · 9e29052
1 parent 5655b61
commit 9e29052
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 37 deletions.
diff --git a/public/assets/sprite.svg b/public/assets/sprite.svg
diff --git 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
@@ -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