Gerando Icon Fonts com GruntJS

Postado em: 16 de dezembro de 2013 - Por: Gustavo Corrêa Alves

icon-fonts

 

Há quem ainda goste de usar sprites para utilização de ícones em páginas web, mas temos que admitir, usar icon fonts é algo fantástico. No site do InfoLink, por exemplo, utilizamos bastante esse recurso.

Com icon fonts podemos aumentar e colorir nossos ícones sem termos que gerar várias combinações de imagens dentro de um sprite. Isso facilita bastante a vida do designer e do desenvolvedor.

Sites como icomoon.io ajudam na geração de tais ícones. No entanto, imagine o pequeno esforço sempre que surgir um ícone novo e você tiver que recorrer ao site para gerar novamente sua fonte. É claro que isso nem sempre vai acontecer, não é verdade? rs… Mas que tal deixar a preguiça de lado e automatizar essa tarefa?

Para isso utilizaremos o plugin webfont do GruntJS.

Como esse post é focado no uso do Grunt para gerar icon fonts, não explicarei como instalar e configurar o Grunt. Para isso aconselho ler o tutorial da própria ferramenta http://gruntjs.com/getting-started.

Observação: Vale ressaltar para os usuários Windows que infelizmente foram encontrados alguns problemas ao usar o plugin na plataforma. Um dos principais contribuidores Artem Sapegin diz nessa issue ainda não ter encontrado a solução.

 

Seguindo com nosso post vamos instalar alguns softwares que serão os responsáveis por gerar de fato nossa fonte nos formatos que precisamos.

sudo apt-get install fontforge eot-utils ttfautohint

wget http://people.mozilla.com/~jkew/woff/woff-code-latest.zip

unzip woff-code-latest.zip -d sfnt2woff && cd sfnt2woff && make && sudo mv sfnt2woff /usr/local/bin/

Caso queira saber um pouco mais sobre o que é e o que cada software faz seguem alguns endereços na web.

 

Feita a instalação dos softwares temos que instalar o plugin webfont. Vale lembrar que o plugin deverá ser instalado no diretório do seu projeto.

cd meu-projeto
sudo npm install grunt-webfont --save-dev

 

Ótimo! Já temos o  precisávamos, vamos as nossas configurações.

O plugin conta com uma série opções para que você possa configurá-lo. Aproveito para explicar as que considero essenciais, mas você poderá consultar as demais no endereço https://npmjs.org/package/grunt-webfont.

webfont: {
      icons: {
        src: 'icons/*.svg',
        dest: 'fonts',
        destCss: 'css',
        options: {
            font: 'my_icons',
            hashes: false,
        }
      }
    }
  • src: diretório onde se encontram os ícones em svg.
  • dest: diretório destino para o qual serão enviadas as fontes geradas.
  • destCss: diretório destino para o qual serão enviados os arquivos css com as regras font-face e o arquivo html de exemplo.
  • options:
    • font: o nome que será dado para os arquivos de font, css e para o html de exemplo.
    • hashes: o padrão é true e faz com que o nome do arquivos de fonte sejam concatenados com um hash. Exemplo: icons-3e615b571db01c9c6545c22f6700b0bc.eot .

Precisamos agora carregar o plugin através do nosso arquivo Gruntfile.js.

grunt.loadNpmTasks('grunt-webfont');

 

Veja como ficou o meu Gruntifle.js:

module.exports = function(grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    webfont: {
      icons: {
        src: 'icons/*.svg',
        dest: 'fonts',
        destCss: 'css',
        options: {
            font: 'my_icons',
            hashes: false,
        }
      }
    }    
  });

  grunt.loadNpmTasks('grunt-webfont');

  grunt.registerTask('default', ['webfont']);
};

 

Após ter configurado podemos executar o comando grunt para gerar nossa fonte.

 grunt

 

Certifique-se de que não ocorreu nenhum erro, e então você poderá usufruir de seus icon fonts. Caso queria visualizar o resultado final basta acessar o arquivo HTML de exemplo que localizado no mesmo diretório para o qual foi enviado seu arquivo CSS.

 

Leia também