[DÚVIDA] - SVG em VUEJS 3

Fala pessoal!

Estou precisando adicionar em um projeto vue imagens em formato SVG.

Qual é a melhor forma de adicionar SVG em projetos VUEJS 3?

Vi esse processo na documentação:

https://br.vuejs.org/v2/cookbook/editable-svg-icons.html

onde é criado por meio de um componente um sistema para adicionar os SVG.

O que vocês sugerem? O que estão fazendo em seus projetos vue3?

guiliznashá 2 anos

O que fazemos por aqui: temos uma pasta onde criamos os ícones SVG como componentes em SFC. Com isso, temos um componente que importa eles dinamicamente e utiliza conforme as propriedades. No final, basta chamar sempre o mesmo componente e passar um parâmetro para usar qualquer um. Ex: <icon name="check" />

devserafimhá 2 anos
Esse método é bom. Quero implementar algo assim. Vou continuar pesquisando. Se tiver dicas ou documentação manda ae. Obrigado pelo comentário.
guiliznashá 2 anos
Não lembro se foi exatamente esse link que usamos de referência, mas ali tem a ideia geral: https://jessarcher.com/articles/creating-an-icon-component-in-vue/
pedrocamafortehá 2 anos

Qual seu objetivo?

Imagens em formato SVG são apenas imagens comuns. Você pode adicioná-las na sua pasta assets/img/ e chamar elas normalmente no src de uma imagem.

Agora, se quiser implementar ícones na sua aplicação, recomendo usar alguma biblioteca, como o fontawesome. Lá tem muitos ícones gratuitos bem legais e diversificados. Eles tem suporte para Vue e funcionam perfeitamente.

Recomendo você pesquisar no youtube o processo certinho para implementar no seu projeto, mas aqui vai um passo a passo rápido:

Instale esses 3 pacotes usando npm install @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/vue-fontawesome

No seu arquivo main.js ou main.ts, adicione isso:

import { library } from "@fortawesome/fontawesome-svg-core"
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome"

Depois, basta importar os ícones que você quer usar e adicioná-los à library que acabamos de importar:

import {
    faMagnifyingGlass,
    faEdit,
    faTimesCircle,
    faUserCircle
} from "@fortawesome/free-solid-svg-icons"
    
library.add(
    faMagnifyingGlass,
    faEdit,
    faTimesCircle,
    faUserCircle
)

Ao criar o app, registre um componente para os ícones: const app = createApp(App) app.component('icon', FontAwesomeIcon)

Depois, é só usar! <icon icon="user-circle"></icon>