Guía de exportación

Haga clic en el botón Exportar en el menú de la barra lateral izquierda. El diálogo de exportación se abre como un modal que le permite configurar el directorio de salida, seleccionar qué grupos de iconos incluir y elegir formatos de salida y archivos complementarios. Todas las configuraciones se recuerdan entre sesiones, así que una vez configurada su exportación preferida, las exportaciones posteriores son un solo clic.

El primer paso es seleccionar dónde guardar los archivos exportados. De forma predeterminada, Bobcorn usa su Escritorio. Haga clic en el botón de carpeta junto a la ruta para buscar una ubicación diferente.

Puede elegir qué grupos de iconos incluir en la exportación. De forma predeterminada, todos los grupos están seleccionados. Desmarque los grupos que no desee en la fuente — por ejemplo, podría excluir un grupo de «borradores» que contiene iconos en progreso.

Cada grupo muestra su número de iconos junto a su nombre. El número total de iconos en la parte inferior de la lista se actualiza en tiempo real a medida que activa y desactiva grupos, por lo que siempre sabe exactamente cuántos glifos contendrá la fuente exportada.

Bobcorn puede generar cinco formatos de fuente. Elija los que coincidan con los requisitos de compatibilidad del navegador de su proyecto:

WOFF2 siempre está incluido porque es el formato esencial de fuente web — no hay escenario en el que desee una exportación de fuente web sin él. Todos los demás formatos son opcionales según sus requisitos específicos.

Más allá de los archivos de fuente en sí, Bobcorn puede generar varios archivos complementarios que facilitan la integración y la colaboración:

CSS (icons.css)

Contiene la declaración @font-face y las clases CSS .icon-* para cada icono del conjunto. Añada este archivo a su proyecto y estará listo para usar iconos con nombres de clase simples. Consulte la guía de CSS @font-face para obtener detalles sobre cómo funciona el CSS generado.

JS (icons-symbol.js)

Un sprite de símbolo SVG que registra todos los iconos como símbolos SVG inline cuando se carga el script. Use esto cuando necesite iconos multicolor o características específicas de SVG junto a sus fuentes de iconos. Consulte la guía de SVG Symbol para los patrones de uso.

HTML (demo.html)

Una página de vista previa interactiva que muestra todos los iconos exportados con sus nombres, nombres de clase CSS y puntos de código Unicode. Ábrala en un navegador para explorar el conjunto completo de iconos. Útil para diseñadores que revisan la biblioteca de iconos y desarrolladores que buscan nombres de clase durante la integración.

ICP (project.icp)

El archivo de proyecto de Bobcorn. Expórtelo para compartir su proyecto de iconos con compañeros de equipo o como copia de seguridad. Abrir un archivo ICP en Bobcorn restaura el estado completo del proyecto — todos los iconos, grupos, metadatos y configuraciones — exactamente como estaban cuando se exportó.

Active la opción ZIP para agrupar todos los archivos exportados en un único archivo .zip. Esto es útil para compartir la fuente de iconos con compañeros, subirla a un CDN o adjuntarla a un documento de entrega de diseño. El ZIP contiene la misma estructura de directorios que una exportación suelta — sin anidamiento ni reorganización.

A continuación se presentan tres ajustes preestablecidos prácticos para tipos de proyectos comunes:

Proyecto web moderno

• WOFF2 (siempre activo) + CSS + demo HTML
• Huella mínima, cubre el 97 %+ de los navegadores

Proyecto de compatibilidad completa

• WOFF2 + WOFF + CSS + demo HTML
• Cubre IE 11+ y todos los navegadores modernos

Sistema de diseño / biblioteca de componentes

• WOFF2 + TTF + CSS + símbolo JS + demo HTML + ICP
• Fuentes para uso CSS, TTF para herramientas de escritorio, símbolos JS para variantes multicolor, ICP para copia de seguridad del proyecto

Cuando todas las opciones están habilitadas, Bobcorn genera la siguiente estructura de archivos:

output/
├── MyIcons.woff2        # Font files
├── MyIcons.woff
├── MyIcons.ttf
├── MyIcons.css          # @font-face + icon classes
├── MyIcons-symbol.js    # SVG symbol sprite
├── demo.html            # Interactive preview
└── MyIcons.icp          # Project backup

El nombre de la familia de fuentes (por ejemplo, «MyIcons») se deriva del nombre de su proyecto en Bobcorn. Todos los archivos generados usan este nombre como prefijo para mantener la coherencia.

Una vez que Bobcorn ha generado sus archivos, siga estos pasos para integrar la fuente de iconos en su proyecto:

1. Copie los archivos de fuente + CSS al directorio de recursos o fuentes de su proyecto
2. Vincule el CSS en su HTML: <link rel="stylesheet" href="MyIcons.css">
3. Use los iconos en cualquier parte de su marcado: <i class="icon icon-home"></i>
4. Opcionalmente precargue el archivo WOFF2 para un renderizado inicial más rápido

A continuación se muestra un ejemplo completo de integración:

<head>
  <link rel="preload" href="MyIcons.woff2" as="font"
        type="font/woff2" crossorigin>
  <link rel="stylesheet" href="MyIcons.css">
</head>
<body>
  <button><i class="icon icon-save"></i> Guardar</button>
</body>

La indicación rel="preload" le dice al navegador que comience a descargar el archivo de fuente antes de que encuentre la regla @font-face en el CSS. Esto elimina el retraso entre el análisis del CSS y la descarga de la fuente, lo que resulta en un primer renderizado más rápido con los iconos visibles. El atributo crossorigin es necesario para las precargas de fuentes, incluso cuando la fuente es del mismo origen.