VueJS feat. Typescript — Implementando um componente de ícone altamente personalizável

Olá cabocos o/

Me chamo Igor Dantas, sou desenvolvedor e atualmente venho dedicando grande parte dos meus estudos no VueJs, esse incrível framework que vem conquistando o coração da comunidade front-end em todo o mundo.

Nesse artigo iremos implementar um componente de ícones altamente parametrizado, bastante simples e utilizando Typescript.

Mas primeiro…

… vamos criar um snippet no VSCode para facilitar a criação dos nossos class-style components.

Utilizando o comando CTRL + Shift + P, vamos acessar a opção Preferences: Configure User Snippets -> New Global Snippets File, e vamos criar um snippet para a sintaxe de classe dos componentes do VueJs:

Snippet do VSCode para criação de arquivos VueJs utilizando a sintaxe de classe

Agora podemos criar o nosso arquivo id-Icon.vue e digitar vue-typescript para montar o template do arquivo.

1 — Definindo a estratégia

Nós vamos utilizar uma css mask em cima de uma div com uma cor de fundo, dessa maneira vamos poder controlar tamanho, tipo e cor do ícone com bastante facilidade.

Como nosso arquivo está no momento

2 — Criando nossas propriedades

Vamos parametrizar nosso componente com três propriedades: o tamanho, a cor e o ícone, para isso utilizarmos o decorator Prop passando o tipo das propriedades e os valores padrões:

• Size do tipo String e com valor padrão 18px;
• Color do tipo String e com valor padrão red;
• Icon do tipo String e required true;

Muita atenção para não confundir os objetos Javascript com os tipos do Typescript.

3 — Parametrizando nossa DIV

Agora com nossas propriedades criadas vamos parametrizar a nossa div, utilizaremos o size para definir o width e o height, a propriedade color no background-color e a propriedade icon no mask-image. Além disso vamos criar uma pasta icons nos nossos assets para armazenar nossos arquivos.

Componente finalizado :)

4 — Finish ;)

Agora podemos instanciar nosso componente e criar ícones parametrizados

Como ficarão os ícones renderizados

Muito obrigado cabocos, qualquer dúvida estou a disposição

Grande abraço.