Guide d'exportation

Cliquez sur le bouton Exporter dans le menu de la barre latérale gauche. La boîte de dialogue d'exportation s'ouvre sous forme de modal vous permettant de configurer le répertoire de sortie, de sélectionner les groupes d'icônes à inclure et de choisir les formats de sortie et les fichiers complémentaires. Tous les paramètres sont mémorisés entre les sessions, donc une fois que vous avez configuré votre configuration d'exportation préférée, les exportations suivantes se font en un seul clic.

La première étape consiste à sélectionner où enregistrer les fichiers exportés. Par défaut, Bobcorn utilise votre Bureau. Cliquez sur le bouton de dossier à côté du chemin pour parcourir et choisir un autre emplacement.

Vous pouvez choisir quels groupes d'icônes inclure dans l'export. Par défaut, tous les groupes sont sélectionnés. Décochez les groupes que vous ne voulez pas dans la police — par exemple, vous pourriez exclure un groupe « brouillons » contenant des icônes en cours de développement.

Chaque groupe affiche son nombre d'icônes à côté de son nom. Le nombre total d'icônes en bas de la liste se met à jour en temps réel lorsque vous activez ou désactivez des groupes, de sorte que vous savez toujours exactement combien de glyphes la police exportée contiendra.

Bobcorn peut générer cinq formats de polices. Choisissez ceux qui correspondent aux exigences de compatibilité de navigateurs de votre projet :

WOFF2 est toujours inclus car c'est le format de police web essentiel — il n'y a aucun scénario où vous voudriez un export de police web sans lui. Tous les autres formats sont optionnels selon vos exigences spécifiques.

Au-delà des fichiers de polices eux-mêmes, Bobcorn peut générer plusieurs fichiers complémentaires qui facilitent l'intégration et la collaboration :

CSS (icons.css)

Contient la déclaration @font-face et les classes CSS .icon-* pour chaque icône de l'ensemble. Déposez ce fichier dans votre projet et vous êtes prêt à utiliser les icônes avec des noms de classe simples. Consultez le guide CSS @font-face pour des détails sur le fonctionnement du CSS généré.

JS (icons-symbol.js)

Un sprite de symboles SVG qui enregistre toutes les icônes comme symboles SVG inline lors du chargement du script. Utilisez ceci lorsque vous avez besoin d'icônes multicolores ou de fonctionnalités spécifiques SVG aux côtés de vos polices d'icônes. Consultez le guide SVG Symbol pour les modèles d'utilisation.

HTML (demo.html)

Une page de prévisualisation interactive affichant toutes les icônes exportées avec leurs noms, noms de classes CSS et points de code Unicode. Ouvrez-la dans un navigateur pour parcourir l'ensemble complet des icônes. Utile pour les designers qui examinent la bibliothèque d'icônes et les développeurs qui recherchent des noms de classes lors de l'intégration.

ICP (project.icp)

Le fichier de projet de Bobcorn. Exportez-le pour partager votre projet d'icônes avec vos coéquipiers ou comme sauvegarde. L'ouverture d'un fichier ICP dans Bobcorn restaure l'état complet du projet — toutes les icônes, groupes, métadonnées et paramètres — exactement comme ils étaient lors de l'exportation.

Activez l'option ZIP pour regrouper tous les fichiers exportés dans une seule archive .zip. C'est utile pour partager la police d'icônes avec des coéquipiers, la télécharger sur un CDN ou l'attacher à un document de remise de conception. Le ZIP contient la même structure de répertoires qu'un export libre — sans imbrication ni réorganisation.

Voici trois préréglages pratiques pour les types de projets courants :

Projet web moderne

• WOFF2 (toujours activé) + CSS + démo HTML
• Empreinte minimale, couvre 97 %+ des navigateurs

Projet à compatibilité complète

• WOFF2 + WOFF + CSS + démo HTML
• Couvre IE 11+ et tous les navigateurs modernes

Système de conception / bibliothèque de composants

• WOFF2 + TTF + CSS + symbole JS + démo HTML + ICP
• Polices pour l'utilisation CSS, TTF pour les outils de bureau, symboles JS pour les variantes multicolores, ICP pour la sauvegarde du projet

Lorsque toutes les options sont activées, Bobcorn génère la structure de fichiers suivante :

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

Le nom de la famille de polices (par exemple, « MyIcons ») est dérivé du nom de votre projet dans Bobcorn. Tous les fichiers générés utilisent ce nom comme préfixe pour la cohérence.

Une fois que Bobcorn a généré vos fichiers, suivez ces étapes pour intégrer la police d'icônes dans votre projet :

1. Copiez les fichiers de polices + CSS dans le répertoire des ressources ou des polices de votre projet
2. Liez le CSS dans votre HTML : <link rel="stylesheet" href="MyIcons.css">
3. Utilisez les icônes n'importe où dans votre balisage : <i class="icon icon-home"></i>
4. Préchargez optionnellement le fichier WOFF2 pour un rendu initial plus rapide

Voici un exemple d'intégration complète :

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

L'indication rel="preload" indique au navigateur de commencer à télécharger le fichier de police avant même qu'il ne rencontre la règle @font-face dans le CSS. Cela élimine le délai entre l'analyse CSS et le téléchargement de la police, ce qui donne un premier rendu plus rapide avec les icônes visibles. L'attribut crossorigin est requis pour les préchargements de polices, même lorsque la police est de même origine.