Icônico-SVG

Mario Souto Silva

Desenvolvedor Front end

mariosouto.com / @soutomario

Já salvei a princesa

Como deixar isso mais simples?

"Acho que tem uma interface nesses ícones"

Vamos lá, baby-metas

"Ícones são uma representação gráfica"

Logo... ícones podem ser imagens


	
	
	
	

???????


.icon_img { transition: .5s ease-in-out; }
.icon_config:hover {
  background-image: url('./img/experiment/icon_config_azul.png');
}
.icon_dashboard:hover {
  background-image: url('./img/experiment/icon_dashboard_azul.png');
}

Ícones são simbolos

[email protected]#$%¨&*()

(Isso não é um palavrão mas pode ser)

.icone-simbolico { color: black; }
.icone-simbolico:hover { color: orange; }

Font-icons


.font-icon {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
\f09a

Um Font-icon só tem uma cor

Como pintar um ícone com duas cores?

SVG

O que é? Onde vive? Qual a compatibilidade? Hoje no Meetup de CSS

Resolvendo nosso problema


	
	

Compabitilidade

Animando

E se eu quiser ver meu gráfico de acessos em tempo real?

Desenhando

12345678910111213141516171819202122232425262728293031130010407805202600Search enginesDirect RequestLinks to websites

Onde estão todos esses ícones?

  • E se eu precisar reutilizar esses ícones?

  • DRY

    Don't Repeat Yourself

    Lindo, mas como não repetir ícones?

    CSS-Sprites

    social-network-sprite.png

    Tudo são coordenadas

    Font-icons

    .icone-facebook:before {
      font: normal normal normal 14px/1 FontAwesome;
      content: "\f09a"; // WHAAT?
    }

    https://icomoon.io/app/

    Seleciono SVGs extras

    Arrasto eles para a plataforma

    Cara, tu já gerou os SVGs porque complicar a vida?

    Imagina se...

    Biblioteca de Symbols

    SVG Puro

    
       
       
    

    Dois SVGs Puros

    
       
       
    
    
       
       
    

    E se eu agrupasse eles?

    SVG Megazord

    
       
       
     
       
       
    

    Vamos organizar isso

    
      
         
         
      
      
         
         
      
    

    Cada "svg" interno de abertura e fechamento, agora é um "symbol"

    
       
         
         
      
       
         
         
      
    

    Symbol

    
      
    
    
      
    

    Symbol

    
      
      
      
    

    Symbol

    
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
    

    Vai querer fazer isso na mão?

    Iconico SVG

    npm install

    gulp

    Entendendo na prática

    "Como programadores, quanto mais próximo nossas soluções estiverem de código melhor vai ser."

    Na vida, Alguém

    Obrigado!

    https://goo.gl/7klWob