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>

InputTipoDefault
iconDefAnimatedIconDef—La vía tree-shakeable. Gana sobre name.
namestring''Requiere provideIconCatalog. Desconocido = no pinta, no truena.
animationstring'default'Qué variante reproducir.
triggerAnimatedIconTrigger'group'Cuándo se anima.
sizenumber | string24Lado del SVG.
strokeWidthnumber | string2Grosor del trazo.
loopbooleanfalseCon easings de un tiro se nota el corte entre vueltas.
delaynumber0Retraso extra (ms), ADICIONAL al de cada track.
viewOncebooleantrueSolo con trigger="view".
decorativebooleantrueVer Accesibilidad: manda el label.
labelstring—Con label el icono es semántico.
respectReducedMotionbooleantrueSe 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 input animation.
  • reverse() — regresa a la pose inicial animando, no de golpe. Solo los tracks: reversar un autoDraw lo 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>

InputTipoDefault
iconMorphIcon—El binding ES el estado. El primer valor se pinta estático.
sizenumber | string24Lado del SVG.
strokeWidthnumber | string2Grosor del trazo.
decorativebooleantrueMismo contrato que <gf-icon>.
labelstring—Con label el icono es semántico.
respectReducedMotionbooleantrueAquí SALTA al destino en vez de quedarse quieto.
springSpringPreset | SpringConfig'smooth'smooth / snappy / bouncy, o un { k, c } propio. Solo decide el tiempo, nunca la geometría.
livebooleanfalseHorneado (WAAPI, default) vs en vivo (resorte real por requestAnimationFrame). Fijo desde el primer uso — cambiarlo después no tiene efecto.

Exports de glyphflow

SímboloQué es
GfIconComponentcomponente El motor. Selector <gf-icon>. Standalone.
provideGfIconsfunción Config global opcional. Hoy solo durationScale.
GF_ICONS_CONFIGtoken El InjectionToken detrás de provideGfIcons, por si lo quieres proveer tú.
provideIconCatalogfunción Registra el catálogo para poder usar name=. Opt-in: sin esto, name= no pinta.
GF_ICON_CATALOGtoken El token del catálogo. Sin él, un name desconocido se pinta vacío, sin tronar.
CURATED_ICONSconstante Los 1767 con coreografía a mano.
GENERATED_ICONSconstante Los 0 restantes de Lucide, solo con trazo automático.
ANIMATED_ICONSconstante Curados + generados. Referenciarlo ancla el catálogo completo en tu bundle.
ANIMATED_ICON_NAMESconstante Las claves del catálogo. Mismo costo de bundle que ANIMATED_ICONS.
ICON_ALIASESconstante Renombramientos reales de Lucide (mismo glifo, nombre nuevo).
resolveIconNamefunción Aplica los alias: nombre viejo → nombre actual.
ICON_METAconstante Metadatos por icono: si es curado, su origen y sus tags de búsqueda.
ICON_TAGSconstante Los sinónimos de búsqueda de Lucide por icono, sin la geometría.
ICON_VARIANTSconstante Qué variantes de animación trae cada icono, sin la geometría. Siempre empieza con draw.
SPRING_SMOOTHconstante ζ=1.00, crítico, sin sobrepaso. El default de la casa para ir de A a B.
SPRING_SNAPPYconstante ζ=0.73, rápido con sobrepaso sutil.
SPRING_BOUNCYconstante ζ=0.40, un rebote de verdad.
MaxIconComponentobsoletocomponente El motor. Selector <gf-icon>. Standalone. Usa GfIconComponent en su lugar.
provideMaxIconsobsoletofunción Config global opcional. Hoy solo durationScale. Usa provideGfIcons en su lugar.
MAX_ICONS_CONFIGobsoletotoken El InjectionToken detrás de provideGfIcons, por si lo quieres proveer tú. Usa GF_ICONS_CONFIG en su lugar.
MAX_ICON_CATALOGobsoletotoken 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
AnimatedIconDefUn icono: geometría + sus variantes de animación.
IconShapeUna figura del SVG (path, circle, line…).
IconChoreographyUna variante: tracks por figura + autoDraw + reverseOnLeave.
MotionTrackKeyframes + opciones WAAPI para una figura.
AutoDrawConfig del trazo automático (velocidad, traslape, topes).
AnimatedIconTrigger'group' | 'hover' | 'tap' | 'view' | 'auto' | 'manual'.
GfIconsConfigLo que recibe provideGfIcons.
IconMetaLos metadatos de un icono del catálogo. `tags` viene siempre poblado.

Exports de glyphflow/morph

SímboloQué es
GfIconMorphComponentcomponente Selector <gf-icon-morph>. Cambiar [icon] dispara la transición.
MaxIconMorphComponentobsoletocomponente Selector <gf-icon-morph>. Cambiar [icon] dispara la transición. Usa GfIconMorphComponent en su lugar.
morphKeyframesfunción Calcula los keyframes discretos de `d` entre dos iconos. No anima nada.
runMorphfunción morphKeyframes + element.animate(). Devuelve la Animation para que la controles.
canonicalDfunción El `d` de un icono ya resuelto — lo que se pinta cuando no hay transición.
morphAtfunción La pose exacta del morph en cualquier t (0-1), sin animar — para scrubbers y control manual.
createLiveMorphfunción El motor en vivo: un resorte movido por requestAnimationFrame, en vez de keyframes precalculados de WAAPI.
SPRING_PRESETSconstante smooth (ζ=1.00), snappy (ζ=0.73) y bouncy (ζ=0.40). Los dos últimos rebotan de verdad.
STEPS_DEFAULTconstante 20 poses discretas. Decidido en el Lab comparando 10/15/20/30.
RESOLUTION_DEFAULTconstante 64 puntos por subpath.
SPRING_TAIL_DEFAULTconstante Qué hacer con la cola asintótica del resorte.
correspondenceIsPoorfunción `true` cuando ningún algoritmo de correspondencia salvaría el par — el motor funde en vez de deformar.
QUALITY_RESIDUAL_MAXconstante Umbral de residuo de Procrustes por encima del cual la correspondencia se considera mala.
QUALITY_FRAGMENTATION_MAXconstante Umbral de fragmentación de subpaths por encima del cual la correspondencia se considera mala.
maxLinearDeviationfunción Cuánto se aleja la interpolación lineal de WAAPI entre las poses horneadas de la trayectoria polar real.
COPY_INTENTconstante Copiar al portapapeles: copy pasa a check, con snappy, y vuelve solo al reposo a los 2 s.
THEME_INTENTconstante Claro a oscuro: sun pasa a moon, con smooth — es un cambio de ambiente, no una confirmación.
PASSWORD_INTENTconstante Enseñar u ocultar una contraseña: eye pasa a eye-off. Activo significa que está a la vista.
PLAY_PAUSE_INTENTconstante Transporte de reproducción: play pasa a pause. Activo significa que suena, así que el botón ofrece pausar.
MENU_CLOSE_INTENTconstante Menú de navegación: menu pasa a x. Activo significa abierto, así que el botón ofrece cerrar.
EXPAND_COLLAPSE_INTENTconstante Desplegar y plegar: la punta del chevron gira. Activo significa desplegado, así que mira arriba.
LIKE_INTENTconstante Quitar de "me gusta": heart pasa a heart-off (partido por una raya, no relleno). Activo significa que ya se quitó.
FAVORITE_INTENTconstante Favorito: star pasa a star-off, fragmentada por la misma raya. Activo significa que ya no es favorito.
NOTIFY_INTENTconstante Notificaciones: bell pasa a bell-off. Activo significa silenciadas.
PIN_INTENTconstante Fijar un elemento: mapPin pasa a mapPin-off. Activo significa que ya no está fijado.
VOLUME_INTENTconstante 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_DEFAULTobsoletoconstante 20 poses discretas. Decidido en el Lab comparando 10/15/20/30. Usa STEPS_DEFAULT en su lugar.
RESOLUCION_DEFAULTobsoletoconstante 64 puntos por subpath. Usa RESOLUTION_DEFAULT en su lugar.
COLA_DEFAULTobsoletoconstante Qué hacer con la cola asintótica del resorte. Usa SPRING_TAIL_DEFAULT en su lugar.

Tipos

Tipo
MorphIconLo que acepta [icon]: un AnimatedIconDef o su geometría.
MorphKeyframesLa salida de morphKeyframes: keyframes, duración, peso.
MorphKeyframesOptsPasos, resolución, cola, resorte, sobrepaso.
RunMorphOptsLo anterior + loop, dirección y durationScale.
SpringConfigResorte crudo: rigidez y amortiguamiento.
SpringPresetLos nombres de SPRING_PRESETS: 'smooth' | 'snappy' | 'bouncy'.
LiveMorphEl manejador de createLiveMorph: morphTo, set, destroy.
LiveMorphOptsspring y durationScale, mismo vocabulario que el motor horneado.
MorphIntentUn gesto de dos estados con su carácter ya decidido: el par de figuras, su resorte y si el estado activo caduca.
GfAsyncStateLos 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.

Esta documentación describe la v3.3.1, la versión publicada en npm.

Última actualización

Editar esta página en GitHub