Sprites em SVG

Os sprites SVG permitem que você use rapidamente ícones vetoriais em seu site. Confira esta página para saber mais sobre os sprites SVG e como usá-los com o Flaticon.

Recursos

  • 1. Alta resolução

    SVGs são redimensionáveis e prontos para a tela de retina. Perfeitos para um design responsivo. Eles ficam bem em telas de qualquer resolução.

  • 2. Rápido e fácil

    Criar fontes de ícones com o Flaticon está mais fácil do que nunca. Adicione ícones às suas coleções e baixe-as em segundos.

  • 3. Total controle CSS

    Os SVGs são facilmente personalizáveis ​​com CSS e têm regras específicas para alterar sua aparência.

  • 4. Acessível

    O Flaticon nomeia SVGs usando termos comuns para ajudar os leitores de tela a entenderem seus significados ;-)

  • 5. Animáveis

    As transições e animações em CSS são totalmente compatíveis com os sprites em SVG.

  • 6. Organizado

    Chega de montes de imagens ou sprites PNG incômodos. Pare de desperdiçar seu tempo!

In we icons

<svg>
<use xmlns:xlink "http://www.w3.org/1999/xlink" xlink:href "#icon-search"</use>
</svg>

Just one file load. (~30kb)
.svg

Como usar sprites em SVG com o Flaticon

Tutorial de Sprites em SVG (Parte 1)

1. Prepare sua coleção

Adicionar ícones à coleção de seu site

2. Baixar sprite

Abra sua coleção e aperte o botão Baixar Coleção, depois selecione o sprite em SVG

Tutorial de sprites SVG - Parte 2
Tutorial de sprites SVG - Parte 3

3. Copiar para sua pasta

Copie o arquivo de origem para sua pasta da web.

4. Carregar sprite

Insira o conteúdo de seu Sprite em SVG em seu código HTML.

Tutorial de sprites SVG - Parte 4
Sprites em SVG (Parte 5)

5. Use as IDs

Use o ID de cada ícone para que eles apareçam no seu site. Depois disso, personalize-os com CSS..

Exemplo de uso: <svg>
<use xlink:href="#icon-search"></use>
</svg>
  • Apresentando as coleções

    As coleções são a essência do nosso aplicativo da web. Você quer saber como usá-las? Pressione "Próximo" para conferir o guia.

    1 de 9
  • Lista de coleção

    Lista de coleção

    Esta é uma lista das suas coleções. Você pode mudar o nome delas e elas estarão organizadas pelo uso. Clique em uma delas para começar a usar.

    2 de 9
  • Crie uma coleção

    Crie uma coleção

    Clique neste botão para criar uma coleção.

    3 de 9
  • Mude o nome

    Mude o nome

    Clique aqui para mudar o nome da coleção

    4 de 9
  • Ative a coleção

    Ative a coleção

    Esta é sua coleção ativa. Uma coleção pode ter até 256 ícones se você for um usuário registrado, ou 50 se você não for registrado.

    5 de 9
  • Cor

    Cor

    Acrescente cor a todos os ícones em sua coleção.

    6 de 9
  • Modo de edição

    Modo de edição

    Entre no modo de edição por clicar no ícone do lápis para editar o nome e a cor de cada ícone separadamente.

    7 de 9
  • Deletar

    Deletar

    Você não usa mais esta coleção? Delete-a e crie uma nova aqui.

    8 de 9
  • Aproveite!

    E isso é tudo. Se você tiver alguma pergunta pode contatar nossa equipe de suporte aqui.


    Obrigado por usar o Flaticon, esperamos que você aproveite o nosso serviço

    9 de 9
-
Você gosta do nosso serviço?