Caso você já esteja com o VUE3 instalado, [ clique aqui ]você pode pular alguns tópicos e ir direto ao tópico, que trata da criação do Componente Icon SVG Button Dinâmico Reutilizável.
Caso você não tenha o VUE3 instalado, ou deseja ir junto conosco no passo a passo, não pule nenhuma etapa.
Instalação do VUE3 para Criação do Componente icon SVG Button Dinâmico Reutilizável
Para a instalação do VUE3, utilizaremos o vue-create, lembrando que para isso será necessário ter o vue-cli instalado em seu computador.
Instalando o VUE3, execute o comando abaixo em seu terminal:
vue create criar-componente-icon-button-dinamico-reutilizavel
Agora o vue-cli colocará algumas opções de instalação. No nosso caso, utilizaremos a versão 3 do Vue, babel e eslint
Prosseguindo com a instalação do vue, escolha a opção [vue 3], que no caso é a estável mais recente.
Pronto, o VUE3 esta instalado em sua máquina. Ao final da instalação podemos ver duas linhas de cor azul. Estas linhas nos orientam a:
- entrar na pasta onde o vue3 foi instalado, no caso a pasta “criar-componente-icon-button-dinamico-reutilizavel“
- rodar o servidor npm
cd criar-componente-icon-button-dinamico-reutilizavel
Dentro da pasta criar-componente-icon-button-dinamico-reutilizavel
npm run serve
Após rodado o comando npm run serve, termos o seguinte resultado, onde na tela veremos a url “http://localhost:8080” de acesso ao projeto vue
Pronto, o VUE3 esta instalado e o servidor já rodando. E para acessar no seu browser (navegador), digite a url abaixo, para acesso ao seu projeto vue3
http://localhost:8080/
Criar Componente Icon SVG Button Dinâmico Reutilizável para VUE3 no VSCode
O VUE3 esta instalado e rodando tudo certinho, vamos partir para a criação do componente reutilizável vue. Para tal, vamos abrir o VSCode, com o comando abaixo:
code .Com o seu VSCode aberto, vamos aproveitar para criar dentro da pasta src/components o arquivo DinamicButtom.vue.
Dentro do arquivo “DinamicButtom.vue” iremos colocar os comandos para que nosso Componente Icon SVG Button Dinâmico Reutilizável funcione corretamente.
Dentro do arquivo “src/components/DinamicButtom.vue” podemos colocar o seguinte código:
Abaixo nós temos as seguintes questões:
- a tag <template> onde colocamos nosso html
- dentro da tag template temos 02 tags <span>, sendo a primeira para desenhar o botão e segunda para desenhar o conteúdo do botão
- logo abaixo temos a tag <script>, onde colocamos os comandos VUE
Inserir o Botão com Ícone via Componente Dinâmico Reutilizável
Agora abra o arquivo “src/app.vue”
Com o arquivo src/app.vue aberto, vamos substituir o conteúdo por este abaixo. Onde, por vias da tag <DinamicButtom>, já estaremos colocando nosso componente dinâmico para trabalhar.
Um passo importante foi dado e já temos nosso botão na tela. O Botão ainda não possui o Ícone, mas já é renderizado via Componente VUE3 Dinâmico Reutilizável <DinamicButtom>, ou seja, podemos repetir o mesmo componente em outros lugares do código ou outros arquivos, que tudo irá funcionar conforme esperado.
Inserir o ícone no botão, via arquivo SVG
Agora vamos adicionar o ícone ao componente VUE <DinamicButtom>. Mas para termos o máximo de dinâmica em nosso projeto, vamos utilizar um arquivo vetorial do tipo SVG.
Mas qual a vantagem de utilizar o SVG?
A resposta é simples, por ser um arquivo vetorial, o arquivo de imagem em SVG nos possibilita trabalhar com cores diferentes e também com tamanhos variados, tanto para imagens maiores quanto para uma imagem menor, se distorcer ou perder a qualidade da imagem.
Onde eu consigo meu arquivo SVG?
Nós converteremos um arquivo PNG em SVG, então clique aqui e baixe esse arquivo.[ Baixar arquivo ]
Você irá reparar que se trata de um arquivo PNG, mas é isso mesmo, esta correto, pois nós o transformaremos em um arquivo SVG.
Transformar seu PNG em SVG
Agora clique aqui (https://convertio.co/pt/png-svg/) para que você abrir a ferramenta de conversão de arquivos PNG em SVG
O arquivo SVG pode ser obtido por meio da transformação de um arquivo PNG de sua preferência.
Após convertido, você salve o arquivo SVG na pasta assets/svg. Caso você não tenha a pasta, crie-a.
Pronto. Já temos nosso arquivo SVG e vamos usá-lo como ícone em nosso componente
Com seu arquivo SVG dentro da pasta correta na estrutura de seu projeto VUE, agora iremos partir para usá-lo como ícone. Você verá a mágica acontecer.
Abra novamente seu arquivo “components/DinamicButtom.vue” e insira os códigos abaixo. Lembrando que agora já estaremos colocando mais dinâmica e mais estilo ao arquivo.
Copie e cole o código-fonte abaixo para o arquivo components/DinamicButtom.vue
Agora já temos o componente vue3 de nosso botão com o ícone dinâmico pronto, como com várias outas variáveis dinâmicas, tornando a sua reutilização ainda mais clara e tranquila.
Agora abra o arquivo App.vue
Dentro do arquivo “App.vue”, iremos implementar pouca coisa, a ideia do uso de componentes no vue é deixar o código mais clean possível.
Contudo, como a ideia desse artigo sobre criação de componentes VUE é a didática, nós colocamos alguns exemplos de funcionamento do componente, variando suas cores e texto.
Copie e cole o código-fonte abaixo para o arquivo App.vue
Perceba que para mudar a cor do ícone , basta mudar o paramento “bgColor” e para mudar o conteúdo de texto do botão, também se mostrou muito simples.
<DinamicButtom icon="logo-conteudo-pertinente" bgColor="silver"> Icon Verde</DinamicButtom>Tudo pronto
Agora esta tudo pronto, você pode conferir o resultado de como ficaram os botões, com todas as variações de cores que pudemos mostrar. O print de tela do projeto mostrou como Criar Componente VUE3 Icon Button Dinâmico Reutilizável, espero que tenha gostado.
Print de tela do resultado.
