Aprenda a criar a sua própria fonte de ícones

Curso Escrevendo testes automatizados com PHPUnit

Não é novidade que os ícones estão presentes cada vez mais em aplicações web, alias, é raro ver um site que não tenha ao menos um ícone. Antigamente a gente utilizava arquivos .bmp ou .png, por exemplo, para colocar ícones nos sites, mas hoje isso é ultrapassado.

Existem inúmeros serviços, plugins e ferramentas que nos auxiliam na criação desses ícones, que nada mais são do que um conjunto de imagens dentro do padrão de um fonte, na qual conseguimos mostrar seu conteúdo através de classes CSS. Vamos utilizar o pacote NPM do Icon Font Generator para esse exemplo.

Antes mais nada, confira a nossa videoaula completa ensinando como criar os ícones.

Os comandos utilizados durante a videoaula são:

npm init -y //Inicia o projeto npm
npm install --saved-dev icon-font-generator //Instala as dependências
icon-font-generator src/*.svg -o dist //Converte e cria os ícones

Primeiramente criamos uma pasta chamada de dist e outra de src. Dentro da src colocamos todos os nossos arquivos svg com o prefixo icon-.

Como utilizar fontes de ícones?

A utilização é bem simples, seguindo o arquivo de template gerado, basta importar o arquivo icons.css que os ícones já estarão disponíveis para uso.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>icons</title>
    <link rel="preload" href="icons.css" as="style"/>
    <link rel="stylesheet" type="text/css" href="icons.css" />
</head>
<body>

    <h1>icons</h1>

        <div class="preview">
            <span class="inner">
                <i class=" icon-icon-eye"></i>
            </span>
            <br>
            <span class='label'>icon-eye</span>
        </div>

</body>
</html>

Para utilizar o ícone, crie um elemento HTML e no atributo class insira o nome que foi gerado, conforme é visível no arquivo de template.

Caso você vá utilizar os ícones em botões ou ancoras, não esqueça de definir o atributo aria-label, conforme mostra o código abaixo.

<a class="icon-icon-eye" aria-label="Clique para exibir os resultados"></a>
Onde baixar SVG?

Recomendamos a utilização do site https://www.svgrepo.com, ele contém incríveis arquivos e não necessita de cadastro para fazer downloads.

Vale lembrar que alguns arquivos podem criar fontes distorcidas ou com partes faltando, para corrigir isso será necessário mesclar as partes do ícone em um software de edição de vetor, como o Inkscape. Esse problema pode acontecer com qualquer arquivo baixado de qualquer fonte.