@genarou/blazir-icons 1.2.8 → 1.2.11

package/dist/Icon.svelte

@@ -9,94 +9,233 @@
   import type { IconProps } from "./types";
   import { coerceSize } from "./utils/defaults";
 
+  // ───────────────────────────────────────────────────────────────────────────
+  // POOLS (1 IO por root scrolleable, 1 RO global)
+  // ───────────────────────────────────────────────────────────────────────────
+  type RootKey = Element | undefined;
+  type Entry = {
+    el: HTMLElement;
+    onViewportChange?: (v: boolean) => void;
+    onSizeChange?: (w: number, h: number) => void;
+  };
+
+  class IntersectionPool {
+    private pools = new Map<
+      RootKey,
+      { io: IntersectionObserver; entries: Set<Entry> }
+    >();
+
+    register(root: RootKey, entry: Entry) {
+      let pool = this.pools.get(root);
+      if (!pool) {
+        const io = new IntersectionObserver(
+          (entries) => {
+            const p = this.pools.get(root);
+            if (!p) return;
+            for (const e of entries) {
+              const tgt = e.target as HTMLElement;
+              for (const item of p.entries) {
+                if (item.el === tgt) {
+                  item.onViewportChange?.(e.isIntersecting);
+                  break;
+                }
+              }
+            }
+          },
+          { root: root as Element | undefined, rootMargin: "200px" }
+        );
+        pool = { io, entries: new Set() };
+        this.pools.set(root, pool);
+      }
+
+      pool.entries.add(entry);
+      pool.io.observe(entry.el);
+
+      return () => {
+        const p = this.pools.get(root);
+        if (!p) return;
+        p.io.unobserve(entry.el);
+        p.entries.delete(entry);
+        if (p.entries.size === 0) {
+          p.io.disconnect();
+          this.pools.delete(root);
+        }
+      };
+    }
+  }
+
+  class ResizePool {
+    private ro: ResizeObserver | null = null;
+    private entries = new Set<Entry>();
+
+    private ensure() {
+      if (this.ro || typeof ResizeObserver === "undefined") return;
+      this.ro = new ResizeObserver((ros) => {
+        for (const r of ros) {
+          const tgt = r.target as HTMLElement;
+          for (const item of this.entries) {
+            if (item.el === tgt) {
+              item.onSizeChange?.(tgt.offsetWidth, tgt.offsetHeight);
+              break;
+            }
+          }
+        }
+      });
+    }
+
+    register(entry: Entry) {
+      this.ensure();
+      this.entries.add(entry);
+      this.ro?.observe(entry.el);
+      entry.onSizeChange?.(entry.el.offsetWidth, entry.el.offsetHeight); // inicial
+      return () => {
+        this.ro?.unobserve(entry.el);
+        this.entries.delete(entry);
+        if (this.entries.size === 0) {
+          this.ro?.disconnect();
+          this.ro = null;
+        }
+      };
+    }
+  }
+
+  const IO_POOL = new IntersectionPool();
+  const RO_POOL = new ResizePool();
+
+  function getScrollRoot(el: HTMLElement | null): Element | undefined {
+    let p: HTMLElement | null = el?.parentElement ?? null;
+    while (p) {
+      const s = getComputedStyle(p);
+      if (/(auto|scroll)/.test(`${s.overflow}${s.overflowX}${s.overflowY}`))
+        return p;
+      p = p.parentElement;
+    }
+    return undefined;
+  }
+
+  // ───────────────────────────────────────────────────────────────────────────
+  // PROPS
+  // ───────────────────────────────────────────────────────────────────────────
   interface DynamicIconProps extends Omit<IconProps, "children"> {
     name: IconName;
     preset?: IconPreset;
     variant?: IconVariant;
+    skeleton?: boolean;
   }
 
   const props: DynamicIconProps = $props();
+  const inputProps = $derived(() => ({ skeleton: false, ...props }));
 
-  let internalHovered = $state(false);
-  const isHovered = $derived(
-    internalHovered || (props.parentHoverContext?.hovered ?? false)
-  );
-
-  const Comp = $derived.by(() => iconRegistry[props.name]);
-
-  // Preset y variant (opcionales)
+  const Comp = $derived.by(() => iconRegistry[inputProps().name]);
   const presetProps = $derived(() =>
-    props.preset ? iconPresets[props.preset] : {}
+    inputProps().preset ? iconPresets[inputProps().preset!] : {}
   );
   const variantProps = $derived(() =>
-    props.variant ? iconVariants[props.variant] : {}
+    inputProps().variant ? iconVariants[inputProps().variant!] : {}
   );
+  const mergedProps = $derived(() => ({
+    ...presetProps(),
+    ...variantProps(),
+    ...inputProps(),
+  }));
 
-  // Merge: preset < variant < props explícitas
-  const mergedProps = $derived({ ...presetProps, ...variantProps, ...props });
-
-  // Color efectivo con fallback
-  const effectiveColor = $derived(() => {
-    const baseColor = mergedProps.color || "currentColor";
-    if (isHovered && mergedProps.hoverColor) return mergedProps.hoverColor;
-    return baseColor;
-  });
+  // 🔹 No pasar `skeleton` al hijo
+  const childProps = $derived(() => {
+    const { skeleton, animationDuration, animationDelay, ...rest } =
+      mergedProps();
 
-  // Normalizar durations (string ms)
-  const normalizeAnimationValue = (
-    value?: number | string
-  ): string | undefined =>
-    value === undefined
-      ? undefined
-      : typeof value === "number"
-        ? `${value}ms`
-        : value;
-
-  // Props finales para el Icono concreto
-  const iconProps = $derived(() => {
-    const {
-      name,
-      preset,
-      variant,
-      size,
-      color,
-      hoverColor,
-      activeColor,
-      parentHoverContext,
-      animationDuration,
-      animationDelay,
-      ...rest
-    } = mergedProps;
+    const toMsString = (v?: string | number) =>
+      v === undefined ? undefined : typeof v === "number" ? `${v}ms` : v;
 
     return {
       ...rest,
-      size: coerceSize(size, 24),
-      color: effectiveColor(),
-      animationDuration: normalizeAnimationValue(animationDuration),
-      animationDelay: normalizeAnimationValue(animationDelay),
+      animationDuration: toMsString(animationDuration),
+      animationDelay: toMsString(animationDelay),
     };
   });
 
-  function handleMouseEnter() {
-    internalHovered = true;
-  }
-  function handleMouseLeave() {
-    internalHovered = false;
+  const boxSize = $derived(() => {
+    const s = coerceSize(mergedProps().size, 24);
+    return typeof s === "number" ? `${s}px` : s;
+  });
+
+  // ───────────────────────────────────────────────────────────────────────────
+  // Lazy-mount con pooling
+  // ───────────────────────────────────────────────────────────────────────────
+  let hostEl: HTMLElement | null = $state(null);
+  let isVisible = $state(false);
+  let inViewport = false,
+    hasSize = false;
+  let unregIO: (() => void) | null = null,
+    unregRO: (() => void) | null = null;
+
+  function tryMount() {
+    if (!isVisible && inViewport && hasSize) {
+      isVisible = true;
+      unregIO?.();
+      unregIO = null;
+      unregRO?.();
+      unregRO = null;
+    }
   }
+
+  $effect(() => {
+    if (
+      typeof window === "undefined" ||
+      typeof IntersectionObserver === "undefined"
+    ) {
+      isVisible = true;
+      return;
+    }
+    if (!hostEl || isVisible) return;
+
+    const root = getScrollRoot(hostEl) ?? undefined;
+    unregIO = IO_POOL.register(root, {
+      el: hostEl,
+      onViewportChange: (v) => {
+        inViewport = v;
+        tryMount();
+      },
+    });
+
+    if (typeof ResizeObserver !== "undefined") {
+      unregRO = RO_POOL.register({
+        el: hostEl,
+        onSizeChange: (w, h) => {
+          hasSize = w > 0 && h > 0;
+          tryMount();
+        },
+      });
+    } else {
+      hasSize = hostEl.offsetWidth > 0 && hostEl.offsetHeight > 0;
+      tryMount();
+    }
+
+    return () => {
+      unregIO?.();
+      unregIO = null;
+      unregRO?.();
+      unregRO = null;
+    };
+  });
 </script>
 
 {#if Comp}
   <span
+    bind:this={hostEl}
     class="bz-icon-wrapper"
-    role="presentation"
-    onmouseenter={handleMouseEnter}
-    onmouseleave={handleMouseLeave}
+    style={`inline-size:${boxSize};block-size:${boxSize};`}
+    data-mounted={isVisible ? "true" : "false"}
   >
-    <Comp {...iconProps()} />
+    {#if isVisible}
+      <Comp {...childProps()} />
+    {:else if mergedProps().skeleton}
+      <span class="bz-icon-skeleton" aria-hidden="true"></span>
+    {/if}
   </span>
 {:else}
-  <span class="bz-icon-error" data-icon={props.name}>
-    ⚠️ Icon not found: {props.name}
+  <span class="bz-icon-error" data-icon={inputProps().name}>
+    ⚠️ Icon not found: {inputProps().name}
   </span>
 {/if}
 
@@ -107,12 +246,19 @@
     justify-content: center;
     line-height: 1;
   }
+  .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;
     width: 1em;
     height: 1em;
     background: var(--danger-color, #ef4444);
-    color: var(--danger-foreground, white);
+    color: var(--danger-foreground, #fff);
     text-align: center;
     line-height: 1;
     font-size: 0.75rem;

package/dist/Icon.svelte.d.ts

@@ -5,6 +5,7 @@ interface DynamicIconProps extends Omit<IconProps, "children"> {
     name: IconName;
     preset?: IconPreset;
     variant?: IconVariant;
+    skeleton?: boolean;
 }
 declare const Icon: import("svelte").Component<DynamicIconProps, {}, "">;
 type Icon = ReturnType<typeof Icon>;

package/dist/IconBase.svelte

@@ -1,4 +1,3 @@
-<!-- src/lib/IconBase.svelte -->
 <script lang="ts">
   import { type IconEffectOptions, iconEffects } from "./effects.js";
   import type { IconMode, IconProps } from "./types.js";
@@ -13,16 +12,9 @@
     normalizeClass,
   } from "./utils/defaults.js";
 
-  // ───────────────────────────────────────────────────────────────────────────
-  // Helpers
-  // ───────────────────────────────────────────────────────────────────────────
-  function uid(): string {
-    return Math.random().toString(36).slice(2);
-  }
-
-  // Normaliza duración en ms: acepta number, '200ms' o '0.2s'
   const DEFAULT_MS = 180;
   const DEFAULT_EASING = "cubic-bezier(.2,.8,.2,1)";
+
   function normalizeMs(v?: number | string): number {
     if (v == null) return DEFAULT_MS;
     if (typeof v === "number") return v;
@@ -33,42 +25,31 @@
     return Number.isFinite(n) ? n : DEFAULT_MS;
   }
 
-  // ───────────────────────────────────────────────────────────────────────────
-  // Props
-  // ───────────────────────────────────────────────────────────────────────────
-  const props: IconProps & { mode?: IconMode } = $props();
+  function uid(): string {
+    return Math.random().toString(36).slice(2);
+  }
 
-  // ── Interacción ────────────────────────────────────────────────────────────
+  const props: IconProps & { mode?: IconMode } = $props();
   let internalHovered = $state(false);
   const isHovered = $derived(
     internalHovered || (props.parentHoverContext?.hovered ?? false)
   );
 
-  // ── Color por defecto dark-first con fallbacks ─────────────────────────────
-  // 1) --icon-fg        (si existe)
-  // 2) --ui-muted-fg    (definido distinto en claro/oscuro)
-  // 3) currentColor     (último fallback)
   const DEFAULT_ICON_COLOR = "var(--icon-fg, var(--ui-muted-fg, currentColor))";
-
   const effectiveColor = $derived(
     (isHovered && props.hoverColor ? props.hoverColor : props.color) ??
       DEFAULT_ICON_COLOR
   );
 
-  // ── Modo / clases / defaults compartidos ───────────────────────────────────
   const mode = $derived(props.mode ?? "solid");
   const klass = $derived(normalizeClass(props));
   const common = $derived(commonDefaults(props));
 
-  // Pasar color efectivo al pipeline visual
   const propsWithEffectiveColor = $derived({ ...props, color: effectiveColor });
   const visual = $derived(modeDefaults(mode, propsWithEffectiveColor));
-
-  // ── Animaciones (clases + timing inline) ───────────────────────────────────
   const animationClasses = $derived(getAnimationClasses(props).join(" "));
   const timingStyle = $derived(getAnimationStyle(props));
 
-  // ── Transform sólo via CSS (no colisionar con transform del <g>) ──────────
   const cssTransformOnly = $derived(
     combineTransforms({
       ...props,
@@ -78,7 +59,6 @@
     })
   );
 
-  // ── Duración de spin como custom prop ──────────────────────────────────────
   const spinDuration = $derived(
     props.spin
       ? props.spin === true
@@ -89,7 +69,6 @@
       : null
   );
 
-  // ── Transición global (color/fill/stroke/transform/opacity) ───────────────
   const hoverMs = $derived(
     normalizeMs(props.transitionMs ?? props.animationDuration)
   );
@@ -97,29 +76,22 @@
     props.transitionEasing ?? props.animationEasing ?? DEFAULT_EASING
   );
 
-  // ── style final (string) ───────────────────────────────────────────────────
   const style = $derived(() => {
     const parts: string[] = [];
     if (props.style)
       parts.push(props.style.endsWith(";") ? props.style : `${props.style};`);
-    if (cssTransformOnly) parts.push(`transform: ${cssTransformOnly};`);
-    parts.push("transform-origin: center;");
-    if (spinDuration) parts.push(`--bz-spin: ${spinDuration};`);
+    if (cssTransformOnly) parts.push(`transform:${cssTransformOnly};`);
+    parts.push("transform-origin:center;");
+    if (spinDuration) parts.push(`--bz-spin:${spinDuration};`);
     if (timingStyle) parts.push(timingStyle);
-    // Color base controlado por CSS var → permite hover suave
-    if (effectiveColor) parts.push(`color: ${effectiveColor};`);
-    // Transición universal y suave
+    if (effectiveColor) parts.push(`color:${effectiveColor};`);
     parts.push(
-      `transition: color ${hoverMs}ms ${hoverEase},` +
-        ` fill ${hoverMs}ms ${hoverEase},` +
-        ` stroke ${hoverMs}ms ${hoverEase},` +
-        ` transform ${hoverMs}ms ${hoverEase},` +
-        ` opacity ${hoverMs}ms ${hoverEase};`
+      `transition:color ${hoverMs}ms ${hoverEase},fill ${hoverMs}ms ${hoverEase},` +
+        `stroke ${hoverMs}ms ${hoverEase},transform ${hoverMs}ms ${hoverEase},opacity ${hoverMs}ms ${hoverEase};`
     );
     return parts.join(" ");
   });
 
-  // ── A11y ───────────────────────────────────────────────────────────────────
   const ariaHidden = $derived(props.decorative ? "true" : undefined);
   const computedTitleId = $derived(
     props.title ? (props.titleId ?? `bz-icon-title-${uid()}`) : undefined
@@ -131,12 +103,9 @@
     !props.decorative && props.title ? computedTitleId : undefined
   );
 
-  // ── Tamaño final ───────────────────────────────────────────────────────────
   const finalSize = $derived(
     typeof common.size === "number" ? `${common.size}px` : common.size
   );
-
-  // ── Attrs seguros (no permitir width/height externos) ──────────────────────
   const safeAttrs = $derived(() => {
     const a = { ...(props.attrs ?? {}) };
     delete (a as any).width;
@@ -144,21 +113,15 @@
     return a;
   });
 
-  // ── Clase final ────────────────────────────────────────────────────────────
   const finalClass = $derived(
-    `${klass} ${animationClasses} ${props.chevronState ? "bz-icon-chevron" : ""}`.trim()
+    `bz-icon ${klass} ${animationClasses} ${props.chevronState ? "bz-icon-chevron" : ""}`.trim()
   );
 
-  // ── Centro del viewBox para rot/flip exactos en SVG ────────────────────────
   function getViewBoxCenter(vb: string) {
-    const parts = vb.trim().split(/\s+/).map(Number);
-    const [minX, minY, w, h] = parts.length === 4 ? parts : [0, 0, 24, 24];
+    const [minX, minY, w, h] = vb.trim().split(/\s+/).map(Number);
     return { cx: minX + w / 2, cy: minY + h / 2 };
   }
   const center = $derived(getViewBoxCenter(common.viewBox));
-  const cx = $derived(center.cx);
-  const cy = $derived(center.cy);
-
   const svgTransform = $derived(() => {
     const cmds: string[] = [];
     if (props.rotate != null) {
@@ -166,32 +129,21 @@
         typeof props.rotate === "number"
           ? props.rotate
           : parseFloat(String(props.rotate));
-      if (!isNaN(r)) cmds.push(`rotate(${r} ${cx} ${cy})`);
+      if (!isNaN(r)) cmds.push(`rotate(${r} ${center.cx} ${center.cy})`);
     }
     if (props.flipH || props.flipV) {
-      const sx = props.flipH ? -1 : 1;
-      const sy = props.flipV ? -1 : 1;
+      const sx = props.flipH ? -1 : 1,
+        sy = props.flipV ? -1 : 1;
       cmds.push(
-        `translate(${cx} ${cy}) scale(${sx} ${sy}) translate(${-cx} ${-cy})`
+        `translate(${center.cx} ${center.cy}) scale(${sx} ${sy}) translate(${-center.cx} ${-center.cy})`
       );
     }
     return cmds.join(" ");
   });
 
-  // ── Hover handlers ─────────────────────────────────────────────────────────
-  function handleMouseEnter() {
-    internalHovered = true;
-  }
-  function handleMouseLeave() {
-    internalHovered = false;
-  }
-
-  // ── Efectos declarativos (props.effects > attrs.* retrocompat) ─────────────
   let svgRef: SVGSVGElement | null = $state(null);
-
   $effect(() => {
     if (!svgRef) return;
-
     const effectsOpts: IconEffectOptions = { ...(props.effects ?? {}) };
     const a = props.attrs ?? {};
     if (a.spinOnHover) effectsOpts.spinOnHover = true;
@@ -203,13 +155,18 @@
     if (a.heartbeatOnActive) effectsOpts.heartbeatOnActive = true;
     if (a.hoverScale) effectsOpts.hoverScale = a.hoverScale;
     if (a.pressScale) effectsOpts.pressScale = a.pressScale;
-
-    // Importante: IconBase ya define transition en style(); iconEffects no la pisa.
     if (Object.keys(effectsOpts).length > 0) {
       const controller = iconEffects(svgRef, effectsOpts);
       return () => controller.destroy();
     }
   });
+
+  function handleMouseEnter() {
+    internalHovered = true;
+  }
+  function handleMouseLeave() {
+    internalHovered = false;
+  }
 </script>
 
 <svg
@@ -242,3 +199,22 @@
     {@render props.children?.()}
   </g>
 </svg>
+
+<style>
+  @media (prefers-reduced-motion: no-preference) {
+    .bz-icon {
+      animation: bzIconIn 0.18s cubic-bezier(0.2, 0.8, 0.2, 1) both;
+      will-change: opacity, transform;
+    }
+    @keyframes bzIconIn {
+      from {
+        opacity: 0;
+        transform: translateY(2px) scale(0.985);
+      }
+      to {
+        opacity: 1;
+        transform: none;
+      }
+    }
+  }
+</style>

package/dist/icons/Ai.svelte

@@ -1,28 +1,18 @@
-<!-- src/lib/icons/GearSpark.svelte -->
 <script lang="ts">
   import IconBase from "../IconBase.svelte";
   import type { IconProps } from "../types";
 
   const props: IconProps = $props();
-  const ariaLabel = props.ariaLabel ?? "Gear Spark";
-  const title = props.title ?? "";
 </script>
 
 <IconBase
   {...props}
-  mode={props.mode ?? "solid"}
+  mode="solid"
   viewBox="0 0 24 24"
-  {ariaLabel}
-  {title}
+  ariaLabel={props.ariaLabel ?? "File settings icon"}
+  title={props.title ?? ""}
 >
-  <!-- IconBase maneja color, hover, animaciones y transición -->
-  <g fill="none">
-    <path
-      d="m12.594 23.258l-.012.002l-.071.035l-.02.004l-.014-.004l-.071-.036q-.016-.004-.024.006l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.016-.018m.264-.113l-.014.002l-.184.093l-.01.01l-.003.011l.018.43l.005.012l.008.008l.201.092q.019.005.029-.008l.004-.014l-.034-.614q-.005-.019-.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.003-.011l.018-.43l-.003-.012l-.01-.01z"
-    />
-    <path
-      fill="currentColor"
-      d="M9.107 5.448c.598-1.75 3.016-1.803 3.725-.159l.06.16l.807 2.36a4 4 0 0 0 2.276 2.411l.217.081l2.36.806c1.75.598 1.803 3.016.16 3.725l-.16.06l-2.36.807a4 4 0 0 0-2.412 2.276l-.081.216l-.806 2.361c-.598 1.75-3.016 1.803-3.724.16l-.062-.16l-.806-2.36a4 4 0 0 0-2.276-2.412l-.216-.081l-2.36-.806c-1.751-.598-1.804-3.016-.16-3.724l.16-.062l2.36-.806A4 4 0 0 0 8.22 8.025l.081-.216zM19 2a1 1 0 0 1 .898.56l.048.117l.35 1.026l1.027.35a1 1 0 0 1 .118 1.845l-.118.048l-1.026.35l-.35 1.027a1 1 0 0 1-1.845.117l-.048-.117l-.35-1.026l-1.027-.35a1 1 0 0 1-.118-1.845l.118-.048l1.026-.35l.35-1.027A1 1 0 0 1 19 2"
-    />
-  </g>
+  <path
+    d="m20.467 8.694l.246-.566a4.36 4.36 0 0 1 2.22-2.25l.759-.339a.53.53 0 0 0 0-.963l-.717-.319a4.37 4.37 0 0 1-2.251-2.326l-.253-.611a.506.506 0 0 0-.942 0l-.253.61a4.37 4.37 0 0 1-2.25 2.327l-.718.32a.53.53 0 0 0 0 .962l.76.338a4.36 4.36 0 0 1 2.219 2.251l.246.566c.18.414.753.414.934 0M5.8 16h2.154l.6-1.5h2.892l.6 1.5H14.2L11 8H9zm4.2-5.115l.646 1.615H9.354zM15 16V8h2v8zM3 3a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1v-9h-2v8H4V5h10V3z"
+  />
 </IconBase>

package/dist/icons/Chat.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 ?? "Chat bubble icon"}
+  title={props.title ?? ""}
+>
+  <path
+    d="M9 22a1 1 0 0 1-1-1v-3H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-6.1l-3.7 3.71c-.2.19-.45.29-.7.29zm8-11V9h-2v2zm-4 0V9h-2v2zm-4 0V9H7v2z"
+  />
+</IconBase>

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

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

package/dist/icons/Contact.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 ?? "Control panel icon"}
+  title={props.title ?? ""}
+>
+  <path
+    d="M4 2a1 1 0 0 0-1 1v2h2V4h14v16H5v-1H3v2a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1zm5 14a3 3 0 1 1 6 0zm3-4a2 2 0 1 1 0-4a2 2 0 0 1 0 4M6 9V7H2v2zm0 2v2H2v-2zm0 6v-2H2v2z"
+  />
+</IconBase>

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

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

package/dist/icons/Dashboard.svelte

@@ -1,23 +1,18 @@
-<!-- src/lib/icons/TableChart.svelte -->
 <script lang="ts">
   import IconBase from "../IconBase.svelte";
   import type { IconProps } from "../types";
+
   const props: IconProps = $props();
 </script>
 
 <IconBase
   {...props}
-  mode="outline"
+  mode="solid"
   viewBox="0 0 24 24"
-  ariaLabel={props.ariaLabel ?? "Table chart"}
+  ariaLabel={props.ariaLabel ?? "Grid view icon"}
   title={props.title ?? ""}
-  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"
   />
 </IconBase>