I have a Vue 2 sample project at https://github.com/ericg-vue-questions/leaflet-test

(3 questions total)

(1)

How can I include the svg icon directly instead of transferring the definition to a js file and importing via:

import {thecloud} from './TheCloud';

I did try:

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

But that did not work.

Is that possible? If so, how?

(2)

How can I control the size of the icon?

What I have tried is:

      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 );

where the style section looks like:

<style scoped>
  #mapContainer {
    width: 500px;
    height: 500px;
  }
</style>

<style>
  .my-custom-icons {
    background-color: red;
  }
</style>

What I get is:

The div is appearing in the correct spot and is sized correctly. I expected the svg icon to appear inside of the div and be constrained by it, but that did not happen.

Why? What do I need to do to fix this?

(3)

Related to #2, I would like the style section to look like:

<style scoped>
  #mapContainer {
    width: 500px;
    height: 500px;
  }

  .my-custom-icons {
    background-color: red;
  }
</style>

But when I place my-custom-icons inside of the components scoped section, the divIcon cannot find it.

Can I organize my style section like this? If so, how?

Thank you.