0
139
ViewsHow can I load a SVG directly instead of importing via a js file for use in a leaflet divIcon?
I have a Vue 2 sample project at https://github.com/ericg-vue-questions/leaflet-test
I need to use this SVG inside of a leaflet divIcon.
const cloudIcon = L.divIcon({
html: thecloud, // this.cloudSvg, // thecloud,
className: 'my-custom-icons',
iconSize: [size, size],
iconAnchor: [size/2, size/2]
})
Additionally, I may need to make some modifications to the SVG, so I need the actual SVG source.
What does work is placing the SVG source inside of a javascript file and importing it by doing:
import {thecloud} from './TheCloud';
and I see:
I did try:
data() {
return{
cloudSvg: require('./TheCloud.svg')
}
},
But that did not work and I see:
Is there a way to do this? I would like to avoid the extra step of placing the SVG source inside of javascript files. It seems like this should be unnecessary.
1 answers
Answer question0
I found one method that is working, but I am sure there are ways to improve it.
The following changes are on the raw-loader branch.
yarn add raw-loader- create a
vue.config.jsfile at the root of the project with the following contents to configure theraw-loader.
module.exports = {
chainWebpack: config => {
config.module
.rule('raw-loader')
.test(/\.txt$/i)
.use('raw-loader')
.loader('raw-loader')
.end()
}
}
- Changed my
data()method to:
data() {
return{
center: [37.781814, -122.404740],
cloudSvg: require('./TheCloud.svg'),
cloudSrc: require('./TheCloud.txt')
}
},
adding cloudSrc: require('./TheCloud.txt').
TheCloud.txt is a duplicate of TheCloud.svg, but with a different extension so the raw-loader will process it.
- Change the usage of
divIconto:
const cloudIcon = L.divIcon({
html: this.cloudSrc.default, // thecloud, // this.cloudSvg, // thecloud,
className: 'my-custom-icons',
iconSize: [size, size],
iconAnchor: [size/2, size/2]
})
I cannot say I understand everything going on here, like why I need the .default part or the webpack configuration section, but this is working.