Guida all'Esportazione

Fare clic sul pulsante Esporta nel menu della barra laterale sinistra. La finestra di dialogo di esportazione si apre come un modale che consente di configurare la directory di output, selezionare i gruppi di icone da includere e scegliere i formati di output e i file complementari. Tutte le impostazioni vengono ricordate tra le sessioni, quindi una volta configurata la propria impostazione di esportazione preferita, le esportazioni successive richiedono un solo clic.

Il primo passo consiste nel selezionare dove salvare i file esportati. Per impostazione predefinita, Bobcorn utilizza il Desktop. Fare clic sul pulsante della cartella accanto al percorso per cercare una posizione diversa.

È possibile scegliere quali gruppi di icone includere nell'esportazione. Per impostazione predefinita, tutti i gruppi sono selezionati. Deselezionare i gruppi che non si desidera nel font — ad esempio, si potrebbe escludere un gruppo "bozze" contenente icone in lavorazione.

Ogni gruppo mostra il conteggio delle icone accanto al suo nome. Il conteggio totale delle icone in fondo all'elenco si aggiorna in tempo reale mentre si attivano e disattivano i gruppi, in modo da sapere sempre esattamente quanti glifi conterrà il font esportato.

Bobcorn può generare cinque formati di font. Scegliere quelli che corrispondono ai requisiti di supporto browser del progetto:

WOFF2 è sempre incluso perché è il formato di font web essenziale — non esiste uno scenario in cui si desidera un'esportazione di font web senza di esso. Tutti gli altri formati sono opt-in in base ai requisiti specifici del progetto.

Oltre ai file di font veri e propri, Bobcorn può generare diversi file complementari che facilitano l'integrazione e la collaborazione:

CSS (icons.css)

Contiene la dichiarazione @font-face e le classi CSS .icon-* per ogni icona del set. Aggiungere questo file al progetto e si è pronti a utilizzare le icone con semplici nomi di classi. Consultare la guida CSS @font-face per dettagli su come funziona il CSS generato.

JS (icons-symbol.js)

Uno sprite SVG symbol che registra tutte le icone come simboli SVG inline quando lo script viene caricato. Utilizzarlo quando si necessita di icone multicolore o funzionalità specifiche di SVG insieme alle icone font. Consultare la guida SVG Symbol per i pattern di utilizzo.

HTML (demo.html)

Una pagina di anteprima interattiva che mostra tutte le icone esportate con i loro nomi, nomi di classi CSS e punti di codice Unicode. Aprirla in un browser per sfogliare il set completo di icone. Utile per i designer che revisionano la libreria di icone e per gli sviluppatori che cercano i nomi delle classi durante l'integrazione.

ICP (project.icp)

Il file di progetto di Bobcorn. Esportarlo per condividere il progetto di icone con i colleghi del team o come backup. Aprire un file ICP in Bobcorn ripristina lo stato completo del progetto — tutte le icone, i gruppi, i metadati e le impostazioni — esattamente come erano al momento dell'esportazione.

Abilitare l'opzione ZIP per raggruppare tutti i file esportati in un unico archivio .zip. Questo è utile per condividere il font icona con i colleghi del team, caricarlo su un CDN o allegarlo a un documento di design handoff. Lo ZIP contiene la stessa struttura di directory di un'esportazione normale — senza annidamento o riorganizzazione.

Ecco tre impostazioni predefinite pratiche per i tipi di progetto più comuni:

Progetto web moderno

• WOFF2 (sempre attivo) + CSS + demo HTML
• Footprint minimo, copre il 97%+ dei browser

Progetto con piena compatibilità

• WOFF2 + WOFF + CSS + demo HTML
• Copre IE 11+ e tutti i browser moderni

Design system / libreria di componenti

• WOFF2 + TTF + CSS + symbol JS + demo HTML + ICP
• Font per uso CSS, TTF per strumenti desktop, symbol JS per varianti multicolore, ICP per il backup del progetto

Quando tutte le opzioni sono abilitate, Bobcorn genera la seguente struttura di file:

output/
├── MyIcons.woff2        # File di font
├── MyIcons.woff
├── MyIcons.ttf
├── MyIcons.css          # @font-face + classi icona
├── MyIcons-symbol.js    # Sprite SVG symbol
├── demo.html            # Anteprima interattiva
└── MyIcons.icp          # Backup del progetto

Il nome della famiglia di font (ad es., "MyIcons") viene derivato dal nome del progetto in Bobcorn. Tutti i file generati usano questo nome come prefisso per coerenza.

Una volta che Bobcorn ha generato i file, seguire questi passaggi per integrare il font icona nel progetto:

1. Copiare i file di font + CSS nella directory degli assets o dei font del progetto
2. Collegare il CSS nell'HTML: <link rel="stylesheet" href="MyIcons.css">
3. Utilizzare le icone ovunque nel markup: <i class="icon icon-home"></i>
4. Opzionalmente precaricare il file WOFF2 per un rendering iniziale più veloce

Ecco un esempio di integrazione completo:

<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> Salva</button>
</body>

L'hint rel="preload" indica al browser di iniziare a scaricare il file di font prima di incontrare la regola @font-face nel CSS. Questo elimina il ritardo tra il parsing del CSS e il download del font, risultando in un first-paint più veloce con le icone visibili. L'attributo crossorigin è necessario per i precaricamenti di font, anche quando il font è della stessa origine.