Gerando ícones de fonte do Sketch

Siddharth Ahuja Blocked Desbloquear Seguir Seguindo 3 de dezembro de 2018

Existem várias maneiras pelas quais ícones podem ser usados na web, com SVGs e ícones de fontes sendo os formatos mais populares. Este artigo abordará como exportar os ícones e convertê-los em ícones de fonte com um único clique.

Por que ícones de fonte? Os ícones de fontes são fáceis para os desenvolvedores usarem. Você pode facilmente dar aos ícones um tamanho de fonte ou qualquer cor que você desejar enquanto estiver codificando. Como resultado, você tem controle total sobre o estilo deles. Então, como criamos ícones de fonte?

O processo

Crie uma biblioteca de ícones

Crie símbolos de ícones no Sketch, supondo que você ainda não tenha uma biblioteca de ícones. Você pode começar com uma prancheta 24×24 para criar ícones, pois isso geralmente é um bom padrão e pode ser dimensionado facilmente. Se você quiser ler como criar uma biblioteca de ícones dinâmica no Sketch, vá para este artigo . Eu também criei um recurso de esboço de 4 ícones para este artigo, caso você não tenha uma biblioteca de ícones. Você pode baixá-lo aqui .

Crie um conjunto de símbolos de ícones

Converta traços em contornos

Caso você tenha usado bordas / traços em qualquer um de seus ícones, certifique-se de convertê-los em contornos antes de continuar. Os ícones de fonte são de uma única forma e não funcionam com bordas.

Você pode selecionar as partes do ícone que são traçados e selecionar Camada> Converter em contornos. Um atalho para fazer isso é simplesmente pressionar Shift + Cmd + O.

Combine as formas em uma única forma

Para que um ícone seja um ícone de fonte, eles precisam ter uma única forma combinada. Você pode fazer isso na barra de ferramentas Esboço. Selecione duas camadas que você deseja combinar e selecione a operação booleana que você deseja executar. Repita isso até você ficar com uma única forma combinada.

Você pode usar essas operações booleanas na barra de ferramentas para criar uma única forma combinada. Como seu ícone deve ser depois de combinar tudo em uma única forma

Se você tiver problemas para combinar as formas, eu tenho um recurso disponível de 4 ícones que são todas formas complexas, para que você possa interagir com eles e ver como eles são feitos. Você pode baixar o arquivo Sketch aqui .

Exportar os ícones para uma pasta como SVGs

Selecione todos os ícones que você deseja exportar, torne-os todos exportáveis e selecione SVGs na lista suspensa sob as opções de exportação. Você pode fazer isso em Préajustes na barra lateral direita. Exporte todos eles em uma única pasta para facilitar a descoberta.

Exportar os ícones como SVGs em uma pasta

Carregar todos os ícones para o Icomoon

Agora que temos todos os ícones em um formato SVG, abra o Icomoon (é grátis) e clique em Importar ícones . Selecione todos os ícones que você deseja converter em ícones de fontes e faça o upload deles. Você nem precisa fazer o login para fazer isso, e sua biblioteca de ícones permanece on-line sempre que você visita o icomoon, contanto que você visite o mesmo dispositivo.

Como deve ser depois de fazer o upload dos SVGs

Converta os ícones em ícones de fontes

Assim que tivermos todos os ícones carregados, selecione todos eles e clique em Generate Font na parte inferior direita da página. Agora você verá uma lista de todos os glifos criados, e você pode simplesmente baixá-los no canto inferior direito da página.

Agora você pode baixar os ícones de fonte para esses SVGs

É isso aí! Agora podemos simplesmente fornecer o arquivo ZIP aos desenvolvedores e eles podem usar o conteúdo para usar os ícones de fonte no site.

Texto original em inglês.