@genarou/blazir-icons 1.3.4 → 1.3.5

package/dist/Icon.svelte

@@ -1,37 +1,34 @@
 <!-- Icon.svelte — Refactored v2 -->
 <!-- Cache inteligente adaptativo + lazy loading opcional + actions diff -->
 <script lang="ts">
-  import type { Component } from 'svelte';
-  import { coerceSize } from './utils/defaults.js';
-  import { iconRegistry, type IconName } from './icons/registry.js';
-  import { iconPresets, iconVariants } from './presets.js';
-  import type { IconProps } from './types.js';
+  import type { Component } from "svelte";
+  import { getLoadedIcon, loadIcon } from "./icons/lazy-registry.js";
+  import { iconRegistry, type IconName } from "./icons/registry.js";
+  import { iconPresets, iconVariants } from "./presets.js";
   import {
-    getPresetVariantMerge,
     arePropsStable,
     buildStructuralKey,
     getCachedMergedProps,
+    getPresetVariantMerge,
     setCachedMergedProps,
     toSizePx,
-  } from './smart-cache.js';
-  import {
-    getLoadedIcon,
-    loadIcon,
-  } from './icons/lazy-registry.js';
+  } from "./smart-cache.js";
+  import type { IconProps } from "./types.js";
+  import { coerceSize } from "./utils/defaults.js";
 
   // ============================================================================
   // TIPOS
   // ============================================================================
   type ActionFn<T = HTMLElement, P = any> = (
     node: T,
-    params?: P
+    params?: P,
   ) => void | { update?: (p?: P) => void; destroy?: () => void };
 
   type ActionEntry<T = HTMLElement> = [ActionFn<T, any>, any?];
   type IconPresetName = keyof typeof iconPresets;
   type IconVariantName = keyof typeof iconVariants;
 
-  interface DynamicIconProps extends Omit<IconProps, 'children'> {
+  interface DynamicIconProps extends Omit<IconProps, "children"> {
     name?: IconName;
     preset?: IconPresetName;
     variant?: IconVariantName;
@@ -57,7 +54,7 @@
   // --- Modo EAGER (default): usa el registry estático ya cargado ---
   // Mismo comportamiento que antes: sin latencia, sin skeleton en primer render.
   const _eagerComp = $derived(
-    iconName ? (iconRegistry[iconName as IconName] ?? null) : null
+    iconName ? (iconRegistry[iconName as IconName] ?? null) : null,
   );
 
   // --- Modo LAZY (opt-in): dynamic import() por ícono ---
@@ -82,8 +79,8 @@
     // Si es el mismo nombre y ya lo cargamos → no hacer nada
     if (_lazyCurrentName === name && _lazyComp) return;
 
-    // Intentar sincrónico primero (caché de íconos ya cargados)
-    const synced = getLoadedIcon(name) ?? (iconRegistry[name as IconName] ?? null);
+    // Intentar sincrónico primero (caché de íconos ya cargados en esta sesión)
+    const synced = getLoadedIcon(name);
     if (synced) {
       _lazyComp = synced;
       _lazyCurrentName = name;
@@ -121,7 +118,7 @@
   // ============================================================================
   function toMs(v: unknown): string | undefined {
     if (v == null) return undefined;
-    return typeof v === 'number' ? `${v}ms` : String(v);
+    return typeof v === "number" ? `${v}ms` : String(v);
   }
 
   // ============================================================================
@@ -202,7 +199,7 @@
   // ATRIBUTOS DEL HOST
   // ============================================================================
   const hostClass = $derived(
-    p.class ? `bz-icon-wrapper ${p.class}` : 'bz-icon-wrapper'
+    p.class ? `bz-icon-wrapper ${p.class}` : "bz-icon-wrapper",
   );
 
   const hostStyle = $derived.by(() => {
@@ -296,7 +293,7 @@
   >
     {#key mountKey}
       <!-- svelte-ignore: cast necesario para componentes dinámicos con props genéricas -->
-      <Comp {...(child as any)} />
+      <Comp {...child as any} />
     {/key}
   </span>
 {:else if isLoading}
@@ -330,8 +327,9 @@
     transform: translateX(-50%);
     pointer-events: none;
     opacity: 0;
-    transition: opacity 0.15s ease var(--bz-tooltip-delay, 0ms),
-                transform 0.15s ease var(--bz-tooltip-delay, 0ms);
+    transition:
+      opacity 0.15s ease var(--bz-tooltip-delay, 0ms),
+      transform 0.15s ease var(--bz-tooltip-delay, 0ms);
     z-index: 9999;
   }
 
@@ -346,13 +344,13 @@
     padding: 5px 9px;
     border-radius: 6px;
     white-space: nowrap;
-    box-shadow: 0 2px 8px rgba(0,0,0,0.18);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
     transform: translateX(-50%) translateY(3px);
   }
 
   /* Flecha del tooltip */
   .bz-icon-wrapper[data-bz-tooltip]::before {
-    content: '';
+    content: "";
     border: 5px solid transparent;
     border-top-color: var(--bz-tooltip-bg, #1a1a1a);
     bottom: calc(100% + 0px);

package/dist/Icon.svelte.d.ts

@@ -1,7 +1,7 @@
-import type { Component } from 'svelte';
-import { type IconName } from './icons/registry.js';
-import { iconPresets, iconVariants } from './presets.js';
-import type { IconProps } from './types.js';
+import type { Component } from "svelte";
+import { type IconName } from "./icons/registry.js";
+import { iconPresets, iconVariants } from "./presets.js";
+import type { IconProps } from "./types.js";
 type ActionFn<T = HTMLElement, P = any> = (node: T, params?: P) => void | {
     update?: (p?: P) => void;
     destroy?: () => void;
@@ -9,7 +9,7 @@ type ActionFn<T = HTMLElement, P = any> = (node: T, params?: P) => void | {
 type ActionEntry<T = HTMLElement> = [ActionFn<T, any>, any?];
 type IconPresetName = keyof typeof iconPresets;
 type IconVariantName = keyof typeof iconVariants;
-interface DynamicIconProps extends Omit<IconProps, 'children'> {
+interface DynamicIconProps extends Omit<IconProps, "children"> {
     name?: IconName;
     preset?: IconPresetName;
     variant?: IconVariantName;

package/dist/IconLazy.svelte

@@ -0,0 +1,297 @@
+<!-- IconLazy.svelte
+     Variante zero-bundle del componente dinámico.
+     NO importa iconRegistry en runtime — cada ícono se code-splitea
+     en su propio chunk por el bundler via dynamic import().
+     Úsalo cuando el nombre del ícono se decide en runtime y quieres
+     que solo los iconos realmente usados entren al bundle.
+-->
+<script lang="ts">
+  import type { Component } from "svelte";
+  import { coerceSize } from "./utils/defaults.js";
+  // import type → TypeScript lo borra en compilación, cero runtime dep sobre registry
+  import { getLoadedIcon, loadIcon } from "./icons/lazy-registry.js";
+  import type { IconName } from "./icons/registry.js";
+  import { iconPresets, iconVariants } from "./presets.js";
+  import {
+    arePropsStable,
+    buildStructuralKey,
+    getCachedMergedProps,
+    getPresetVariantMerge,
+    setCachedMergedProps,
+    toSizePx,
+  } from "./smart-cache.js";
+  import type { IconProps } from "./types.js";
+
+  type ActionFn<T = HTMLElement, P = any> = (
+    node: T,
+    params?: P,
+  ) => void | { update?: (p?: P) => void; destroy?: () => void };
+
+  type ActionEntry<T = HTMLElement> = [ActionFn<T, any>, any?];
+  type IconPresetName = keyof typeof iconPresets;
+  type IconVariantName = keyof typeof iconVariants;
+
+  interface LazyIconProps extends Omit<IconProps, "children"> {
+    name?: IconName;
+    preset?: IconPresetName;
+    variant?: IconVariantName;
+    class?: string;
+    style?: string;
+    actions?: ActionEntry[];
+  }
+
+  const p: LazyIconProps = $props();
+
+  const iconName = $derived(p.name ?? null);
+
+  // Resolución lazy — solo dynamic import(), nunca el registry estático
+  let _comp = $state<Component | null>(null);
+  let _loading = $state(false);
+  let _currentName = $state<string | null>(null);
+
+  $effect(() => {
+    const name = iconName;
+
+    if (!name) {
+      _comp = null;
+      _currentName = null;
+      _loading = false;
+      return;
+    }
+
+    if (_currentName === name && _comp) return;
+
+    // Caché en memoria de iconos ya cargados en esta sesión → render síncrono
+    const cached = getLoadedIcon(name);
+    if (cached) {
+      _comp = cached;
+      _currentName = name;
+      _loading = false;
+      return;
+    }
+
+    // Dynamic import — el bundler genera un chunk separado por ícono
+    _loading = true;
+    _currentName = name;
+    loadIcon(name).then((comp) => {
+      if (_currentName === name) {
+        _comp = comp;
+        _loading = false;
+      }
+    });
+  });
+
+  // PascalCase alias requerido por Svelte para usar como tag de componente
+  const Comp = $derived(_comp);
+
+  const baseProps = $derived(getPresetVariantMerge(p.preset, p.variant));
+
+  function toMs(v: unknown): string | undefined {
+    if (v == null) return undefined;
+    return typeof v === "number" ? `${v}ms` : String(v);
+  }
+
+  const child = $derived.by((): IconProps => {
+    const {
+      class: _cls,
+      style: _sty,
+      actions: _act,
+      preset: _pre,
+      variant: _var,
+      name: _nm,
+      ...userProps
+    } = p;
+
+    const stable = arePropsStable(userProps as Record<string, unknown>);
+
+    if (stable) {
+      const key = buildStructuralKey(userProps as Record<string, unknown>);
+      const cached = getCachedMergedProps(key);
+      if (cached) return cached;
+
+      const merged: any = { ...baseProps, ...userProps };
+      if (merged.animationDuration !== undefined)
+        merged.animationDuration = toMs(merged.animationDuration);
+      if (merged.animationDelay !== undefined)
+        merged.animationDelay = toMs(merged.animationDelay);
+
+      const result = Object.freeze(merged) as unknown as IconProps;
+      setCachedMergedProps(key, result as Readonly<IconProps>);
+      return result;
+    }
+
+    const merged: any = { ...baseProps, ...userProps };
+    if (merged.animationDuration !== undefined)
+      merged.animationDuration = toMs(merged.animationDuration);
+    if (merged.animationDelay !== undefined)
+      merged.animationDelay = toMs(merged.animationDelay);
+    return merged as IconProps;
+  });
+
+  const boxSize = $derived.by(() => {
+    const rawSize = (p as any).size ?? (baseProps as any).size;
+    return toSizePx(coerceSize(rawSize, 24));
+  });
+
+  const hostClass = $derived(
+    p.class ? `bz-icon-wrapper ${p.class}` : "bz-icon-wrapper",
+  );
+
+  const hostStyle = $derived.by(() => {
+    const sz = boxSize;
+    const base = `--bz-icon-size:${sz};width:${sz};height:${sz};inline-size:${sz};block-size:${sz};`;
+    return p.style ? base + p.style : base;
+  });
+
+  let mountKey = $state(0);
+  function onLazyMount() {
+    mountKey++;
+  }
+
+  function applyActions(node: HTMLElement, entries: ActionEntry[] = []) {
+    if (!entries?.length) return { update() {}, destroy() {} };
+
+    let prevEntries: ActionEntry[] = entries;
+    let handles = entries
+      .map(([fn, params]) => fn?.(node, params))
+      .filter(Boolean);
+
+    return {
+      update(next: ActionEntry[] = []) {
+        if (!next?.length) {
+          handles.forEach((h) => h?.destroy?.());
+          handles = [];
+          prevEntries = [];
+          return;
+        }
+        if (next.length === prevEntries.length) {
+          let sameFns = true;
+          for (let i = 0; i < next.length; i++) {
+            if (next[i][0] !== prevEntries[i][0]) {
+              sameFns = false;
+              break;
+            }
+          }
+          if (sameFns) {
+            handles.forEach((h, i) => h?.update?.(next[i][1]));
+            prevEntries = next;
+            return;
+          }
+        }
+        handles.forEach((h) => h?.destroy?.());
+        prevEntries = next;
+        handles = next
+          .map(([fn, params]) => fn?.(node, params))
+          .filter(Boolean);
+      },
+      destroy() {
+        handles.forEach((h) => h?.destroy?.());
+        handles = [];
+        prevEntries = [];
+      },
+    };
+  }
+</script>
+
+{#if Comp}
+  <span
+    class={hostClass}
+    style={p.tooltipDelay != null
+      ? `${hostStyle};--bz-tooltip-delay:${p.tooltipDelay}ms`
+      : hostStyle}
+    data-bz-tooltip={p.tooltip || undefined}
+    use:applyActions={p.actions ?? []}
+    onlazyMount={onLazyMount}
+  >
+    {#key mountKey}
+      <Comp {...child as any} />
+    {/key}
+  </span>
+{:else if _loading}
+  <span class="bz-icon-skeleton" aria-hidden="true"></span>
+{:else if iconName}
+  <span class="bz-icon-error" data-icon={iconName}
+    >⚠️ Icon not found: {iconName}</span
+  >
+{:else}
+  <span class="bz-icon-skeleton" aria-hidden="true"></span>
+{/if}
+
+<style>
+  .bz-icon-wrapper {
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    pointer-events: auto;
+    contain: layout style;
+    content-visibility: auto;
+  }
+
+  .bz-icon-wrapper[data-bz-tooltip]::before,
+  .bz-icon-wrapper[data-bz-tooltip]::after {
+    position: absolute;
+    bottom: calc(100% + 8px);
+    left: 50%;
+    transform: translateX(-50%);
+    pointer-events: none;
+    opacity: 0;
+    transition:
+      opacity 0.15s ease var(--bz-tooltip-delay, 0ms),
+      transform 0.15s ease var(--bz-tooltip-delay, 0ms);
+    z-index: 9999;
+  }
+
+  .bz-icon-wrapper[data-bz-tooltip]::after {
+    content: attr(data-bz-tooltip);
+    background: var(--bz-tooltip-bg, #1a1a1a);
+    color: var(--bz-tooltip-color, #fff);
+    font-size: 11px;
+    font-weight: 500;
+    line-height: 1.4;
+    padding: 5px 9px;
+    border-radius: 6px;
+    white-space: nowrap;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
+    transform: translateX(-50%) translateY(3px);
+  }
+
+  .bz-icon-wrapper[data-bz-tooltip]::before {
+    content: "";
+    border: 5px solid transparent;
+    border-top-color: var(--bz-tooltip-bg, #1a1a1a);
+    bottom: calc(100% + 0px);
+    transform: translateX(-50%) translateY(3px);
+  }
+
+  .bz-icon-wrapper[data-bz-tooltip]:hover::after,
+  .bz-icon-wrapper[data-bz-tooltip]:hover::before {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0);
+  }
+
+  .bz-icon-wrapper :global(svg) {
+    pointer-events: bounding-box !important;
+  }
+  .bz-icon-wrapper :global(svg *) {
+    pointer-events: none !important;
+  }
+
+  .bz-icon-skeleton {
+    width: 100%;
+    height: 100%;
+    border-radius: var(--ui-radius, 0.25rem);
+    background: color-mix(in oklab, currentColor 12%, transparent);
+    opacity: 0.5;
+  }
+
+  .bz-icon-error {
+    display: inline-block;
+    background: var(--danger-color, #ef4444);
+    color: var(--danger-foreground, #fff);
+    font-size: 0.75rem;
+    border-radius: var(--ui-radius, 0.25rem);
+    font-weight: 600;
+  }
+</style>

package/dist/IconLazy.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { Component } from "svelte";
+import type { IconName } from "./icons/registry.js";
+import { iconPresets, iconVariants } from "./presets.js";
+import type { IconProps } from "./types.js";
+type ActionFn<T = HTMLElement, P = any> = (node: T, params?: P) => void | {
+    update?: (p?: P) => void;
+    destroy?: () => void;
+};
+type ActionEntry<T = HTMLElement> = [ActionFn<T, any>, any?];
+type IconPresetName = keyof typeof iconPresets;
+type IconVariantName = keyof typeof iconVariants;
+interface LazyIconProps extends Omit<IconProps, "children"> {
+    name?: IconName;
+    preset?: IconPresetName;
+    variant?: IconVariantName;
+    class?: string;
+    style?: string;
+    actions?: ActionEntry[];
+}
+declare const IconLazy: Component<LazyIconProps, {}, "">;
+type IconLazy = ReturnType<typeof IconLazy>;
+export default IconLazy;

package/dist/icons/ArrowDown.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import IconBase from "../IconBase.svelte";
+  import type { IconProps } from "../types";
+  const props: IconProps = $props();
+</script>
+
+<IconBase
+  {...props}
+  mode="solid"
+  viewBox="0 0 24 24"
+  ariaLabel={props.ariaLabel ?? "Arrow down"}
+  title={props.title ?? ""}
+>
+  <path
+    fill="currentColor"
+    d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
+  />
+</IconBase>

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

@@ -0,0 +1,4 @@
+import type { IconProps } from "../types";
+declare const ArrowDown: import("svelte").Component<IconProps, {}, "">;
+type ArrowDown = ReturnType<typeof ArrowDown>;
+export default ArrowDown;

package/dist/icons/ArrowLeft.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import IconBase from "../IconBase.svelte";
+  import type { IconProps } from "../types";
+  const props: IconProps = $props();
+</script>
+
+<IconBase
+  {...props}
+  mode="solid"
+  viewBox="0 0 24 24"
+  ariaLabel={props.ariaLabel ?? "Arrow left"}
+  title={props.title ?? ""}
+>
+  <path
+    fill="currentColor"
+    d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
+  />
+</IconBase>

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

@@ -0,0 +1,4 @@
+import type { IconProps } from "../types";
+declare const ArrowLeft: import("svelte").Component<IconProps, {}, "">;
+type ArrowLeft = ReturnType<typeof ArrowLeft>;
+export default ArrowLeft;

package/dist/icons/ChevronLeft.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import IconBase from "../IconBase.svelte";
+  import type { IconProps } from "../types";
+  const props: IconProps = $props();
+</script>
+
+<IconBase
+  {...props}
+  mode="solid"
+  viewBox="0 0 32 32"
+  ariaLabel={props.ariaLabel ?? "Chevron left"}
+  title={props.title ?? ""}
+>
+  <path d="M10 16 20 6l1.4 1.4-8.6 8.6 8.6 8.6L20 26z" />
+</IconBase>

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

@@ -0,0 +1,4 @@
+import type { IconProps } from "../types";
+declare const ChevronLeft: import("svelte").Component<IconProps, {}, "">;
+type ChevronLeft = ReturnType<typeof ChevronLeft>;
+export default ChevronLeft;

package/dist/icons/ChevronRight.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import IconBase from "../IconBase.svelte";
+  import type { IconProps } from "../types";
+  const props: IconProps = $props();
+</script>
+
+<IconBase
+  {...props}
+  mode="solid"
+  viewBox="0 0 32 32"
+  ariaLabel={props.ariaLabel ?? "Chevron right"}
+  title={props.title ?? ""}
+>
+  <path d="M22 16 12 26l-1.4-1.4 8.6-8.6-8.6-8.6L12 6z" />
+</IconBase>

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

@@ -0,0 +1,4 @@
+import type { IconProps } from "../types";
+declare const ChevronRight: import("svelte").Component<IconProps, {}, "">;
+type ChevronRight = ReturnType<typeof ChevronRight>;
+export default ChevronRight;

package/dist/icons/ChevronUp.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import IconBase from "../IconBase.svelte";
+  import type { IconProps } from "../types";
+  const props: IconProps = $props();
+</script>
+
+<IconBase
+  {...props}
+  mode="solid"
+  viewBox="0 0 32 32"
+  ariaLabel={props.ariaLabel ?? "Chevron up"}
+  title={props.title ?? ""}
+>
+  <path d="M16 10 6 20l1.4 1.4 8.6-8.6 8.6 8.6L26 20z" />
+</IconBase>

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

@@ -0,0 +1,4 @@
+import type { IconProps } from "../types";
+declare const ChevronUp: import("svelte").Component<IconProps, {}, "">;
+type ChevronUp = ReturnType<typeof ChevronUp>;
+export default ChevronUp;

package/dist/icons/CloudUpload.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import IconBase from "../IconBase.svelte";
+  import type { IconProps } from "../types";
+  const props: IconProps = $props();
+</script>
+
+<IconBase
+  {...props}
+  mode="solid"
+  viewBox="0 0 24 24"
+  ariaLabel={props.ariaLabel ?? "Cloud upload"}
+  title={props.title ?? ""}
+>
+  <path
+    fill="currentColor"
+    d="M19.35 10.04A7.49 7.49 0 0 0 12 4C9.11 4 6.6 5.64 5.35 8.04A5.994 5.994 0 0 0 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM14 13v4h-4v-4H7l5-5 5 5h-3z"
+  />
+</IconBase>

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

@@ -0,0 +1,4 @@
+import type { IconProps } from "../types";
+declare const CloudUpload: import("svelte").Component<IconProps, {}, "">;
+type CloudUpload = ReturnType<typeof CloudUpload>;
+export default CloudUpload;

package/dist/icons/Code.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import IconBase from "../IconBase.svelte";
+  import type { IconProps } from "../types";
+  const props: IconProps = $props();
+</script>
+
+<IconBase
+  {...props}
+  mode="solid"
+  viewBox="0 0 24 24"
+  ariaLabel={props.ariaLabel ?? "Code"}
+  title={props.title ?? ""}
+>
+  <path
+    fill="currentColor"
+    d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z"
+  />
+</IconBase>

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

@@ -0,0 +1,4 @@
+import type { IconProps } from "../types";
+declare const Code: import("svelte").Component<IconProps, {}, "">;
+type Code = ReturnType<typeof Code>;
+export default Code;

package/dist/icons/ExternalLink.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import IconBase from "../IconBase.svelte";
+  import type { IconProps } from "../types";
+  const props: IconProps = $props();
+</script>
+
+<IconBase
+  {...props}
+  mode="solid"
+  viewBox="0 0 24 24"
+  ariaLabel={props.ariaLabel ?? "External link"}
+  title={props.title ?? ""}
+>
+  <path
+    fill="currentColor"
+    d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"
+  />
+</IconBase>

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

@@ -0,0 +1,4 @@
+import type { IconProps } from "../types";
+declare const ExternalLink: import("svelte").Component<IconProps, {}, "">;
+type ExternalLink = ReturnType<typeof ExternalLink>;
+export default ExternalLink;

package/dist/icons/Gift.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 ?? "Regalo"}
+  title={props.title ?? "Gift"}
+>
+  {#snippet children()}
+    <path
+      fill="currentColor"
+      d="M4 20v-9q-.825 0-1.412-.587T2 9V7q0-.825.588-1.412T4 5h3.2q-.125-.225-.162-.475T7 4q0-1.25.875-2.125T10 1q.575 0 1.075.213T12 1.8q.425-.4.925-.6T14 1q1.25 0 2.125.875T17 4q0 .275-.05.513T16.8 5H20q.825 0 1.413.588T22 7v2q0 .825-.587 1.413T20 11v9q0 .825-.587 1.413T18 22H6q-.825 0-1.412-.587T4 20m9.288-16.713Q13 3.575 13 4t.288.713T14 5t.713-.288T15 4t-.288-.712T14 3t-.712.288M9 4q0 .425.288.713T10 5t.713-.288T11 4t-.288-.712T10 3t-.712.288T9 4M4 7v2h7V7zm7 13v-9H6v9zm2 0h5v-9h-5zm7-11V7h-7v2z"
+    />
+  {/snippet}
+</IconBase>