Guia de Exportação

Clique no botão Exportar no menu da barra lateral esquerda. O diálogo de exportação abre como um modal que permite configurar o diretório de saída, selecionar quais grupos de ícones incluir e escolher os formatos de saída e arquivos complementares. Todas as configurações são lembradas entre as sessões, portanto, uma vez que você tenha configurado sua configuração de exportação preferida, as exportações subsequentes são feitas com um único clique.

O primeiro passo é selecionar onde salvar os arquivos exportados. Por padrão, o Bobcorn usa sua Área de Trabalho. Clique no botão de pasta ao lado do caminho para procurar um local diferente.

Você pode escolher quais grupos de ícones incluir na exportação. Por padrão, todos os grupos são selecionados. Desmarque os grupos que você não quer na fonte — por exemplo, você pode excluir um grupo de "rascunhos" que contém ícones em desenvolvimento.

Cada grupo mostra sua contagem de ícones ao lado do nome. A contagem total de ícones na parte inferior da lista é atualizada em tempo real conforme você ativa e desativa os grupos, para que você sempre saiba exatamente quantos glifos a fonte exportada conterá.

O Bobcorn pode gerar cinco formatos de fonte. Escolha os que correspondem aos requisitos de suporte de navegadores do seu projeto:

O WOFF2 é sempre incluído porque é o formato de fonte web essencial — não há cenário em que você queira uma exportação de fonte web sem ele. Todos os outros formatos são opcionais com base em seus requisitos específicos.

Além dos próprios arquivos de fonte, o Bobcorn pode gerar vários arquivos complementares que facilitam a integração e a colaboração:

CSS (icons.css)

Contém a declaração @font-face e as classes CSS .icon-* para cada ícone do conjunto. Adicione este arquivo ao seu projeto e você estará pronto para usar ícones com nomes de classes simples. Consulte o guia CSS @font-face para obter detalhes sobre como o CSS gerado funciona.

JS (icons-symbol.js)

Um sprite SVG symbol que registra todos os ícones como símbolos SVG inline quando o script é carregado. Use isso quando precisar de ícones multicoloridos ou recursos específicos de SVG junto com seus ícones de fonte. Consulte o guia SVG Symbol para padrões de uso.

HTML (demo.html)

Uma página de visualização interativa mostrando todos os ícones exportados com seus nomes, nomes de classes CSS e pontos de código Unicode. Abra-a em um navegador para navegar pelo conjunto completo de ícones. Útil para designers revisando a biblioteca de ícones e desenvolvedores consultando nomes de classes durante a integração.

ICP (project.icp)

O arquivo de projeto do Bobcorn. Exporte isso para compartilhar seu projeto de ícones com colegas de equipe ou como backup. Abrir um arquivo ICP no Bobcorn restaura o estado completo do projeto — todos os ícones, grupos, metadados e configurações — exatamente como estavam quando foram exportados.

Ative a opção ZIP para agrupar todos os arquivos exportados em um único arquivo .zip. Isso é útil ao compartilhar a fonte de ícone com colegas de equipe, fazer upload para um CDN ou anexar a um documento de entrega de design. O ZIP contém a mesma estrutura de diretórios que uma exportação avulsa — sem aninhamento ou reorganização.

Aqui estão três predefinições práticas para tipos comuns de projetos:

Projeto web moderno

• WOFF2 (sempre ativado) + CSS + demonstração HTML
• Pegada mínima, cobre 97%+ dos navegadores

Projeto de compatibilidade completa

• WOFF2 + WOFF + CSS + demonstração HTML
• Cobre IE 11+ e todos os navegadores modernos

Sistema de design / biblioteca de componentes

• WOFF2 + TTF + CSS + símbolo JS + demonstração HTML + ICP
• Fontes para uso CSS, TTF para ferramentas desktop, símbolos JS para variantes multicoloridas, ICP para backup do projeto

Quando todas as opções estão habilitadas, o Bobcorn gera a seguinte estrutura de arquivos:

output/
├── MyIcons.woff2        # Arquivos de fonte
├── MyIcons.woff
├── MyIcons.ttf
├── MyIcons.css          # @font-face + classes de ícone
├── MyIcons-symbol.js    # Sprite SVG symbol
├── demo.html            # Visualização interativa
└── MyIcons.icp          # Backup do projeto

O nome da família de fontes (por exemplo, "MyIcons") é derivado do nome do seu projeto no Bobcorn. Todos os arquivos gerados usam esse nome como prefixo para consistência.

Depois que o Bobcorn gerou seus arquivos, siga estas etapas para integrar a fonte de ícone ao seu projeto:

1. Copie os arquivos de fonte + CSS para o diretório de assets ou fonts do seu projeto
2. Vincule o CSS em seu HTML: <link rel="stylesheet" href="MyIcons.css">
3. Use ícones em qualquer lugar na sua marcação: <i class="icon icon-home"></i>
4. Opcionalmente pré-carregue o arquivo WOFF2 para renderização inicial mais rápida

Aqui está um exemplo completo de integração:

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

A dica rel="preload" instrui o navegador a começar a baixar o arquivo de fonte antes de encontrar a regra @font-face no CSS. Isso elimina o atraso entre a análise do CSS e o download da fonte, resultando em uma primeira renderização mais rápida com os ícones visíveis. O atributo crossorigin é necessário para pré-carregamentos de fonte, mesmo quando a fonte é de mesma origem.