chore(icon): adds animation

dvcol · Feb 10, 2025 · bdc7745 · bdc7745
1 parent 11fee58
commit bdc7745
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 11 deletions.
diff --git a/demo/components/DemoText.svelte b/demo/components/DemoText.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import IconTextHighlight from '~/icons/IconTextHighlight.svelte';
   import NeoNumberStep from '~/inputs/NeoNumberStep.svelte';
   import NeoInput from '~/inputs/common/NeoInput.svelte';
   import NeoEllipsis from '~/text/NeoEllipsis.svelte';
@@ -25,7 +26,11 @@
 <div class="row">
   <div class="column content">
     <span class="label">Mark</span>
-    <NeoInput bind:value={filter} placeholder="Highlight text" rounded size="30" clearable />
+    <NeoInput bind:value={filter} placeholder="Highlight text" rounded size="30" clearable>
+      {#snippet before()}
+        <IconTextHighlight size="1.25rem" />
+      {/snippet}
+    </NeoInput>
     <NeoMark
       {filter}
       value="Lorem ipsum odor amet, consectetuer adipiscing elit. Malesuada pharetra ullamcorper eget hac; imperdiet a finibus hac. Sollicitudin tincidunt

diff --git a/src/lib/icons/IconSave.svelte b/src/lib/icons/IconSave.svelte
@@ -9,7 +9,17 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M15.2 3a2 2 0 0 1 1.4.6l3.8 3.8a2 2 0 0 1 .6 1.4V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z" />
-  <path d="M17 21v-7a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v7" />
-  <path d="M7 3v4a1 1 0 0 0 1 1h7" />
+  <path
+    d="M15.2 3a2 2 0 0 1 1.4.6l3.8 3.8a2 2 0 0 1 .6 1.4V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z"
+    stroke-dasharray="70"
+    stroke-dashoffset="70"
+  >
+    <animate fill="freeze" attributeName="stroke-dashoffset" dur="0.6s" values="70;0" />
+  </path>
+  <path d="M7 3v4a1 1 0 0 0 1 1h7" stroke-dasharray="16" stroke-dashoffset="16">
+    <animate fill="freeze" attributeName="stroke-dashoffset" begin="0.6s" dur="0.4s" values="16;0" />
+  </path>
+  <path d="M17 21v-7a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v7" stroke-dasharray="32" stroke-dashoffset="32">
+    <animate fill="freeze" attributeName="stroke-dashoffset" begin="1s" dur="0.5s" values="32;0" />
+  </path>
 </svg>
diff --git a/src/lib/icons/IconSaveOff.svelte b/src/lib/icons/IconSaveOff.svelte
@@ -9,11 +9,24 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M13 13H8a1 1 0 0 0-1 1v7" />
-  <path d="M14 8h1" />
-  <path d="M17 21v-4" />
-  <path d="m2 2 20 20" />
-  <path d="M20.41 20.41A2 2 0 0 1 19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 .59-1.41" />
-  <path d="M29.5 11.5s5 5 4 5" />
-  <path d="M9 3h6.2a2 2 0 0 1 1.4.6l3.8 3.8a2 2 0 0 1 .6 1.4V15" />
+  <path d="M9 3h6.2a2 2 0 0 1 1.4.6l3.8 3.8a2 2 0 0 1 .6 1.4V15" stroke-dasharray="32" stroke-dashoffset="32">
+    <animate fill="freeze" attributeName="stroke-dashoffset" dur="0.3s" values="32;0" />
+  </path>
+  <path d="M20.41 20.41A2 2 0 0 1 19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 .59-1.41" stroke-dasharray="40" stroke-dashoffset="40">
+    <animate fill="freeze" attributeName="stroke-dashoffset" begin="0.2s" dur="0.4s" values="40;0" />
+  </path>
+
+  <path d="m2 2 20 20" stroke-dasharray="32" stroke-dashoffset="32">
+    <animate fill="freeze" attributeName="stroke-dashoffset" begin="0.6s" dur="0.4s" values="32;0" />
+  </path>
+
+  <path d="M14 8h1" stroke-dasharray="8" stroke-dashoffset="8">
+    <animate fill="freeze" attributeName="stroke-dashoffset" begin="1s" dur="0.4s" values="8;0" />
+  </path>
+  <path d="M17 21v-4" stroke-dasharray="8" stroke-dashoffset="8">
+    <animate fill="freeze" attributeName="stroke-dashoffset" begin="1.1s" dur="0.4s" values="8;0" />
+  </path>
+  <path d="M13 13H8a1 1 0 0 0-1 1v7" stroke-dasharray="16" stroke-dashoffset="16">
+    <animate fill="freeze" attributeName="stroke-dashoffset" begin="1.2s" dur="0.4s" values="16;0" />
+  </path>
 </svg>
diff --git a/src/lib/icons/IconTextHighlight.svelte b/src/lib/icons/IconTextHighlight.svelte
@@ -0,0 +1,27 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width={$$props.size ?? '1em'}
+  height={$$props.size ?? '1em'}
+  viewBox="0 0 24 24"
+  {...$$props}
+  style:scale={$$props.scale}
+  scale={undefined}
+>
+  <g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M5 4h1a3 3 0 0 1 3 3 3 3 0 0 1 3-3h1" stroke-dasharray="16" stroke-dashoffset="16">
+      <animate fill="freeze" attributeName="stroke-dashoffset" dur="0.2s" values="16;0" />
+    </path>
+    <path d="M9 7v10" stroke-dasharray="16" stroke-dashoffset="16">
+      <animate fill="freeze" attributeName="stroke-dashoffset" begin="0.2s" dur="0.4s" values="16;0" />
+    </path>
+    <path d="M13 20h-1a3 3 0 0 1-3-3 3 3 0 0 1-3 3H5" stroke-dasharray="16" stroke-dashoffset="16">
+      <animate fill="freeze" attributeName="stroke-dashoffset" begin="0.6s" dur="0.2s" values="16;0" />
+    </path>
+    <path d="M5 16H4a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2h1" stroke-dasharray="16" stroke-dashoffset="16">
+      <animate fill="freeze" attributeName="stroke-dashoffset" begin="1s" dur="0.2s" values="16;0" />
+    </path>
+    <path d="M13 8h7a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-7" stroke-dasharray="24" stroke-dashoffset="24">
+      <animate fill="freeze" attributeName="stroke-dashoffset" begin="1.2s" dur="0.2s" values="24;0" />
+    </path>
+  </g>
+</svg>