🧩 LIcon

Easy and reactive way to configure the icon of a marker

🧪 Demo

<script setup lang="ts">
import { LIcon, LMap, LMarker, LTileLayer } from '@maxel01/vue-leaflet'
import { computed, ref } from 'vue'
import type { PointExpression } from 'leaflet'

const iconWidth = ref<number>(21)
const iconHeight = ref<number>(42)

function changeIcon() {
    iconWidth.value += 1
    if (iconWidth.value > iconHeight.value) {
        iconWidth.value = Math.floor(iconHeight.value / 2)
    }
}

const iconUrl = computed(() => {
    return `https://placebear.com/${iconWidth.value}/${iconHeight.value}`
})
const iconSize = computed((): PointExpression => {
    return [iconWidth.value, iconHeight.value]
})
</script>

<template>
    <div style="width: 100%; height: 100%">
        <LMap :zoom="8" :center="[47.41322, -1.219482]">
            <LTileLayer
                url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                layer-type="base"
                name="OpenStreetMap"
            />

            <LMarker :lat-lng="[47.41322, -1.219482]">
                <LIcon :iconUrl="iconUrl" :iconSize="iconSize" />
            </LMarker>
            <LMarker :lat-lng="[47.41323, -1.219482]"/>

            <LMarker :lat-lng="[47.61322, -0.519482]">
                <LIcon :iconSize="[21, 21]">★</LIcon>
            </LMarker>
            <LMarker :lat-lng="[47.61322, -0.519482]"/>

            <LMarker :lat-lng="[47, -1]">
                <LIcon className="">Hello, Map!</LIcon>
            </LMarker>
            <LMarker :lat-lng="[47, -1]"/>
        </LMap>

        <button class="bearBtn" @click="changeIcon">New bear icon</button>
    </div>
</template>

<style>
.leaflet-div-icon {
    background: steelblue;
    color: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    font-weight: bold;
    font-size: large;
    text-align: center;
    line-height: 21px;
}

.bearBtn {
    border: 1px solid;
}
</style>

⚙️ Props

Prop name	Description	Type	Reactive	Default	Required
iconUrl	The URL to the icon image (absolute or relative to your script path).	string	true	-	false
iconRetinaUrl	The URL to a retina sized version of the icon image (absolute or relative to your script path). Used for Retina screen devices.	string	true	-	false
iconSize	Size of the icon image in pixels.	PointExpression	true	-	false
iconAnchor	The coordinates of the "tip" of the icon (relative to its top left corner). The icon will be aligned so that this point is at the marker's geographical location. Centered by default if size is specified, also can be set in CSS with negative margins.	PointExpression	true	-	false
popupAnchor	The coordinates of the point from which popups will "open", relative to the icon anchor	PointExpression	true	-	false
tooltipAnchor	The coordinates of the point from which tooltips will "open", relative to the icon anchor	PointExpression	true	-	false
shadowUrl	The URL to the icon shadow image. If not specified, no shadow image will be created	string	true	-	false
shadowRetinaUrl	-	string	true	-	false
shadowSize	Size of the shadow image in pixels	PointExpression	initOnly	-	false
shadowAnchor	The coordinates of the "tip" of the shadow (relative to its top left corner) (the same as iconAnchor if not specified)	PointExpression	true	-	false
bgPos	-	PointExpression	true	-	false
className	A custom class name to assign to both icon and shadow images. Empty by default.	string	true	-	false

🔗 Inherited props

from ComponentProps

Prop name	Description	Type	Reactive	Default	Required
options	Leaflet options to pass to the component constructor.	T	initOnly	-	false

🎯 Slots

Name	Description
default	Slot content will be rendered inside the Leaflet icon container. Use this slot to inject custom HTML or Vue components into the icon, such as labels, SVGs, or interactive elements.

🧭 Exposes

Name	Type	Description
root	Ref<HTMLElement | undefined>	The root DOM element.