API
Toda la superficie pública, en dos entry points. Esta página se pinta desde la misma lista que un test compara contra los exports reales del paquete — si documentara algo que ya no existe, el test falla.
<gf-icon>
| Input | Tipo | Default | |
|---|---|---|---|
iconDef | AnimatedIconDef | — | La vía tree-shakeable. Gana sobre name. |
name | string | '' | Requiere provideIconCatalog. Desconocido = no pinta, no truena. |
animation | string | 'default' | Qué variante reproducir. |
trigger | AnimatedIconTrigger | 'group' | Cuándo se anima. |
size | number | string | 24 | Lado del SVG. |
strokeWidth | number | string | 2 | Grosor del trazo. |
loop | boolean | false | Con easings de un tiro se nota el corte entre vueltas. |
delay | number | 0 | Retraso extra (ms), ADICIONAL al de cada track. |
viewOnce | boolean | true | Solo con trigger="view". |
decorative | boolean | true | Ver Accesibilidad: manda el label. |
label | string | — | Con label el icono es semántico. |
respectReducedMotion | boolean | true | Se queda estático si el sistema lo pide. |
Métodos públicos de la instancia del componente. Son lo que necesitas con trigger="manual":
play(variante?)— reproduce una variante; sin argumento, la del inputanimation.reverse()— regresa a la pose inicial animando, no de golpe. Solo los tracks: reversar unautoDrawlo DESdibuja, que no es lo que nadie pidió al sacar el puntero.cancel()— corta todo y devuelve las figuras a su pose original.
<gf-icon-morph>
| Input | Tipo | Default | |
|---|---|---|---|
icon | MorphIcon | — | El binding ES el estado. El primer valor se pinta estático. |
size | number | string | 24 | Lado del SVG. |
strokeWidth | number | string | 2 | Grosor del trazo. |
decorative | boolean | true | Mismo contrato que <gf-icon>. |
label | string | — | Con label el icono es semántico. |
respectReducedMotion | boolean | true | Aquí SALTA al destino en vez de quedarse quieto. |
spring | SpringPreset | SpringConfig | 'smooth' | smooth / snappy / bouncy, o un { k, c } propio. Solo decide el tiempo, nunca la geometría. |
live | boolean | false | Horneado (WAAPI, default) vs en vivo (resorte real por requestAnimationFrame). Fijo desde el primer uso — cambiarlo después no tiene efecto. |
Exports de glyphflow
| Símbolo | Qué es | |
|---|---|---|
GfIconComponent | componente | El motor. Selector <gf-icon>. Standalone. |
provideGfIcons | función | Config global opcional. Hoy solo durationScale. |
GF_ICONS_CONFIG | token | El InjectionToken detrás de provideGfIcons, por si lo quieres proveer tú. |
provideIconCatalog | función | Registra el catálogo para poder usar name=. Opt-in: sin esto, name= no pinta. |
GF_ICON_CATALOG | token | El token del catálogo. Sin él, un name desconocido se pinta vacío, sin tronar. |
CURATED_ICONS | constante | Los 1767 con coreografía a mano. |
GENERATED_ICONS | constante | Los 0 restantes de Lucide, solo con trazo automático. |
ANIMATED_ICONS | constante | Curados + generados. Referenciarlo ancla el catálogo completo en tu bundle. |
ANIMATED_ICON_NAMES | constante | Las claves del catálogo. Mismo costo de bundle que ANIMATED_ICONS. |
ICON_ALIASES | constante | Renombramientos reales de Lucide (mismo glifo, nombre nuevo). |
resolveIconName | función | Aplica los alias: nombre viejo → nombre actual. |
ICON_META | constante | Metadatos por icono: si es curado, su origen y sus tags de búsqueda. |
ICON_TAGS | constante | Los sinónimos de búsqueda de Lucide por icono, sin la geometría. |
ICON_VARIANTS | constante | Qué variantes de animación trae cada icono, sin la geometría. Siempre empieza con draw. |
SPRING_SMOOTH | constante | ζ=1.00, crítico, sin sobrepaso. El default de la casa para ir de A a B. |
SPRING_SNAPPY | constante | ζ=0.73, rápido con sobrepaso sutil. |
SPRING_BOUNCY | constante | ζ=0.40, un rebote de verdad. |
MaxIconComponentobsoleto | componente | El motor. Selector <gf-icon>. Standalone. Usa GfIconComponent en su lugar. |
provideMaxIconsobsoleto | función | Config global opcional. Hoy solo durationScale. Usa provideGfIcons en su lugar. |
MAX_ICONS_CONFIGobsoleto | token | El InjectionToken detrás de provideGfIcons, por si lo quieres proveer tú. Usa GF_ICONS_CONFIG en su lugar. |
MAX_ICON_CATALOGobsoleto | token | El token del catálogo. Sin él, un name desconocido se pinta vacío, sin tronar. Usa GF_ICON_CATALOG en su lugar. |
Tipos
| Tipo | |
|---|---|
AnimatedIconDef | Un icono: geometría + sus variantes de animación. |
IconShape | Una figura del SVG (path, circle, line…). |
IconChoreography | Una variante: tracks por figura + autoDraw + reverseOnLeave. |
MotionTrack | Keyframes + opciones WAAPI para una figura. |
AutoDraw | Config del trazo automático (velocidad, traslape, topes). |
AnimatedIconTrigger | 'group' | 'hover' | 'tap' | 'view' | 'auto' | 'manual'. |
GfIconsConfig | Lo que recibe provideGfIcons. |
IconMeta | Los metadatos de un icono del catálogo. `tags` viene siempre poblado. |
Exports de glyphflow/morph
| Símbolo | Qué es | |
|---|---|---|
GfIconMorphComponent | componente | Selector <gf-icon-morph>. Cambiar [icon] dispara la transición. |
MaxIconMorphComponentobsoleto | componente | Selector <gf-icon-morph>. Cambiar [icon] dispara la transición. Usa GfIconMorphComponent en su lugar. |
morphKeyframes | función | Calcula los keyframes discretos de `d` entre dos iconos. No anima nada. |
runMorph | función | morphKeyframes + element.animate(). Devuelve la Animation para que la controles. |
canonicalD | función | El `d` de un icono ya resuelto — lo que se pinta cuando no hay transición. |
morphAt | función | La pose exacta del morph en cualquier t (0-1), sin animar — para scrubbers y control manual. |
createLiveMorph | función | El motor en vivo: un resorte movido por requestAnimationFrame, en vez de keyframes precalculados de WAAPI. |
SPRING_PRESETS | constante | smooth (ζ=1.00), snappy (ζ=0.73) y bouncy (ζ=0.40). Los dos últimos rebotan de verdad. |
STEPS_DEFAULT | constante | 20 poses discretas. Decidido en el Lab comparando 10/15/20/30. |
RESOLUTION_DEFAULT | constante | 64 puntos por subpath. |
SPRING_TAIL_DEFAULT | constante | Qué hacer con la cola asintótica del resorte. |
correspondenceIsPoor | función | `true` cuando ningún algoritmo de correspondencia salvaría el par — el motor funde en vez de deformar. |
QUALITY_RESIDUAL_MAX | constante | Umbral de residuo de Procrustes por encima del cual la correspondencia se considera mala. |
QUALITY_FRAGMENTATION_MAX | constante | Umbral de fragmentación de subpaths por encima del cual la correspondencia se considera mala. |
maxLinearDeviation | función | Cuánto se aleja la interpolación lineal de WAAPI entre las poses horneadas de la trayectoria polar real. |
COPY_INTENT | constante | Copiar al portapapeles: copy pasa a check, con snappy, y vuelve solo al reposo a los 2 s. |
THEME_INTENT | constante | Claro a oscuro: sun pasa a moon, con smooth — es un cambio de ambiente, no una confirmación. |
PASSWORD_INTENT | constante | Enseñar u ocultar una contraseña: eye pasa a eye-off. Activo significa que está a la vista. |
PLAY_PAUSE_INTENT | constante | Transporte de reproducción: play pasa a pause. Activo significa que suena, así que el botón ofrece pausar. |
MENU_CLOSE_INTENT | constante | Menú de navegación: menu pasa a x. Activo significa abierto, así que el botón ofrece cerrar. |
EXPAND_COLLAPSE_INTENT | constante | Desplegar y plegar: la punta del chevron gira. Activo significa desplegado, así que mira arriba. |
LIKE_INTENT | constante | Quitar de "me gusta": heart pasa a heart-off (partido por una raya, no relleno). Activo significa que ya se quitó. |
FAVORITE_INTENT | constante | Favorito: star pasa a star-off, fragmentada por la misma raya. Activo significa que ya no es favorito. |
NOTIFY_INTENT | constante | Notificaciones: bell pasa a bell-off. Activo significa silenciadas. |
PIN_INTENT | constante | Fijar un elemento: mapPin pasa a mapPin-off. Activo significa que ya no está fijado. |
VOLUME_INTENT | constante | Sonido: volume2 (dos ondas) pasa a volume-off. Activo significa silenciado — la única de las seis cuyo par curado se amplió (volumeOff↔volume2 no existía, solo volumeOff↔volume sin ondas). |
PASOS_DEFAULTobsoleto | constante | 20 poses discretas. Decidido en el Lab comparando 10/15/20/30. Usa STEPS_DEFAULT en su lugar. |
RESOLUCION_DEFAULTobsoleto | constante | 64 puntos por subpath. Usa RESOLUTION_DEFAULT en su lugar. |
COLA_DEFAULTobsoleto | constante | Qué hacer con la cola asintótica del resorte. Usa SPRING_TAIL_DEFAULT en su lugar. |
Tipos
| Tipo | |
|---|---|
MorphIcon | Lo que acepta [icon]: un AnimatedIconDef o su geometría. |
MorphKeyframes | La salida de morphKeyframes: keyframes, duración, peso. |
MorphKeyframesOpts | Pasos, resolución, cola, resorte, sobrepaso. |
RunMorphOpts | Lo anterior + loop, dirección y durationScale. |
SpringConfig | Resorte crudo: rigidez y amortiguamiento. |
SpringPreset | Los nombres de SPRING_PRESETS: 'smooth' | 'snappy' | 'bouncy'. |
LiveMorph | El manejador de createLiveMorph: morphTo, set, destroy. |
LiveMorphOpts | spring y durationScale, mismo vocabulario que el motor horneado. |
MorphIntent | Un gesto de dos estados con su carácter ya decidido: el par de figuras, su resorte y si el estado activo caduca. |
GfAsyncState | Los cuatro momentos de una operación asíncrona: idle, loading, success, error. |
Los iconos
Además de lo anterior, glyphflow exporta un const por icono con sufijo Icon — bellIcon, trash2Icon, circleCheckIcon. Esos son la ruta tree-shakeable, y por eso no se listan uno por uno: son ~1767 y el catálogo navegable está en la página de iconos.
El nombre del const es el del icono en camelCase más Icon: trash-2 → trash2Icon, circle-check → circleCheckIcon. El panel de detalle de cada icono te da el snippet ya armado.