https://github.com/jean-tinland/lazy-icon-web-component
A web component lazy loading icons from individual sprites
https://github.com/jean-tinland/lazy-icon-web-component
lazy-icon lazy-loading web-components
Last synced: 10 months ago
JSON representation
A web component lazy loading icons from individual sprites
- Host: GitHub
- URL: https://github.com/jean-tinland/lazy-icon-web-component
- Owner: Jean-Tinland
- License: mit
- Created: 2025-07-22T06:02:46.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2025-08-01T12:11:38.000Z (11 months ago)
- Last Synced: 2025-08-10T00:57:52.689Z (10 months ago)
- Topics: lazy-icon, lazy-loading, web-components
- Language: JavaScript
- Homepage:
- Size: 67.4 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# lazy-icon-web-component
A web component lazy loading icons from individual sprites.
It uses the `IntersectionObserver` API to load the icon only when it is in the viewport. If the browser doesn't support this API, icon is loaded immediately.
## Setup
You'll need to expose your icons in a distant or local folder.
Each icon must be a well named file containing a `` sprite with a `` identified by the id `icon`.
```html
```
## Configuration & loading
Copy this `lazy-icon.js` script inside your project.
Create the configuration object then insert bellow a ` anywhere in your HTML:
```html
<!doctype html>
<html>
<head>
<!-- head content -->
</head>
<body>
<!-- body content -->
<script>
window.lazyIconConfig = {
// spriteUrl can be a relative or absolute url
spriteUrl: "/public/images/icons"
};