Loading Likes...

La necesidad

En Habitissimo, dentro de nuestro proceso de unificación y optimización de todo el Frontend, nos encontramos hace unos meses con la necesidad de ampliar la cantidad de iconos que veníamos utilizando. Entonces usábamos Font Awesome como nuestra fuente de iconos pero topamos con que nuestros diseñadores, con una orientación hacia la navegación móvil, querían incluir bastantes soluciones gráficas basadas en botones con iconos. Esto incluía la necesidad, por la temática del contenido de nuestra web, de utilizar muchos iconos que no existen en Font Awesome.

Teníamos dos soluciones posibles:

  • La cómoda y rápida era pedir a los diseñadores que generasen una nueva fuente en algún servicio online y añadirla a la que ya servíamos aumentando el peso de la web y creando otra petición más.
  • La óptima y escalable era filtrar lo que realmente estábamos usando de Font Awesome, añadir los iconos nuevos que necesitábamos, generar una nueva fuente personalizada y hacerlo de manera que fuese fácil de mantener y actualizar.

De ahí surgió la idea de crear nuestra propia fuente y, como aquí nos encanta ponerle nombre a todo, le pusimos Iconissimo.

Preparación

El primer paso, si no íbamos a utilizar Font Awesome tal como viene de serie, era aprovechar para reducirla únicamente a lo que realmente necesitábamos. Font Awesome incluye por defecto 585 iconos en su versión 4.4. Aunque son archivos ligeros, nos gustaba la idea de optimizar al máximo. Con este proceso conseguimos reducir el peso de la fuente de manera considerable. Por ejemplo, pasamos de 119KB de Font Awesome a 48KB para la fuente en formato TTF o de 70KB a 27KB en formato WOFF comparando la versión completa de Font Awesome con la última versión completa de nuestra fuente a día de hoy, que incluye 187 iconos.

Para comenzar llevamos a cabo un proceso que recorría con un script en Python todo el código fuente de nuesta web (PHP, LESS, CSS y JS) para sacar una lista de iconos que, a fecha del cambio, se estaban usando en la web. De esto obtuvimos una lista de unos 150 iconos. Hay que tener en cuenta que es una base de código enorme y hablamos de web pública, paneles de gestión interna, zona de usuarios logueados y zona de profesionales. En cualquier caso, nos seguía sobrando mucho en la fuente por defecto. Con esto teníamos la base de los primeros iconos que debían estar dentro de Iconissimo, pero nos quedaba resolver la manera de obtener esos iconos en SVG, unirlos a los nuestros y generar nuestra propia fuente.

Elaborada la lista, decidimos que, aunque esto era algo que podía perfectamente estar en base de datos, era probablemente hacer sobre-ingeniería para algo que debe ser fácil y rápido de editar para cualquiera de nuestros desarrolladores. ¿Por qué hacer para una simple lista algo más complicado que un archivo de texto plano? Nuestro listado de iconos se guarda dentro del repositorio, en un simple txt donde cada linea (en orden alfabético) se corresponde con el nombre del icono sin prefijo. Esto es, para un “icon-user”, guardamos sólo una línea “user”, que se corresponderá además con el icono user.svg.

A través del proyecto Font-Awesome-SVG-PNG, hicimos la generación inicial del set de iconos completo en SVG procedentes de Font Awesome. Esta herramienta permite generar a partir de Font Awesome un set de iconos personalizado en tamaño y otros aspectos, tanto en SVG como en PNG. Con esto teníamos la base para arrancar guardada en una carpeta que llamamos fa-icons separada de la que usaremos para incluir los iconos que nos entregan los diseñadores a la que llamamos hab-icons.

Para la generación de la fuente utilizamos Font Custom, una herramienta que nos permite, pasándole una carpeta con los SVG y una serie de parámetros de configuración, generar una fuente en todos los formatos habituales (EOT, WOFF, TTF…), así como el CSS correspondiente a esa fuente. Eso sí, como casi todo nuestro proceso de desarrollo pasa por utilizar docker, ni siquiera necesitamos que cada desarrollador lo instale en su máquina, sino que todos utilizamos una misma versión “dockerizada” de Font Custom.

Font Custom genera un archivo CSS que mantiene siempre el mismo nombre que se le haya indicado y lo que regenera con distinto nombre cada vez que lo utilizamos es la fuente. A nosotros eso nos da igual porque no incluimos la fuente directamente, sino que desde nuestros archivos LESS incluimos antes de compilar el archivo iconissmo.css que genera Font Custom, así que siempre sabemos que la fuente que utilizamos es la correcta. La última que se ha generado.

En principio tenemos todos los elementos individuales que nos hacen posible generar la fuente, pero ¿cómo es el proceso?

Generación de la fuente

Como hemos explicado, tenemos dos carpetas distintas con los SVG. Una de ellas contiene los iconos de Font Awesome y la otra, los añadidos por Habitissimo. En medio, un archivo TXT con los iconos que vamos a utilizar. Todo esto, por supuesto, bajo control versiones en el repositorio.

Desarrollamos un script en Python que lee nuestro archivo línea a línea, busca en ambas capetas un archivo SVG con el nombre indicado y lo copia a una carpeta intermedia para procesarlo. Hacemos que nuestra carpeta de iconos añadidos tenga prioridad sobre la de Font Awesome, para que, si decidimos sustituir un icono de los que usábamos, tome como bueno el nuestro. Cuando Python encuentra el archivo, lo copia a la carpeta intermedia. Si no está, sale del proceso dando una excepción y nos indica el icono que no ha podido encontrar. De esta manera podemos saber si nos hemos equivocado en el nombre o hemos olvidado incluir el icono y no generamos una fuente con iconos que no existen.

import os
import fileutils
import shutil
import subprocess
 
icons_path = '../../web/static/available-icons/icons/'
icons_list = open('../../web/static/available-icons/icons-list.txt', 'r')
icon_set = set()
directory_list = ('../../web/static/hab-icons/', '../../web/static/fa-icons/')
 
# Emtpy destination file
files = os.listdir(icons_path)
if files:
  for file in files:
    f = os.remove(icons_path + file)
 
for icon in icons_list:
  if icon in icon_set:
    raise Exception("Duplicated icon name: {}".format(icon))
 
  found = False
  for dir in directory_list:
    icon_name = '{}.svg'.format(icon.strip())
    filename = os.path.join(dir, icon_name)
    if os.path.exists(filename):
      icon_set.add(filename)
      found = True
      break
 
  if not found:
    raise Exception('Icon not found: {}'.format(icon))
 
for icon in icon_set:
  shutil.copy2(icon, icons_path)
 
# Generate font
subprocess.call('docker-compose run fontcustom compile', shell=True)

Cuando queremos incluir un icono nuevo, las necesidades son simplemente incluirlo en la carpeta adecuada y crear una entrada con el nombre en nuestro icons-list.txt.

El propio script que hace la copia instancia el contenedor de Docker que incluye Font Custom y que toma las configuraciones necesarias de nombre de fuente, tamaño base o prefijo css de un archivo YAML que guardamos en la raíz del proyecto. Este proceso regenera la fuente y el CSS correspondiente, asignando a cada icono un selector CSS y un caracter Unicode, como ocurre con todas las fuentes de iconos.

Iconissimo

Una vez hecho esto, basta hacer un git add de los archivos nuevos y modificados y ya tenemos al día en el repositorio la fuente actualizada.

Loading Likes...

2 thoughts on “Iconissimo: una fuente para dominarlas a todas

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *