{"id":13906489,"url":"https://github.com/ghybs/leaflet-defaulticon-compatibility","last_synced_at":"2025-04-04T16:17:12.702Z","repository":{"id":71649601,"uuid":"137450517","full_name":"ghybs/leaflet-defaulticon-compatibility","owner":"ghybs","description":"Retrieve all Leaflet Default Icon options from CSS, in particular all icon images URL's, to improve compatibility with bundlers and frameworks that modify URL's in CSS.","archived":false,"fork":false,"pushed_at":"2023-07-28T19:03:55.000Z","size":135,"stargazers_count":90,"open_issues_count":0,"forks_count":7,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-10-14T15:36:07.497Z","etag":null,"topics":["icon","leaflet","leaflet-plugins"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-2-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ghybs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-06-15T06:39:33.000Z","updated_at":"2024-08-01T13:45:45.000Z","dependencies_parsed_at":"2024-06-18T14:03:36.944Z","dependency_job_id":"c81d8dec-ba88-4e63-a362-b90c28f24e4c","html_url":"https://github.com/ghybs/leaflet-defaulticon-compatibility","commit_stats":{"total_commits":17,"total_committers":2,"mean_commits":8.5,"dds":0.05882352941176472,"last_synced_commit":"5b18458b04ac9ab7d646d82e84b2f4f52ed9aae3"},"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ghybs%2Fleaflet-defaulticon-compatibility","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ghybs%2Fleaflet-defaulticon-compatibility/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ghybs%2Fleaflet-defaulticon-compatibility/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ghybs%2Fleaflet-defaulticon-compatibility/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ghybs","download_url":"https://codeload.github.com/ghybs/leaflet-defaulticon-compatibility/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247208190,"owners_count":20901570,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["icon","leaflet","leaflet-plugins"],"created_at":"2024-08-06T23:01:36.852Z","updated_at":"2025-04-04T16:17:12.683Z","avatar_url":"https://github.com/ghybs.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# leaflet-defaulticon-compatibility\nRetrieve all Leaflet Default Icon options from CSS, in particular all icon images URL's, to improve compatibility with bundlers and frameworks that modify URL's in CSS. [Demo with webpack](https://ghybs.github.io/leaflet-defaulticon-compatibility/webpack-demo.html) (and [without this plugin](https://ghybs.github.io/leaflet-defaulticon-compatibility/webpack-demo.html?demo=no-plugin)).\n\n[![GitHub releases](https://img.shields.io/github/release/ghybs/leaflet-defaulticon-compatibility.svg?label=GitHub)](https://github.com/ghybs/leaflet-defaulticon-compatibility/releases)\n[![npm](https://img.shields.io/npm/v/leaflet-defaulticon-compatibility.svg)](https://www.npmjs.com/package/leaflet-defaulticon-compatibility)\n\nSize: \u003c 2kB minified\n\nNote: here, \"_compatibility_\" does not refer to _browser_ compatibility, but with build engines and frameworks that modify URL's in CSS, which often conflicts with Leaflet built-in Default Icon images automatic management. See [issue Leaflet/Leaflet#4698](https://github.com/Leaflet/Leaflet/issues/4968) for more details.\n\n\n## Usage\n\n```bash\n$ npm install leaflet-defaulticon-compatibility --save\n```\n\nLoad this plugin CSS and JS files _after_ Leaflet CSS and JS. Then the Leaflet default icon should automatically work again, even if your build engine or framework modifies the URL's in CSS, typically:\n- webpack with [style-loader](https://github.com/webpack-contrib/style-loader) + [css-loader](https://github.com/webpack-contrib/css-loader) + [file-loader](https://github.com/webpack-contrib/file-loader) or [url-loader](https://github.com/webpack-contrib/url-loader)\n- Rails with [Asset Pipeline](http://guides.rubyonrails.org/asset_pipeline.html#what-is-fingerprinting-and-why-should-i-care-questionmark)\n- Django with [pipeline](https://github.com/jazzband/django-pipeline)\n\nFor example for webpack with style-loader + css-loader + file-loader:\n\n```javascript\nimport 'leaflet/dist/leaflet.css';\nimport 'leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.webpack.css'; // Re-uses images from ~leaflet package\nimport * as L from 'leaflet';\nimport 'leaflet-defaulticon-compatibility';\n```\n\n\n### CSS file\n\nThis plugin provides 2 similar CSS files:\n\n- `leaflet-defaulticon-compatibility.css`: use it by default.\n- `leaflet-defaulticon-compatibility.webpack.css`: alternative for webpack / bundlers that understand the `~leaflet` syntax to navigate to other packages in `node_modules`. This avoids duplicating the `images/marker-icon.png` file from `leaflet.css`, hence saving some bytes, especially when the images is inlined as DataURI/base64 (even though with gzip compression this should not be an issue).\n\n\n## Warning: Data URI (base64) images performance\n\nSome bundlers automatically replace `url(path)` in CSS by [Data URI](https://en.wikipedia.org/wiki/Data_URI_scheme) (aka base64-encoded) image (i.e. `url(data:image/png;base64,SOME_DATA)`). That is typically the case of webpack url-loader and Django pipeline.\n\nIf your map displays hundreds of Markers using this inlined image as icon, be aware that [it will affect the browser performance much more quickly than using a normal URL file](https://github.com/Leaflet/Leaflet/issues/4968#issuecomment-322422045).\n\n\n## Fix: Firefox high contrast (colours override) option\n\nThis plugin also fixes an edge case in Firefox when a user has [configured their browser](https://support.mozilla.org/en-US/kb/change-fonts-and-colors-websites-use#w_other-settings-for-colors) to _always_ override the websites colours.\n\nWhen [that option](https://support.mozilla.org/en-US/kb/change-fonts-and-colors-websites-use#w_other-settings-for-colors) is set to \"Always\" in Firefox preferences, all background images are removed. Therefore Leaflet can no longer detect the default icon images path that was clued through CSS `.leaflet-default-icon-path` class `background-image` rule.\n\nIn that case, this plugin will try to use the `cursor` rule instead which is not affected by Firefox colours override option. Therefore the plugin CSS duplicates the images path in both `background-image` and `cursor` rules.\n\nHowever, if you use this plugin to specify your own icon in CSS, make sure to still use `background-image` rule as the first mean to pass your images path, because [Internet Explorer always interpretes URL's in `cursor` rule as absolute](https://stackoverflow.com/questions/12454770/are-cursor-urls-relative-to-the-css-file#answer-12454924).\n\n\n## License\n[![license](https://img.shields.io/github/license/ghybs/leaflet-defaulticon-compatibility.svg)](LICENSE)\n\nleaflet-defaulticon-compatibility is distributed under the [BSD 2-clause \"Simplified\" License](http://choosealicense.com/licenses/bsd-2-clause/), like Leaflet.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fghybs%2Fleaflet-defaulticon-compatibility","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fghybs%2Fleaflet-defaulticon-compatibility","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fghybs%2Fleaflet-defaulticon-compatibility/lists"}