Is there a way to directly load an SVG for a leaflet divIcon without having to import it through a js file?

Question

Is there a way to directly load an SVG for a leaflet divIcon without having to import it through a js file?

There is a sample Vue 2 project available at this GitHub repository

I am looking to integrate an SVG into a leaflet divIcon.

      const cloudIcon = L.divIcon({
        html: thecloud, // this.cloudSvg, // thecloud,
        className: 'my-custom-icons',
        iconSize: [size, size],
        iconAnchor: [size/2, size/2]
      })

In addition, I may need to make some modifications to the SVG, so having the actual SVG source is necessary.

I found that placing the SVG inside of a javascript file and importing it using:

import {thecloud} from './TheCloud';

yields the desired result:

https://i.sstatic.net/Ne9iM.png

I attempted the following approach as well:

  data() {
    return{
      cloudSvg: require('./TheCloud.svg')
    }
  },

However, this did not work as expected and produced this result instead:

https://i.sstatic.net/r1ZYD.png

Is there another way to achieve this without having to place the SVG source inside javascript files? It seems like there should be a simpler solution.

javascript vue.js svg vuejs2 leaflet

Answer 1

Answer №1

In my opinion, the most efficient approach is to utilize what I like to refer to as the fetch-method.

I have implemented the following changes:

relocated TheCloud.svg to the public/ directory.
utilized the fetch function to retrieve the svg source.

const response = await fetch( "/TheCloud.svg");
const source = await response.text();

While embedding SVGs within the code works satisfactorily for a limited number of SVGs, this method shines when there are numerous SVGs involved.

The repository has been updated with the implementation of the fetch-method.

Answer 2

In my opinion, the most efficient approach is to utilize what I like to refer to as the fetch-method.

I have implemented the following changes:

relocated TheCloud.svg to the public/ directory.
utilized the fetch function to retrieve the svg source.

const response = await fetch( "/TheCloud.svg");
const source = await response.text();

While embedding SVGs within the code works satisfactorily for a limited number of SVGs, this method shines when there are numerous SVGs involved.

The repository has been updated with the implementation of the fetch-method.

Answer 3

Answer №2

After some trial and error, I have managed to find a solution that works for me. However, I believe there is still room for improvement.

If you're interested in the changes I made, they can be found on the raw-loader branch of the project.

yarn add raw-loader
To configure the raw-loader, I created a vue.config.js file at the project's root with the following contents:

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('raw-loader')
      .test(/\.txt$/i)
      .use('raw-loader')
        .loader('raw-loader')
        .end()
  }
}

I updated my data() method as follows:

  data() {
    return{
      center: [37.781814, -122.404740],
      cloudSvg: require('./TheCloud.svg'),
      cloudSrc: require('./TheCloud.txt')
    }
  },

The addition of

cloudSrc: require('./TheCloud.txt')

was necessary to make it work correctly.

TheCloud.txt serves as a duplicate of TheCloud.svg, but with a different extension to ensure processing by the raw-loader.

I changed the implementation of divIcon to this:

      const cloudIcon = L.divIcon({
        html: this.cloudSrc.default,
        className: 'my-custom-icons',
        iconSize: [size, size],
        iconAnchor: [size/2, size/2]
      })

Although some parts of the process remain unclear to me, such as the need for .default and aspects of webpack configuration, the overall functionality has been successfully achieved.

Answer 4

After some trial and error, I have managed to find a solution that works for me. However, I believe there is still room for improvement.

If you're interested in the changes I made, they can be found on the raw-loader branch of the project.

yarn add raw-loader
To configure the raw-loader, I created a vue.config.js file at the project's root with the following contents:

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('raw-loader')
      .test(/\.txt$/i)
      .use('raw-loader')
        .loader('raw-loader')
        .end()
  }
}

I updated my data() method as follows:

  data() {
    return{
      center: [37.781814, -122.404740],
      cloudSvg: require('./TheCloud.svg'),
      cloudSrc: require('./TheCloud.txt')
    }
  },

The addition of

cloudSrc: require('./TheCloud.txt')

was necessary to make it work correctly.

TheCloud.txt serves as a duplicate of TheCloud.svg, but with a different extension to ensure processing by the raw-loader.

I changed the implementation of divIcon to this:

      const cloudIcon = L.divIcon({
        html: this.cloudSrc.default,
        className: 'my-custom-icons',
        iconSize: [size, size],
        iconAnchor: [size/2, size/2]
      })

Although some parts of the process remain unclear to me, such as the need for .default and aspects of webpack configuration, the overall functionality has been successfully achieved.

Is there a way to directly load an SVG for a leaflet divIcon without having to import it through a js file?

Answer №1

Answer №2

Similar questions

Firefox not rendering responsive YouTube embed properly

AngularJS continues to display an "Invalid Request" message whenever the requested resource is unavailable

Top strategy for monitoring a user's advancement in reading different text segments

How can we stop Vuetify from overwriting Bootstrap3's classes when using treeshaking?

When invoking a function using ng-init within ng-repeat, only the final item in the iteration yields a result

Tips for Utilizing Both getElementByID and getElementByTagName Functions in JavaScript

The jssor slider cannot be initialized when it is loaded through ajax requests

Combining Arrays in AngularJS with an owl-carousel Setting

Canvas with a button placed on top

Encountering difficulty inserting ajax response into a specific div element

Looking for a Communication Manager specifically designed for Vue components?

Create a specific part of a webpage that can be scrolled through

Using an array.map inside a stateless component with React.createElement: the type provided is invalid

How can the total price for a shopping cart be computed in React/Redux?

What are some effective strategies for enhancing the performance of React user interfaces?

Error in clientWidth measurement providing inaccurate width

React scroll not triggering class changes

Placing a component within a .jsx file instead of utilizing a .css file for positioning

What are the best practices for managing promises effectively?

Struggling to accurately convert the string into a date object