Setup Options

Option 1 — Simple image URL

Recommended for fixed assets and most static pages. Copy the exact URL into a regular image element:

<img
  src="https://softhoursdiary-emojis.pages.dev/[emojis/svg/1f632.svg"
  alt="Surprised face"
  width="36"
  height="36"
  loading="lazy"
  decoding="async"
/>

There is nothing to install and no JavaScript to run.

Option 2 — JSON API

Use the JSON resolver when the asset type, ID or quality is dynamic:

const params = new URLSearchParams({
  type: "emoji",
  id: "1f632",
  quality: "svg"
});

const response = await fetch(
  "https://softhoursdiary-emojis.pages.dev/[api/v1/asset?" + params
);
const result = await response.json();

if (!response.ok || !result.ok) {
  throw new Error(result.error?.message || "Asset lookup failed.");
}

console.log(result.data.url);

Full endpoint details, supported values and response fields are in the REST JSON API guide.

Option 3 — Optional browser helper

Load a standalone script only when you want reusable URL helpers, DOM mounting or custom elements. This is not an npm package.

<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 script exposes window.SoftHoursDiary and registers the documented custom elements when supported.

Which option should I choose?

All three methods use the same published asset paths and quality values.