Tengo un proyecto de muestra de Vue 2 en https://github.com/ericg-vue-questions/leaflet-test

(3 preguntas en total)

(1)

¿Cómo puedo incluir el ícono svg directamente en lugar de transferir la definición a un archivo js e importarlo a través de:

 import {thecloud} from './TheCloud';

Lo intenté:

 const thecloud = require( './TheCloud.svg' );

Pero eso no funcionó.

¿Es eso posible? ¿Si es así, cómo?

(2)

¿Cómo puedo controlar el tamaño del icono?

Lo que he probado es:

 const size = 20; const cloudIcon = L.divIcon({ html: thecloud, className: 'my-custom-icons', iconSize: [size, size], iconAnchor: [size/2, size/2] }) L.marker( from, { icon: cloudIcon} ).addTo( mapDiv );

donde la sección de estilo se ve así:

 <style scoped> #mapContainer { width: 500px; height: 500px; } </style> <style> .my-custom-icons { background-color: red; } </style>

Lo que obtengo es:

El div aparece en el lugar correcto y tiene el tamaño correcto. Esperaba que el ícono svg apareciera dentro del div y estuviera limitado por él, pero eso no sucedió.

¿Por qué? ¿Qué debo hacer para arreglar esto?

(3)

En relación con el n. ° 2, me gustaría que la sección de estilo se vea así:

 <style scoped> #mapContainer { width: 500px; height: 500px; } .my-custom-icons { background-color: red; } </style>

Pero cuando coloco my-custom-icons dentro de la sección del ámbito de los componentes, el divIcon no puede encontrarlo.

¿Puedo organizar mi sección de estilo así? ¿Si es así, cómo?

Gracias.