0
128
Vistas¿Cómo puedo cargar un SVG directamente en lugar de importarlo a través de un archivo js para usarlo en un folleto divIcon?
Tengo un proyecto de muestra de Vue 2 en https://github.com/ericg-vue-questions/leaflet-test
Necesito usar este SVG dentro de un folleto divIcon .
const cloudIcon = L.divIcon({ html: thecloud, // this.cloudSvg, // thecloud, className: 'my-custom-icons', iconSize: [size, size], iconAnchor: [size/2, size/2] })Además, es posible que deba realizar algunas modificaciones en el SVG, por lo que necesito la fuente SVG real.
Lo que funciona es colocar la fuente SVG dentro de un archivo javascript e importarlo haciendo:
import {thecloud} from './TheCloud';y veo:
Lo intenté:
data() { return{ cloudSvg: require('./TheCloud.svg') } },Pero eso no funcionó y veo:
¿Hay alguna forma de hacer esto? Me gustaría evitar el paso adicional de colocar la fuente SVG dentro de los archivos javascript. Parece que esto debería ser innecesario.
1 Respuestas
Responde la pregunta0
Encontré un método que funciona, pero estoy seguro de que hay formas de mejorarlo.
Los siguientes cambios están en la rama raw-loader .
-
yarn add raw-loader - cree un archivo
vue.config.jsen la raíz del proyecto con los siguientes contenidos para configurar elraw-loader.
module.exports = { chainWebpack: config => { config.module .rule('raw-loader') .test(/\.txt$/i) .use('raw-loader') .loader('raw-loader') .end() } }- Cambié mi método
data()a:
data() { return{ center: [37.781814, -122.404740], cloudSvg: require('./TheCloud.svg'), cloudSrc: require('./TheCloud.txt') } }, agregando cloudSrc: require('./TheCloud.txt') .
TheCloud.txt es un duplicado de TheCloud.svg , pero con una extensión diferente para que el raw-loader sin formato lo procese.
- Cambie el uso de
divIcona:
const cloudIcon = L.divIcon({ html: this.cloudSrc.default, // thecloud, // this.cloudSvg, // thecloud, className: 'my-custom-icons', iconSize: [size, size], iconAnchor: [size/2, size/2] }) No puedo decir que entiendo todo lo que sucede aquí, como por qué necesito la parte .default o la sección de configuración del paquete web, pero esto está funcionando.