O elemento é fundamental para toda a ideia de um sistema de ícones SVG embutido. Aprendemos que uma maneira limpa de fazer isso é colocar tudo o que você pretende desenhar mais tarde em um bloco para que não seja renderizado e possamos referenciá-los mais tarde (diga a eles que o navegador deve desenhar esse ícone).
Neste vídeo, vamos gastar algum tempo construindo nosso próprio bloco manualmente. Não é particularmente difícil e, eu acho, deixa claro como tudo isso funciona.
Faremos isso em SVG, que encontramos em diferentes lugares da web. Pegamos um do The Noun Project, um do IcoMoon e um do Shutterstock. Fazemos nossa devida diligência para abrir o SVG, consertar quaisquer formas estranhas, ajustar o tamanho da tela e outros enfeites. Não há limite aqui de onde essas informações vetoriais podem vir. Essas três fontes são apenas para mostrar que o SVG pode vir de qualquer vetor.
Mais tarde, esperamos simplificar esse processo, mas entender os detalhes básicos de como ele funciona é sempre útil. Você nunca sabe quando precisará cavar mais fundo (por exemplo, para descobrir por que algo não está funcionando direito).