Div icons

A customisable icon using a single <div/> and CSS. For inspiration to style a single div, visit https://a.singlediv.com/

Styling

If custom styles are to be applied, it is best to use the JS attribute className by using the class-name equivalent HTML attribute.

.icon {
  border: none;
  border-radius: 1000px;
}

.pink {
  background-color: hotpink;
}

.blue {
  background-color: cadetblue;
}

Mark-up

The usual rules for converting from JS to HTML apply.

1
<l-map zoom="5" center="[45, 0]">
2
  <l-tile-layer
3
    url-template="https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png"
4
  ></l-tile-layer>
5
  <l-marker lat-lng="[45, 1]">
6
    <l-div-icon class-name="icon pink"></l-div-icon>
7
  </l-marker>
8
  <l-marker lat-lng="[45, -1]">
9
    <l-div-icon class-name="icon blue"></l-div-icon>
10
  </l-marker>
11
</l-map>

Line 6 and 9 above show how to use a div icon to create a pink and blue circle icon.

Conclusion

Div icons enable a front-end developer to craft amazing visualisations.