Historia — documentación
Meter el icono exacto del producto en la documentación, y nítido
«Mi documentación seguía diciendo “pulsa el icono de exportar”, y el icono que había pegado junto a esa frase era un recorte borroso de 18 píxeles sacado de una captura. En una pantalla retina parecía un error. Quería el glifo real, el exacto del producto, en línea dentro de la página.»
El punto de partida
Las instrucciones solo son tan claras como el icono que las acompaña
Lo que no funcionaba
«Recortar iconos de capturas es una batalla perdida. Son mapas de bits, así que se emborronan en cuanto alguien amplía o lee en una pantalla de alta densidad. Arrastran un tinte de fondo de donde los recorté. Y se quedan desfasados: el producto publica un icono nuevo y mi documentación sigue enseñando el del trimestre pasado. Podía pedirle exportaciones a diseño, pero eso es una cola, y yo estaba escribiendo hoy.»
El clic derecho tampoco ayudaba: los glifos eran marcado en línea sin ninguna URL de imagen detrás. Nada que guardar.
El cambio
Tomás abrió el producto, pulsó SVG Downloader y recorrió las vistas previas aisladas hasta el glifo exacto de la barra de herramientas que necesitaba. Cada icono se muestra por su cuenta, fuera de la interfaz abarrotada, así que no hay ambigüedad sobre cuál estás cogiendo. Un nombre de archivo —export.svg—, un clic, listo.
«En línea en MDX, el icono está nítido a cualquier zoom, hereda el color del texto de la documentación mediante currentColor —así que se sienta en una frase como una palabra más— y es el glifo de verdad del producto, no mi aproximación. Cuando cambia el icono de exportar del producto, lo vuelvo a coger en diez segundos. El archivo bajó con el xmlns reparado, así que funcionó sin más en la compilación.»
«La documentación por fin parece el producto y no una fotocopia de él. Y he dejado de esperar a una cola de exportación para escribir una frase.»
— Tomás Herrera, redactor técnicoEl resultado
- Nítidoel SVG en línea se mantiene nítido a cualquier zoom y en cualquier pantalla
- 10 spara volver a coger un icono cuando el producto lo actualiza
- currentColorlos glifos heredan el color del texto de la documentación, en línea dentro de una frase
- Qué hizo el trabajo
- La detección de SVG en línea más la vista previa aislada para elegir el glifo exacto, guardado con un nombre propio. Ver el método universal.
- Por qué el icono se veía negro
- Muchos glifos de interfaz usan
currentColory se guardan sin color grabado, que es exactamente lo que quieres en línea dentro de un texto. En la documentación toma automáticamente el color del párrafo. - Una nota sobre derechos
- Documentar un producto sobre el que estás autorizado a escribir está bien; revisa las licencias antes de reutilizar los iconos de otra empresa fuera de ese contexto.
Historia compuesta: un flujo ilustrativo pero representativo. La persona y el producto son ficticios; el comportamiento de la extensión aquí descrito es real. Más historias →
Documentación que coincide con el producto
Coge el glifo exacto como SVG en línea: nítido a cualquier zoom, consciente del color y siempre actualizado.