Geomicons - um único conjunto de ícones SVG com código de mão

Iconsets da Web estão rapidamente se tornando a norma para o design moderno da web. Eles são ativos enormes para web designers como estes ícones podem ser personalizados através de CSS e redimensionado sem qualquer perda de qualidade.

Mas alguns pacotes de ícones podem parecer inchados e grandes demais para sites menores. É aí que a Geomicons realmente brilha.

Isto é um pacote de ícones personalizado codificado manualmente em execução no SVG. Você pode incorporar os ícones por meio de scripts JS ou como arquivos SVG diretos na sua página. De qualquer maneira, eles são vetores bonitos e super fáceis de restyle.

A página principal do Geomicons apresenta uma demonstração completa de todos os ícones. Eles são muito simples e seguem o estilo tradicional de design plano de uma cor que todos nós conhecemos.

Mas suas informações de configuração certamente estão faltando na página de demonstração. Se você quiser aprender como configurar isso, precisará visitar o repositório do GitHub para obter instruções.

Por padrão, isso biblioteca assume que você está trabalhando com CSS / JS para que esses ícones sejam incorporados diretamente nos elementos da página. No entanto, quando você faz o download dos ícones do GitHub, obtém todos os arquivos SVG brutos que você pode adicionar diretamente ao HTML.

O único problema é que SVGs brutos exigem mais edição para alterar as cores, enquanto a rota JS / CSS fornece controle sobre cores por meio do código.

Basta adicionar o geomicons.min.js script em seu cabeçalho e passar o ícone de dados atributo em elementos HTML. Estes irão incorporar ícones que você pode manipular usando classes CSS.

Outra coisa que eu realmente gosto sobre o Geomicons é o suporte para o Node. Aqui está um trecho de amostra do repositório do GitHub:

var geomicons = require ('geomicons-open'); var pathData = geomicons.paths.heart; // Retorna o valor do atributo d do caminho var svgString = geomicons.toString ('heart'); // Retorna uma string SVG

Se você não estiver familiarizado com o Node, provavelmente nunca precisará usar nenhum dos trechos do Node. O mesmo vale para a versão React.js desses ícones.

Ainda ter apoio para os principais quadros é um grande negócio. É mais uma prova de que os Geomicons são feitos para apoiar qualquer tipo de site concentrando-se no desempenho primeiro.

Para dar a estes ícones um teste você pode puxar uma cópia através do npm ou baixá-los diretamente via GitHub.

Há também um iconset chamado Geomicons Wired que você pode querer testar também.

De qualquer forma, esta é uma iconset brilhante para web designers minimalistas. Uma escolha perfeita para otimizar seu site com belos ícones enquanto diminui o tempo total de carregamento da página.