coryasilva / Leaflet.ExtraMarkers

Custom Markers for Leaflet JS based on Awesome Markers
MIT License
331 stars 125 forks source link

FontAwsome svg used even when option set to false #49

Closed dudek-marcin closed 4 years ago

dudek-marcin commented 4 years ago

Hello, Thank you for the library, I really like it, but I have performance issues and tried not to use svg. I use FontAwsome with "svg" set to false. Although icons are still generated as svgs.

This is my icon var icn = L.ExtraMarkers.icon({ icon: 'fas fa-home', markerColor: 'blue', shape: 'square', prefix: 'fa', svg: false });

and this results in:

<svg style="color: #fff;" class="svg-inline--fa fa-home fa-w-18" aria-hidden="true" data-prefix="fas" data-icon="home" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" data-fa-i2svg=""><path fill="currentColor" d="M488 312.7V456c0 13.3-10.7 24-24 24H348c-6.6 0-12-5.4-12-12V356c0-6.6-5.4-12-12-12h-72c-6.6 0-12 5.4-12 12v112c0 6.6-5.4 12-12 12H112c-13.3 0-24-10.7-24-24V312.7c0-3.6 1.6-7 4.4-9.3l188-154.8c4.4-3.6 10.8-3.6 15.3 0l188 154.8c2.7 2.3 4.3 5.7 4.3 9.3zm83.6-60.9L488 182.9V44.4c0-6.6-5.4-12-12-12h-56c-6.6 0-12 5.4-12 12V117l-89.5-73.7c-17.7-14.6-43.3-14.6-61 0L4.4 251.8c-5.1 4.2-5.8 11.8-1.6 16.9l25.5 31c4.2 5.1 11.8 5.8 16.9 1.6l235.2-193.7c4.4-3.6 10.8-3.6 15.3 0l235.2 193.7c5.1 4.2 12.7 3.5 16.9-1.6l25.5-31c4.2-5.2 3.4-12.7-1.7-16.9z"></path></svg><!-- <i style="color: #fff;" class="fa fas fa-home "></i> -->

Is it a bug or this library always generates svgs?

coryasilva commented 4 years ago

Sounds like a bug, what version are you using?

dudek-marcin commented 4 years ago

I am using the newest available in dist folder (1.2.1) with the newest FontAwsome free (5.13.0)

dudek-marcin commented 4 years ago

Interesting, there is <i> icon below svg, but its commented. <!-- <i style="color: #fff;" class="fa fas fa-home "></i> -->

Full div:

<div class="leaflet-marker-icon extra-marker extra-marker-square-blue leaflet-zoom-animated leaflet-interactive" style="margin-left: -17px; margin-top: -42px; width: 35px; height: 45px; transform: translate3d(1523px, 188px, 0px); z-index: 188; opacity: 1; outline: currentcolor none medium;" tabindex="0"><svg style="color: #fff;" class="svg-inline--fa fa-home fa-w-18" aria-hidden="true" data-prefix="fas" data-icon="home" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" data-fa-i2svg=""><path fill="currentColor" d="M488 312.7V456c0 13.3-10.7 24-24 24H348c-6.6 0-12-5.4-12-12V356c0-6.6-5.4-12-12-12h-72c-6.6 0-12 5.4-12 12v112c0 6.6-5.4 12-12 12H112c-13.3 0-24-10.7-24-24V312.7c0-3.6 1.6-7 4.4-9.3l188-154.8c4.4-3.6 10.8-3.6 15.3 0l188 154.8c2.7 2.3 4.3 5.7 4.3 9.3zm83.6-60.9L488 182.9V44.4c0-6.6-5.4-12-12-12h-56c-6.6 0-12 5.4-12 12V117l-89.5-73.7c-17.7-14.6-43.3-14.6-61 0L4.4 251.8c-5.1 4.2-5.8 11.8-1.6 16.9l25.5 31c4.2 5.1 11.8 5.8 16.9 1.6l235.2-193.7c4.4-3.6 10.8-3.6 15.3 0l235.2 193.7c5.1 4.2 12.7 3.5 16.9-1.6l25.5-31c4.2-5.2 3.4-12.7-1.7-16.9z"></path></svg>
<!-- <i style="color: #fff;" class="fa fas fa-home "></i> --></div>

Seems like it might be fontawsome library thing https://stackoverflow.com/questions/49983637/prevent-svg-translation-of-fontawesome

coryasilva commented 4 years ago

Thanks for the follow up comments showing the solution.

dudek-marcin commented 4 years ago

It might be a good idea to document it in readme.md, next to the svg option switch description