START HERE · QUICK START
Quick Start Guide
Go from a short asset ID to a working image in five steps. Start with a direct URL, then add the helper library when you need reusable components.
Before you start
You need an asset type, a quality value and an asset ID. No API key, account or package installation is required to display a single image. The simplest option is a direct image URL; add the JavaScript helper when you want reusable URL generation or custom elements.
Fastest route: open the playground, choose an asset and copy the resulting HTML snippet.
Step 1 — Choose an asset family
| Asset family | type | ID example | Use case |
|---|---|---|---|
| Emoji | emoji | 1f632 | Reactions, mood indicators, content UI |
| Flag SVG | flag | IN | Language or country selection |
| Flag icon | flags | IN | Compact country labels and chips |
Step 2 — Choose a quality
Emoji assets support svg and png. Flag SVG supports s, m and l. Flag icons support 1x1 and 4x3.
Step 3 — Build the URL
const CDN = "https://softhoursdiary-emojis.pages.dev";
const emoji = CDN + "/emojis/svg/1f632.svg";
const flag = CDN + "/flag/l/IN.svg";
const flagIcon = CDN + "/flags/4x3/in.svg";
console.log(emoji, flag, flagIcon);Step 4 — Display it in HTML
<img
src="https://softhoursdiary-emojis.pages.dev/emojis/svg/1f632.svg"
alt="Surprised face"
width="36"
height="36"
loading="lazy"
decoding="async"
/>Step 5 — Use the helper for reusable markup
<script defer src="https://softhoursdiary-emojis.pages.dev/soft-hours-diary.js"></script>
<shd-emoji asset-id="1f632" quality="svg"
alt="Surprised face"></shd-emoji>The helper registers the custom element and resolves its asset URL when the element is connected to the page.
Verify the result
- Open the playground and select the correct asset family.
- Enter an ID and choose a supported quality value.
- Confirm the URL and image preview.
- Copy the direct URL or generated HTML snippet.
- Set accessible alt text and dimensions in production.