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?
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" />
Esse método é bom. Quero implementar algo assim.
Vou continuar pesquisando.
Se tiver dicas ou documentação manda ae. Obrigado pelo comentário.
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/
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>