Estoy tratando de crear un complemento para Vite.js y Vue.js 2.7.x para importar archivos SVG en mi proyecto. Quiero que Vite los importe como componentes .vue y no como activos estáticos. El complemento Vite existente ( vite-svg-loader ) no es compatible con Vue.js 2.xx
My Component.vue importa y utiliza un archivo SVG de la siguiente manera:
<template> <div> <my-icon/> </div> </template> <script> import MyIcon from "@some_path/my-icon.svg"; export default { components: { MyIcon } }; </script>El complemento My Vite actualmente contiene este código:
function svgLoader() { return { name: "svg-loader", load: function(id) { console.log(id); /* Some logic here to convert SVGs into Vue components */ } } } console.log(id) produce rutas a archivos html , scss , vue y js únicamente. Creo que Vite trata los archivos SVG como activos estáticos, simplemente los copia en la carpeta de assets de la siguiente manera: assets/my-icon.7f263221.svg . ¿Qué puedo hacer para obtener archivos SVG en mi función de load ?