Transforme seus arquivos SVG em fontes com Icomoon
Normalmente em nossos projetos usamos uma série de imagens para ícones, logos, banners. Em alguns casos eles realmente devem ser usados como imagem, mas em casos onde vamos utilizar essa imagem em vários locais da nossa aplicação (ex: ícones) vale a pena transformá-los em um arquivo de fonte e importar uma única vez na aplicação, além de poder editar tamanho, cor entre outros utilizando CSS.
E para ajudar neste processo iremos utilizar uma ferramenta web chamada IcoMoonApp, pegue os assets em SVG com o designer do seu projeto e acesse o link https://icomoon.io/app para começarmos. Ao acessar vocês devem encontrar uma tela parecida com essa abaixo.
Clique no botão que fica no canto superior esquerdo chamado “Import Icons” e selecione os arquivos SVG que você quer converter. Lembrando que esse arquivo SVG não deve ser exportado em forma de linha ou o Icomoon não vai conseguir converter esse arquivo como mostrado na segunda imagem abaixo.
Após upload dos arquivos SVG vai aparecer uma nova lista com os ícones que você subiu, selecione os ícones que você quer converter e clique no botão “Generate Font” para ver se todos os ícones estão no formato correto para serem exportados.
Após isso clique no botão “Download” no canto inferior direito da tela e vai ser gerado o pacote com os arquivos de fontes e um exemplo de uso. Também é possível personalizar sua fonte, definindo um nome, um prefixo, tipo de CSS seletor e até integração com pré-processadores, bastando apenas clicar no ícone da “engrenagem” ao lado do botão “ Download”.
Agora basta você importar esses arquivos para sua aplicação e usar, lembrando que agora você vai chamar uma classe em um elemento HTML no lugar de uma imagem ( ex: <i class=”mf-update”></i> ) e vai poder estilizar ele com CSS ( ex: font-size: 20px; color: red; background: green; ). Caso queira adicionar um novo ícone a sua lista, você pode realizar o processo acima porém na hora de fazer upload das imagens você vai subir primeiro o arquivo “selection.json“ que foi gerado no primeiro pacote e subir o SVG do ícone novo, com isso ele vai gerar o novo pacote de fontes mantendo as classes dos ícones gerados anteriormente e adicionando uma classe para o ícone novo.
Obrigado! ;)
