LinkArrow

Flecha inline para enlaces

stable v1.1.0

Preview

Manifiesto

signal.3lastic.com

Props

Prop	Tipo	Default	Significado
`external`	boolean	`false`	`false` = flecha derecha (interno). `true` = flecha arriba-derecha (externo).

Por qué existe

Los caracteres Unicode → (U+2192) y ↗ (U+2197) se renderizan como emoji de color en macOS e iOS: ignoran currentColor, rompen el tono tipográfico y desplazan la línea base. LinkArrow los sustituye por SVG con stroke="currentColor", que iguala color y peso del texto en cualquier plataforma. Esa es toda su razón de ser: si vuelve a Unicode, vuelve el bug.

Tokens

Propiedad	Valor	Nota
Tamaño	12×12px fijo	Glyph de UI, no tipografía: fuera de la escala
Color	currentColor	Hereda el color del texto; nunca hardcodeado
Stroke	1.2px, round	Iguala el peso visual del body
Margin-left	0.2em	Escala con el tamaño de fuente

Restricciones

Una sola prop: external. Sin variantes de tamaño ni estado.
El color siempre currentColor.
Decorativo: aria-hidden, focusable="false".
12px fijo, fuera de la escala Major Third a propósito.
Nunca Unicode en markup ni en content CSS: Safari lo pinta como emoji.

Prose

Los enlaces externos en Markdown no pueden usar el componente. En prose.css, .prose a[target="_blank"]::after duplica la flecha externa con una máscara SVG. Si cambias el path externo aquí, actualiza la máscara en prose.css también.

Decisiones

Decisión	Por qué
SVG en vez de Unicode	U+2192 y U+2197 son emoji de color en macOS/iOS, ignoran currentColor
Prop `external`	La dirección es semántica (destino interno vs externo), no decoración arbitraria
Default = interno (→)	La mayoría de enlaces son internos; externo se marca explícitamente
currentColor, nunca fill fijo	Debe igualar siempre el texto que acompaña, en claro y oscuro
12px fijo, fuera de escala	Glyph de UI a la medida del body, no un paso tipográfico
Prose usa máscara CSS	Mismo bug Safari; la máscara replica el path externo del componente