@genarou/blazir-icons 1.3.2 → 1.3.3

package/dist/icons/Calendar.svelte

@@ -1,18 +1,21 @@
-<!-- src/lib/icons/Calendar.svelte -->
 <script lang="ts">
   import IconBase from "../IconBase.svelte";
-  import type { IconProps } from "../types";
-  const props: IconProps = $props();
+  import type { IconMode, IconProps } from "../types.js";
+
+  const props: IconProps & { mode?: IconMode } = $props();
 </script>
 
 <IconBase
   {...props}
   mode="solid"
-  viewBox="0 0 512 512"
-  ariaLabel={props.ariaLabel ?? "Calendar"}
-  title={props.title ?? ""}
+  viewBox="0 0 24 24"
+  ariaLabel={props.ariaLabel ?? "Calendario"}
+  title={props.title ?? "Calendar Premium"}
 >
-  <path
-    d="M480 128a64 64 0 0 0-64-64h-16V48.45c0-8.61-6.62-16-15.23-16.43A16 16 0 0 0 368 48v16H144V48.45c0-8.61-6.62-16-15.23-16.43A16 16 0 0 0 112 48v16H96a64 64 0 0 0-64 64v12a4 4 0 0 0 4 4h440a4 4 0 0 0 4-4ZM32 416a64 64 0 0 0 64 64h320a64 64 0 0 0 64-64V179a3 3 0 0 0-3-3H35a3 3 0 0 0-3 3Zm344-208a24 24 0 1 1-24 24a24 24 0 0 1 24-24m0 80a24 24 0 1 1-24 24a24 24 0 0 1 24-24m-80-80a24 24 0 1 1-24 24a24 24 0 0 1 24-24m0 80a24 24 0 1 1-24 24a24 24 0 0 1 24-24m0 80a24 24 0 1 1-24 24a24 24 0 0 1 24-24m-80-80a24 24 0 1 1-24 24a24 24 0 0 1 24-24m0 80a24 24 0 1 1-24 24a24 24 0 0 1 24-24m-80-80a24 24 0 1 1-24 24a24 24 0 0 1 24-24m0 80a24 24 0 1 1-24 24a24 24 0 0 1 24-24"
-  />
+  {#snippet children()}
+    <path
+      fill="currentColor"
+      d="M17 3V2h-2v1H9V2H7v1H4a2 2 0 0 0-2 2v15a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2h-3zm3 17H4V9h16v11zm-12-8h2v2H8v-2zm4 0h2v2h-2v-2zm4 0h2v2h-2v-2zm-8 4h2v2H8v-2zm4 0h2v2h-2v-2z"
+    />
+  {/snippet}
 </IconBase>

package/dist/icons/Calendar.svelte.d.ts

@@ -1,4 +1,7 @@
-import type { IconProps } from "../types";
-declare const Calendar: import("svelte").Component<IconProps, {}, "">;
+import type { IconMode, IconProps } from "../types.js";
+type $$ComponentProps = IconProps & {
+    mode?: IconMode;
+};
+declare const Calendar: import("svelte").Component<$$ComponentProps, {}, "">;
 type Calendar = ReturnType<typeof Calendar>;
 export default Calendar;

package/dist/icons/CalendarEdit.svelte

@@ -1,16 +1,16 @@
-<!-- src/lib/icons/CalendarEdit.svelte -->
 <script lang="ts">
   import IconBase from "../IconBase.svelte";
   import type { IconProps } from "../types";
-  const props: IconProps = $props();
+
+  let { ariaLabel, title, ...rest }: IconProps = $props();
 </script>
 
 <IconBase
-  {...props}
+  {...rest}
   mode="solid"
   viewBox="0 0 24 24"
-  ariaLabel={props.ariaLabel ?? "CalendarEdit"}
-  title={props.title ?? ""}
+  ariaLabel={ariaLabel ?? "CalendarEdit"}
+  title={title ?? ""}
 >
   <path
     d="M19 4h-3V2h-2v2h-4V2H8v2H5c-1.103 0-2 .897-2 2v14c0 1.103.897 2 2 2h14c1.103 0 2-.897 2-2V6c0-1.103-.897-2-2-2M5 20V7h14V6l.002 14z"

package/dist/icons/CalendarPlus.svelte

@@ -1,19 +1,21 @@
-<!-- src/lib/icons/CalendarAdd.svelte -->
 <script lang="ts">
   import IconBase from "../IconBase.svelte";
-  import type { IconProps } from "../types";
-  const props: IconProps = $props();
+  import type { IconMode, IconProps } from "../types.js";
+
+  const props: IconProps & { mode?: IconMode } = $props();
 </script>
 
 <IconBase
   {...props}
   mode="solid"
   viewBox="0 0 24 24"
-  ariaLabel={props.ariaLabel ?? "CalendarAdd"}
-  title={props.title ?? ""}
+  ariaLabel={props.ariaLabel ?? "Programar fecha"}
+  title={props.title ?? "Calendar Add Premium"}
 >
-  <path d="M8 15h3v3h2v-3h3v-2h-3v-3h-2v3H8z" />
-  <path
-    d="M19 4h-2V2h-2v2H9V2H7v2H5c-1.103 0-2 .897-2 2v14c0 1.103.897 2 2 2h14c1.103 0 2-.897 2-2V6c0-1.103-.897-2-2-2m.002 16H5V8h14z"
-  />
+  {#snippet children()}
+    <path
+      fill="currentColor"
+      d="M17 3V2h-2v1H9V2H7v1H4a2 2 0 0 0-2 2v15a2 2 0 0 0 2 2h9v-2H4V9h16v4h2V5a2 2 0 0 0-2-2h-3zm2 10v3h-3v2h3v3h2v-3h3v-2h-3v-3h-2z"
+    />
+  {/snippet}
 </IconBase>

package/dist/icons/CalendarPlus.svelte.d.ts

@@ -1,4 +1,7 @@
-import type { IconProps } from "../types";
-declare const CalendarPlus: import("svelte").Component<IconProps, {}, "">;
+import type { IconMode, IconProps } from "../types.js";
+type $$ComponentProps = IconProps & {
+    mode?: IconMode;
+};
+declare const CalendarPlus: import("svelte").Component<$$ComponentProps, {}, "">;
 type CalendarPlus = ReturnType<typeof CalendarPlus>;
 export default CalendarPlus;

package/dist/icons/Cart.svelte

@@ -1,28 +1,31 @@
-<!-- src/lib/icons/Cart.svelte -->
 <script lang="ts">
   import IconBase from "../IconBase.svelte";
   import type { IconProps } from "../types";
 
   const props: IconProps = $props();
-  const ariaLabel = props.ariaLabel ?? "Cart";
+  const ariaLabel = props.ariaLabel ?? "Cart Outline";
   const title = props.title ?? "";
 </script>
 
 <IconBase
   {...props}
-  mode={props.mode ?? "solid"}
+  mode={props.mode ?? "outline"}
   viewBox="0 0 24 24"
   {ariaLabel}
   {title}
 >
-  <!-- IconBase controla color/hover/animaciones/transición; aquí solo paths -->
-  <g fill="none">
+  <g
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
     <path
-      d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z"
-    />
-    <path
-      fill="currentColor"
-      d="M9 20a1 1 0 1 1 0 2a1 1 0 0 1 0-2m7 0a1 1 0 1 1 0 2a1 1 0 0 1 0-2M2.2 2.9a1 1 0 0 1 1.295-.269l.105.07l1.708 1.28a2 2 0 0 1 .653.848l.06.171h12.846a2 2 0 0 1 1.998 2.1l-.013.148l-.457 3.655a5 5 0 0 1-4.32 4.34l-.226.023l-7.313.61l.26 1.124H17.5a1 1 0 0 1 .117 1.993L17.5 19H8.796a2 2 0 0 1-1.906-1.393l-.043-.157l-2.74-11.87L2.4 4.3a1 1 0 0 1-.2-1.4"
+      d="M3.977 5.285L6.15 14.54a2 2 0 0 0 1.94 1.545h9.46a2 2 0 0 0 1.973-1.67l1.08-6.375a1 1 0 0 0-1-1.168H5.216"
     />
+    <path d="M1.5 2.5h2l.477 2.785" />
+    <circle cx="9" cy="20" r="1" fill="currentColor" />
+    <circle cx="17" cy="20" r="1" fill="currentColor" />
   </g>
 </IconBase>

package/dist/icons/Connect.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+    import IconBase from "../IconBase.svelte";
+    import type { IconMode, IconProps } from "../types.js";
+
+    const props: IconProps & { mode?: IconMode } = $props();
+</script>
+
+<IconBase
+    {...props}
+    mode="solid"
+    viewBox="0 0 24 24"
+    ariaLabel={props.ariaLabel ?? "Sincronización o conexión"}
+    title={props.title ?? "Sync / Merge"}
+>
+    {#snippet children()}
+        <path
+            fill="currentColor"
+            d="M3 16v-3H2q-.425 0-.712-.288T1 12t.288-.712T2 11h1V8q0-1.25.875-2.125T6 5h1q0-.425.288-.712T8 4t.713.288T9 5v14q0 .425-.288.713T8 20t-.712-.288T7 19H6q-1.25 0-2.125-.875T3 16m18 0q0 1.25-.875 2.125T18 19h-1q0 .425-.288.713T16 20t-.712-.288T15 19v-3h-3q-.425 0-.712-.288T11 15t.288-.712T12 14h3v-4h-3q-.425 0-.712-.288T11 9t.288-.712T12 8h3V5q0-.425.288-.712T16 4t.713.288T17 5h1q1.25 0 2.125.875T21 8v3h1q.425 0 .713.288T23 12t-.288.713T22 13h-1z"
+        />
+    {/snippet}
+</IconBase>

package/dist/icons/Connect.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { IconMode, IconProps } from "../types.js";
+type $$ComponentProps = IconProps & {
+    mode?: IconMode;
+};
+declare const Connect: import("svelte").Component<$$ComponentProps, {}, "">;
+type Connect = ReturnType<typeof Connect>;
+export default Connect;

package/dist/icons/Dashboard.svelte

@@ -1,18 +1,21 @@
 <script lang="ts">
   import IconBase from "../IconBase.svelte";
-  import type { IconProps } from "../types";
+  import type { IconMode, IconProps } from "../types.js";
 
-  const props: IconProps = $props();
+  const props: IconProps & { mode?: IconMode } = $props();
 </script>
 
 <IconBase
   {...props}
   mode="solid"
   viewBox="0 0 24 24"
-  ariaLabel={props.ariaLabel ?? "Grid view icon"}
-  title={props.title ?? ""}
+  ariaLabel={props.ariaLabel ?? "Vista de cuadrícula"}
+  title={props.title ?? "Grid View"}
 >
-  <path
-    d="M4 13h6c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v8c0 .55.45 1 1 1m0 8h6c.55 0 1-.45 1-1v-4c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v4c0 .55.45 1 1 1m10 0h6c.55 0 1-.45 1-1v-8c0-.55-.45-1-1-1h-6c-.55 0-1 .45-1 1v8c0 .55.45 1 1 1M13 4v4c0 .55.45 1 1 1h6c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1h-6c-.55 0-1 .45-1 1"
-  />
+  {#snippet children()}
+    <path
+      fill="currentColor"
+      d="M4.5 3h5c.8 0 1.5.7 1.5 1.5v7c0 .8-.7 1.5-1.5 1.5h-5c-.8 0-1.5-.7-1.5-1.5v-7C3 3.7 3.7 3 4.5 3zm0 11h5c.8 0 1.5.7 1.5 1.5v4c0 .8-.7 1.5-1.5 1.5h-5c-.8 0-1.5-.7-1.5-1.5v-4c0-.8.7-1.5 1.5-1.5zm9.5-11h5c.8 0 1.5.7 1.5 1.5v4c0 .8-.7 1.5-1.5 1.5h-5c-.8 0-1.5-.7-1.5-1.5v-4c0-.8.7-1.5 1.5-1.5zm0 8h5c.8 0 1.5.7 1.5 1.5v7c0 .8-.7 1.5-1.5 1.5h-5c-.8 0-1.5-.7-1.5-1.5v-7c0-.8.7-1.5 1.5-1.5z"
+    />
+  {/snippet}
 </IconBase>

package/dist/icons/Dashboard.svelte.d.ts

@@ -1,4 +1,7 @@
-import type { IconProps } from "../types";
-declare const Dashboard: import("svelte").Component<IconProps, {}, "">;
+import type { IconMode, IconProps } from "../types.js";
+type $$ComponentProps = IconProps & {
+    mode?: IconMode;
+};
+declare const Dashboard: import("svelte").Component<$$ComponentProps, {}, "">;
 type Dashboard = ReturnType<typeof Dashboard>;
 export default Dashboard;

package/dist/icons/DashboardOutlined.svelte

@@ -1,23 +1,25 @@
-<!-- src/lib/icons/DashboardOutlined.svelte -->
 <script lang="ts">
   import IconBase from "../IconBase.svelte";
-  import type { IconProps } from "../types";
-  const props: IconProps = $props();
+  import type { IconMode, IconProps } from "../types.js";
+
+  const props: IconProps & { mode?: IconMode } = $props();
 </script>
 
 <IconBase
   {...props}
   mode="outline"
   viewBox="0 0 24 24"
-  ariaLabel={props.ariaLabel ?? "Table chart"}
-  title={props.title ?? ""}
+  ariaLabel={props.ariaLabel ?? "Gráfico de tabla"}
+  title={props.title ?? "Table Chart"}
   strokeWidth={props.strokeWidth ?? 1.5}
-  strokeLinecap={props.strokeLinecap ?? "round"}
-  strokeLinejoin={props.strokeLinejoin ?? "round"}
 >
-  <!-- Sin fill: que herede del SVG (outline) -->
-  <path
-    d="M4 13h6c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v8c0 .55.45 1 1 1m0 8h6c.55 0 1-.45 1-1v-4c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v4c0 .55.45 1 1 1m10 0h6c.55 0 1-.45 1-1v-8c0-.55-.45-1-1-1h-6c-.55 0-1 .45-1 1v8c0 .55.45 1 1 1M13 4v4c0 .55.45 1 1 1h6c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1h-6c-.55 0-1 .45-1 1"
-    fill="none"
-  />
+  {#snippet children()}
+    <path
+      d="M4 13h6c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v8c0 .55.45 1 1 1m0 8h6c.55 0 1-.45 1-1v-4c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v4c0 .55.45 1 1 1m10 0h6c.55 0 1-.45 1-1v-8c0-.55-.45-1-1-1h-6c-.55 0-1 .45-1 1v8c0 .55.45 1 1 1M13 4v4c0 .55.45 1 1 1h6c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1h-6c-.55 0-1 .45-1 1"
+      fill="none"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  {/snippet}
 </IconBase>

package/dist/icons/DashboardOutlined.svelte.d.ts

@@ -1,4 +1,7 @@
-import type { IconProps } from "../types";
-declare const DashboardOutlined: import("svelte").Component<IconProps, {}, "">;
+import type { IconMode, IconProps } from "../types.js";
+type $$ComponentProps = IconProps & {
+    mode?: IconMode;
+};
+declare const DashboardOutlined: import("svelte").Component<$$ComponentProps, {}, "">;
 type DashboardOutlined = ReturnType<typeof DashboardOutlined>;
 export default DashboardOutlined;

package/dist/icons/Eye.svelte

@@ -1,40 +1,53 @@
-<!-- src/lib/icons/EyeRevealAnimated.svelte -->
 <script lang="ts">
   import IconBase from "../IconBase.svelte";
-  import type { IconProps } from "../types";
-  const props: IconProps = $props();
+  import type { IconMode, IconProps } from "../types.js";
+
+  const props: IconProps & { mode?: IconMode } = $props();
 </script>
 
 <IconBase
   {...props}
   mode="outline"
   viewBox="0 0 24 24"
-  ariaLabel={props.ariaLabel ?? "Eye reveal (animated)"}
-  title={props.title ?? ""}
+  ariaLabel={props.ariaLabel ?? "Revelar contraseña"}
+  title={props.title ?? "Eye Reveal"}
+  strokeWidth={props.strokeWidth ?? 2}
 >
-  <!-- Pupila que aparece -->
-  <circle cx="12" cy="12" r="0" fill="currentColor">
-    <animate fill="freeze" attributeName="r" dur="0.2s" values="0;3" />
-  </circle>
+  {#snippet children()}
+    <circle cx="12" cy="12" r="0" fill="currentColor">
+      <animate
+        fill="freeze"
+        attributeName="r"
+        dur="0.25s"
+        values="0;3"
+        calcMode="spline"
+        keySplines="0.4 0 0.2 1"
+      />
+    </circle>
 
-  <!-- Contorno del ojo (stroke hereda del <svg>), relleno con opacidad animada -->
-  <path
-    fill="currentColor"
-    fill-opacity="0"
-    d="M4 12c1.38 -0.77 4.42 -1.3 8 -1.3c3.58 0 6.62 0.53 8 1.3c-1.38 0.77 -4.42 1.3 -8 1.3c-3.58 0 -6.62 -0.53 -8 -1.3Z"
-  >
-    <animate
-      fill="freeze"
-      attributeName="d"
-      dur="0.5s"
-      values="M4 12c1.38 -0.77 4.42 -1.3 8 -1.3c3.58 0 6.62 0.53 8 1.3c-1.38 0.77 -4.42 1.3 -8 1.3c-3.58 0 -6.62 -0.53 -8 -1.3Z;M2 12c1.72 -3.83 5.53 -6.5 10 -6.5c4.47 0 8.28 2.67 10 6.5c-1.72 3.83 -5.53 6.5 -10 6.5c-4.47 0 -8.28 -2.67 -10 -6.5Z"
-    />
-    <animate
-      fill="freeze"
-      attributeName="fill-opacity"
-      begin="0.5s"
-      dur="0.15s"
-      values="0;0.3"
-    />
-  </path>
+    <path
+      fill="currentColor"
+      fill-opacity="0"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      d="M3 12c2-1 5-2 9-2s7 1 9 2c-2 1-5 2-9 2s-7-1-9-2Z"
+    >
+      <animate
+        fill="freeze"
+        attributeName="d"
+        dur="0.4s"
+        values="M3 12c2-1 5-2 9-2s7 1 9 2c-2 1-5 2-9 2s-7-1-9-2Z;M2 12c2-4 6-7 10-7s8 3 10 7c-2 4-6 7-10 7s-8-3-10-7Z"
+        calcMode="spline"
+        keySplines="0.4 0 0.2 1"
+      />
+      <animate
+        fill="freeze"
+        attributeName="fill-opacity"
+        begin="0.4s"
+        dur="0.2s"
+        values="0;0.15"
+      />
+    </path>
+  {/snippet}
 </IconBase>

package/dist/icons/Eye.svelte.d.ts

@@ -1,4 +1,7 @@
-import type { IconProps } from "../types";
-declare const Eye: import("svelte").Component<IconProps, {}, "">;
+import type { IconMode, IconProps } from "../types.js";
+type $$ComponentProps = IconProps & {
+    mode?: IconMode;
+};
+declare const Eye: import("svelte").Component<$$ComponentProps, {}, "">;
 type Eye = ReturnType<typeof Eye>;
 export default Eye;

package/dist/icons/EyeOff.svelte

@@ -1,63 +1,63 @@
-<!-- src/lib/icons/EyeRevealOffAnimated.svelte -->
 <script lang="ts">
   import IconBase from "../IconBase.svelte";
-  import type { IconProps } from "../types";
-  const props: IconProps = $props();
+  import type { IconMode, IconProps } from "../types.js";
+
+  const props: IconProps & { mode?: IconMode } = $props();
 </script>
 
 <IconBase
   {...props}
   mode="outline"
   viewBox="0 0 24 24"
-  ariaLabel={props.ariaLabel ?? "Eye reveal off (animated)"}
-  title={props.title ?? ""}
+  ariaLabel={props.ariaLabel ?? "Ocultar contraseña"}
+  title={props.title ?? "Eye Reveal Off"}
+  strokeWidth={props.strokeWidth ?? 2}
+  strokeLinecap="round"
+  strokeLinejoin="round"
 >
-  <!-- Pupila aparece -->
-  <circle cx="12" cy="12" r="0" fill="currentColor">
-    <animate fill="freeze" attributeName="r" dur="0.2s" values="0;3" />
-  </circle>
-
-  <!-- Relleno suave del ojo (aparece) -->
-  <path
-    fill="currentColor"
-    fill-opacity="0"
-    d="M4 12c1.38 -0.77 4.42 -1.3 8 -1.3c3.58 0 6.62 0.53 8 1.3c-1.38 0.77 -4.42 1.3 -8 1.3c-3.58 0 -6.62 -0.53 -8 -1.3Z"
-  >
-    <animate
-      fill="freeze"
-      attributeName="d"
-      dur="0.5s"
-      values="M4 12c1.38 -0.77 4.42 -1.3 8 -1.3c3.58 0 6.62 0.53 8 1.3c-1.38 0.77 -4.42 1.3 -8 1.3c-3.58 0 -6.62 -0.53 -8 -1.3Z;M2 12c1.72 -3.83 5.53 -6.5 10 -6.5c4.47 0 8.28 2.67 10 6.5c-1.72 3.83 -5.53 6.5 -10 6.5c-4.47 0 -8.28 -2.67 -10 -6.5Z"
-    />
-    <animate
-      fill="freeze"
-      attributeName="fill-opacity"
-      begin="0.5s"
-      dur="0.15s"
-      values="0;0.3"
-    />
-  </path>
+  {#snippet children()}
+    <circle cx="12" cy="12" r="0" fill="currentColor">
+      <animate
+        fill="freeze"
+        attributeName="r"
+        dur="0.25s"
+        values="0;3"
+        calcMode="spline"
+        keySplines="0.4 0 0.2 1"
+      />
+    </circle>
 
-  <!-- Contorno del ojo (hereda stroke de IconBase outline) -->
-  <path
-    fill="none"
-    d="M2 12c1.72 -3.83 5.53 -6.5 10 -6.5c4.47 0 8.28 2.67 10 6.5c-1.72 3.83 -5.53 6.5 -10 6.5c-4.47 0 -8.28 -2.67 -10 -6.5Z"
-  />
+    <path
+      fill="currentColor"
+      fill-opacity="0"
+      stroke="currentColor"
+      d="M2 12c2-4 6-7 10-7s8 3 10 7c-2 4-6 7-10 7s-8-3-10-7Z"
+    >
+      <animate
+        fill="freeze"
+        attributeName="fill-opacity"
+        begin="0.4s"
+        dur="0.2s"
+        values="0;0.12"
+      />
+    </path>
 
-  <!-- Tacha / slash -->
-  <path
-    fill="none"
-    d="M3 12h18"
-    stroke-dasharray="28"
-    stroke-dashoffset="28"
-    transform="rotate(45 12 12)"
-  >
-    <animate
-      fill="freeze"
-      attributeName="stroke-dashoffset"
-      begin="0.65s"
-      dur="0.4s"
-      values="28;0"
-    />
-  </path>
+    <path
+      fill="none"
+      stroke="currentColor"
+      d="M21 3L3 21"
+      stroke-dasharray="26"
+      stroke-dashoffset="26"
+    >
+      <animate
+        fill="freeze"
+        attributeName="stroke-dashoffset"
+        begin="0.5s"
+        dur="0.3s"
+        values="26;0"
+        calcMode="spline"
+        keySplines="0.4 0 0.2 1"
+      />
+    </path>
+  {/snippet}
 </IconBase>

package/dist/icons/EyeOff.svelte.d.ts

@@ -1,4 +1,7 @@
-import type { IconProps } from "../types";
-declare const EyeOff: import("svelte").Component<IconProps, {}, "">;
+import type { IconMode, IconProps } from "../types.js";
+type $$ComponentProps = IconProps & {
+    mode?: IconMode;
+};
+declare const EyeOff: import("svelte").Component<$$ComponentProps, {}, "">;
 type EyeOff = ReturnType<typeof EyeOff>;
 export default EyeOff;

package/dist/icons/Filter.svelte

@@ -1,18 +1,21 @@
 <script lang="ts">
   import IconBase from "../IconBase.svelte";
-  import type { IconProps } from "../types";
+  import type { IconMode, IconProps } from "../types.js";
 
-  const props: IconProps = $props();
+  const props: IconProps & { mode?: IconMode } = $props();
 </script>
 
 <IconBase
   {...props}
   mode="solid"
   viewBox="0 0 24 24"
-  ariaLabel={props.ariaLabel ?? "Filter icon"}
-  title={props.title ?? ""}
+  ariaLabel={props.ariaLabel ?? "Filtrar"}
+  title={props.title ?? "Filter"}
 >
-  <path
-    d="M4.25 5.61C6.57 8.59 10 13 10 13v5c0 1.1.9 2 2 2s2-.9 2-2v-5s3.43-4.41 5.75-7.39c.51-.66.04-1.61-.8-1.61H5.04c-.83 0-1.3.95-.79 1.61"
-  />
+  {#snippet children()}
+    <path
+      fill="currentColor"
+      d="M3 5.5c0-.83.67-1.5 1.5-1.5h15c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5h-15C3.67 7 3 6.33 3 5.5zm4 6.5c0-.83.67-1.5 1.5-1.5h7c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5h-7c-.83 0-1.5-.67-1.5-1.5zm3 6.5c0-.83.67-1.5 1.5-1.5h3c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5h-3c-.83 0-1.5-.67-1.5-1.5z"
+    />
+  {/snippet}
 </IconBase>

package/dist/icons/Filter.svelte.d.ts

@@ -1,4 +1,7 @@
-import type { IconProps } from "../types";
-declare const Filter: import("svelte").Component<IconProps, {}, "">;
+import type { IconMode, IconProps } from "../types.js";
+type $$ComponentProps = IconProps & {
+    mode?: IconMode;
+};
+declare const Filter: import("svelte").Component<$$ComponentProps, {}, "">;
 type Filter = ReturnType<typeof Filter>;
 export default Filter;

package/dist/icons/FilterOutline.svelte

@@ -1,20 +1,21 @@
-<!-- src/lib/icons/FilterOutline.svelte -->
 <script lang="ts">
   import IconBase from "../IconBase.svelte";
-  import type { IconProps } from "../types";
-  const props: IconProps = $props();
+  import type { IconMode, IconProps } from "../types.js";
+
+  const props: IconProps & { mode?: IconMode } = $props();
 </script>
 
 <IconBase
   {...props}
   mode="outline"
   viewBox="0 0 24 24"
-  ariaLabel={props.ariaLabel ?? "Filter outline"}
-  title={props.title ?? ""}
+  ariaLabel={props.ariaLabel ?? "Filtrar"}
+  title={props.title ?? "Filter"}
   strokeLinecap="round"
   strokeLinejoin="round"
   strokeWidth={props.strokeWidth ?? 2}
 >
-  <!-- Tres líneas con extremos redondeados (outline) -->
-  <path d="M4 7h16M6 11.5h12M9 16h6" />
+  {#snippet children()}
+    <path d="M4 7h16M6 12h12M8 17h8" fill="none" stroke="currentColor" />
+  {/snippet}
 </IconBase>

package/dist/icons/FilterOutline.svelte.d.ts

@@ -1,4 +1,7 @@
-import type { IconProps } from "../types";
-declare const FilterOutline: import("svelte").Component<IconProps, {}, "">;
+import type { IconMode, IconProps } from "../types.js";
+type $$ComponentProps = IconProps & {
+    mode?: IconMode;
+};
+declare const FilterOutline: import("svelte").Component<$$ComponentProps, {}, "">;
 type FilterOutline = ReturnType<typeof FilterOutline>;
 export default FilterOutline;

package/dist/icons/HardDrive.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+    import IconBase from "../IconBase.svelte";
+    import type { IconMode, IconProps } from "../types.js";
+
+    const props: IconProps & { mode?: IconMode } = $props();
+</script>
+
+<IconBase
+    {...props}
+    mode="solid"
+    viewBox="0 0 24 24"
+    ariaLabel={props.ariaLabel ?? "Cámara o escaneo"}
+    title={props.title ?? "Camera / Scan"}
+>
+    {#snippet children()}
+        <path
+            fill="currentColor"
+            d="M9.175 8.175Q8 9.35 8 11t1.175 2.825T12 15t2.825-1.175T16 11t-1.175-2.825T12 7T9.175 8.175M12 13q-.825 0-1.412-.587T10 11t.588-1.412T12 9t1.413.588T14 11t-.587 1.413T12 13m4.713 3.713Q17 16.425 17 16t-.288-.712T16 15t-.712.288T15 16t.288.713T16 17t.713-.288M4 20V7q0-2.075 1.463-3.537T9 2h6q2.075 0 3.538 1.463T20 7v13q0 .825-.587 1.413T18 22H6q-.825 0-1.412-.587T4 20m3 0h10q.425 0 .713-.288T18 19t-.288-.712T17 18H7q-.425 0-.712.288T6 19t.288.713T7 20"
+        />
+    {/snippet}
+</IconBase>

package/dist/icons/HardDrive.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { IconMode, IconProps } from "../types.js";
+type $$ComponentProps = IconProps & {
+    mode?: IconMode;
+};
+declare const HardDrive: import("svelte").Component<$$ComponentProps, {}, "">;
+type HardDrive = ReturnType<typeof HardDrive>;
+export default HardDrive;

package/dist/icons/Historic.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+    import IconBase from "../IconBase.svelte";
+    import type { IconMode, IconProps } from "../types.js";
+
+    const props: IconProps & { mode?: IconMode } = $props();
+</script>
+
+<IconBase
+    {...props}
+    mode="solid"
+    viewBox="0 0 24 24"
+    ariaLabel={props.ariaLabel ?? "Historial o recargar"}
+    title={props.title ?? "History / Refresh"}
+>
+    {#snippet children()}
+        <path
+            fill="currentColor"
+            d="M12 22q-3.55 0-6.262-2.175t-3.488-5.55q-.1-.425.15-.763t.675-.387t.75.2t.45.675q.675 2.625 2.813 4.313T12 20q3.35 0 5.675-2.325T20 12t-2.325-5.675T12 4Q9.85 4 8.012 5.062T5.1 8H7q.425 0 .713.288T8 9t-.288.713T7 10H3.6q-.55 0-.875-.437t-.15-.938q1.05-2.95 3.625-4.788T12 2q2.075 0 3.9.788t3.175 2.137T21.213 8.1T22 12t-.788 3.9t-2.137 3.175t-3.175 2.138T12 22m1-10.4l2.5 2.5q.275.275.275.7t-.275.7t-.7.275t-.7-.275l-2.8-2.8q-.15-.15-.225-.337T11 11.975V8q0-.425.288-.712T12 7t.713.288T13 8z"
+        />
+    {/snippet}
+</IconBase>

package/dist/icons/Historic.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { IconMode, IconProps } from "../types.js";
+type $$ComponentProps = IconProps & {
+    mode?: IconMode;
+};
+declare const Historic: import("svelte").Component<$$ComponentProps, {}, "">;
+type Historic = ReturnType<typeof Historic>;
+export default Historic;