HTML & CSS Integration
No framework required. Use custom elements for concise markup, data attributes for existing HTML, or direct image URLs for one-off assets.
Browser helper and custom elements
Add the helper once. The browser bundle registers the custom elements when the browser supports the Custom Elements API.
<script defer src="https://softhoursdiary-emojis.pages.dev/[soft-hours-diary.js"></script>
<shd-asset type="emoji" asset-id="1f632" quality="svg"
alt="Surprised face" width="42" height="42"></shd-asset>
<shd-flag asset-id="IN" quality="l"
alt="Flag of India" width="48" height="32"></shd-flag>
<shd-flag-icon asset-id="IN" quality="4x3"
alt="India flag icon" width="48"></shd-flag-icon>The generic element takes type="emoji", type="flag" or type="flags". Use asset-id for the asset identifier; the regular HTML id attribute remains available.
Custom element attributes
| Attribute | Purpose |
|---|---|
type | Asset family on shd-asset: emoji, flag or flags. |
asset-id | Emoji code-point ID or country / region code. |
quality | File format, flag size or aspect ratio. |
alt | Accessible image description. |
width, height | Image dimensions. |
class | CSS class applied to the internal image. |
loading | eager or lazy; lazy is the default. |
decoding | async, sync or auto; async is the default. |
base-url | Optional HTTP(S) base URL override. |
Data attributes with regular images
If you prefer normal image markup, add data attributes and call scan() after the helper and matching markup are ready.
<img data-shd-type="emoji" data-shd-id="1f632"
data-shd-quality="svg" alt="Surprised face"
width="40" height="40" />
<img data-shd-type="flag" data-shd-id="IN"
data-shd-quality="l" alt="Flag of India"
width="48" height="32" />const count = window.SoftHoursDiary.scan();
console.log("Processed assets:", count);Direct image URL without JavaScript
No helper is required for a one-off asset. Use its absolute CDN URL directly.
<img src="https://softhoursdiary-emojis.pages.dev/[emojis/svg/1f632.svg"
alt="Surprised face" width="36" height="36">CSS background image
Use CSS backgrounds for decorative assets that do not convey meaning unavailable elsewhere in the UI.
.reaction-icon {
width: 32px;
height: 32px;
background-image: url("https://softhoursdiary-emojis.pages.dev/[emojis/svg/1f632.svg");
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}If the image conveys meaning, provide a text equivalent or accessible label in the document.
Dynamic markup and timing
Use defer on the helper script so it does not block HTML parsing. When your application adds regular data-attribute nodes later, call scan(container) on the new container. Custom elements resolve themselves when connected to the page.