Así que estoy tratando de importar SVG como cadena en mi componente Vue usando la importación en línea en Vite de la siguiente manera
<script> const getSvgIcon = async (name) => { const module = await import(`../icons/${name}.svg?raw`) return module.default } export default { props: { name: String, }, data() { return { svg: null, } }, watch: { name: { async handler(name) { this.svg = await getSvgIcon(name) }, immediate: true, }, }, } </script> <template> <div v-html="svg"></div> </template> Esto funciona bien cuando se ejecuta en modo npm run dev .
Sin embargo, el problema ocurre cuando npm run build , termino obteniendo Error: Unknown variable dynamic import aparentemente porque estoy usando el sufijo ?raw .
¿Hay una solución o es una desventaja de Vite a partir de ahora?
Como comentó @ tony19, probablemente se trate de un error. Abrí un tema que puedes seguir aquí .
Sin embargo, como una solución para que su código funcione, siga a continuación:
Convierta todos sus SVG en componentes Vue. De esa manera, usted puede tener una mejor gestión. Para hacer eso, simplemente edite el nombre del archivo reemplazando de .svg a .vue y envolviendo el contenido dentro de la etiqueta de la template .
Sin embargo, si desea conservar archivos svg , puede usar el complemento vite-svg-loader y con esto, podrá hacer:
import IconComponent from './my-icon.svg?component'
Cree un componente de icono SVG:
<script> import { defineAsyncComponent } from 'vue'; export default { props: { name: { type: String, required: true, }, }, computed: { dynamicComponent() { const name = this.name; return defineAsyncComponent(() => import(`./icons/${name}.vue`)); }, }, }; </script> <template> <component :is="dynamicComponent" /> </template> Ahora puede importar SvgIcon.vue y usar el nombre del icono SVG así:
<script> import SvgIcon from './components/SvgIcon.vue' export default { components: { SvgIcon } } </script> <template> <SvgIcon name="user" /> </template>Si te gusta el enfoque anterior, recientemente escribí un artículo al respecto: