Generando iconos de fuentes a partir de croquis

Hay varias formas en que los iconos se pueden usar en la web, siendo los SVG y los iconos de fuente los formatos más populares. Este artículo cubrirá cómo exportar los iconos y convertirlos en iconos de fuente con un solo clic.

¿Por qué los iconos de fuente? Los iconos de fuentes son fáciles de usar para los desarrolladores. Puede asignar fácilmente a los iconos un tamaño de fuente o cualquier color que desee mientras codifica. Como resultado, tienes control total sobre su estilo. Entonces, ¿cómo creamos iconos de fuente?

El proceso

Crea una biblioteca de iconos

Cree símbolos de iconos en Sketch, suponiendo que no tenga una biblioteca de iconos. Puede comenzar con una mesa de trabajo 24x24 para crear iconos, ya que generalmente es un buen estándar y se puede escalar fácilmente. Si desea leer cómo crear una biblioteca de iconos dinámicos en Sketch, diríjase a este artículo. También he creado un recurso Sketch de 4 iconos para este artículo en caso de que no tenga una biblioteca de iconos. Puedes descargarlo aquí.

Crear un conjunto de símbolos de íconos

Convertir trazos en contornos

En caso de que haya usado bordes / trazos en cualquiera de sus iconos, asegúrese de convertirlos en contornos antes de continuar. Los iconos de fuente son de una sola forma y no funcionan con bordes.

Puede seleccionar las partes del icono que son trazos y seleccionar Capa> Convertir en contornos. Un atajo para hacer esto es simplemente presionar Shift + Cmd + O.

Combina las formas en una sola forma

Para que un icono sea un icono de fuente, deben ser una sola forma combinada. Puede hacerlo desde la barra de herramientas de Sketch. Seleccione dos capas que desea combinar y seleccione la operación booleana que desea realizar. Repita esto hasta que quede con una sola forma combinada.

Puede usar estas operaciones booleanas en la barra de herramientas para crear una sola forma combinadaCómo debería verse su ícono después de combinar todo en una sola forma

Si tiene problemas para combinar las formas, tengo un recurso disponible de 4 iconos que son todas formas complejas, para que pueda interactuar con ellas y ver cómo están hechas. Puede descargar el archivo Sketch aquí.

Exporte los iconos a una carpeta como SVG

Seleccione todos los iconos que desea exportar, hágalos exportables y seleccione SVG en el menú desplegable en las opciones de exportación. Puede hacer esto en Presets en la barra lateral derecha. Exporte todos ellos en una sola carpeta para facilitar el descubrimiento.

Exporte los iconos como SVG en una carpeta

Sube todos los íconos a Icomoon

Ahora que tenemos todos los iconos en formato SVG, abra Icomoon (es gratis) y haga clic en Importar iconos. Seleccione todos los iconos que desea convertir en iconos de fuente y cárguelos. Ni siquiera tiene que iniciar sesión para hacer esto, y su biblioteca de iconos permanece en línea cada vez que visita icomoon, siempre que visite desde el mismo dispositivo.

Cómo debería verse después de cargar los SVG

Convierta los iconos en iconos de fuente

Una vez que tengamos todos los íconos cargados, selecciónelos todos y haga clic en Generar fuente en la parte inferior derecha de la página. Ahora verá una lista de todos los glifos creados, y simplemente puede descargarlos desde la parte inferior derecha de la página.

Ahora puede descargar los iconos de fuente para estos SVG

¡Eso es! Ahora podemos simplemente dar el archivo ZIP a los desarrolladores, y pueden usar los contenidos para usar los iconos de fuente en el sitio web.

¡Gracias por leer! Si desea aprender a crear una biblioteca dinámica de iconos en profundidad, puede dirigirse a este artículo.