[AJUDA] - Por que o mesmo svg aparece se estou importando svgs diferentes?
Estou usando Laravel, Vite e Vue. Os três SVGs são diferentes, porém aparece nos três o mesmo SVG o de suporte. O que estou fazendo errado?
Segue uma imagem para demostrar: https://i.ibb.co/z6HyVH3/image.png
Segue uma parte do código:
import SupportIcon from '/public/icons/ProfilePage/support.svg?component'
import MessageIcon from '/public/icons/ProfilePage/message.svg?component'
import DataIcon from '/public/icons/ProfilePage/data.svg?component'
<SupportIcon class="w-7 h-7" />
<MessageIcon class="w-7 h-7" />
<DataIcon class="w-7 h-7" />
vite.config.js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';
import svgLoader from 'vite-svg-loader';
import path from 'path';
export default defineConfig({
plugins: [
laravel({
input: ['resources/css/app.css', 'resources/js/app.js'],
refresh: true,
}),
vue(),
svgLoader()
],
resolve: {
alias: {
'vue': "vue/dist/vue.esm-bundler.js",
'@': path.resolve(__dirname, 'resources/js'),
},
}
});
Olá Gaimo
O link da imagem que vc forneceu não esta funcionando
Normalmente as imagens, fonts, css, etc devem ficar na pasta resources.
Encontrei esse artigo e tbm fiz testes em um projeto que tinha em minha maquina, na mesma stack sua e deu certo
Ficaria algo como abaixo:
import SupportIcon from '/resources/support.svg?raw' // ajustar import's conforme seu projeto
import MessageIcon from '/resources/message.svg?raw'
import DataIcon from '/resources/data.svg?raw'
<div class="svg-image" v-html="SupportIcon"></div>
<div class="svg-image2" v-html="MessageIcon"></div>
<div class="svg-image3" v-html="DataIcon"></div>