Plain HTML

No bundler needed. Seedkin is plain ES modules with no dependencies, so a browser can import it straight from a CDN or from your own server.

From a CDN

<img data-seed="ada" alt="" width="48" height="48" />
<img data-seed="grace" alt="" width="48" height="48" />

<script type="module">
  import { botlingDataUri } from 'https://cdn.jsdelivr.net/npm/seedkin@2/dist/styles/botling/index.js';

  for (const img of document.querySelectorAll('img[data-seed]')) {
    img.src = botlingDataUri(img.dataset.seed, { size: img.width, title: null });
  }
</script>

seedkin@2 follows the latest 2.x release, which never changes a stable style's pictures. Pin an exact version (seedkin@2.2.0) if you'd rather upgrade by hand.

Self-hosted

Copy node_modules/seedkin/dist to your site, say to /vendor/seedkin/, and import /vendor/seedkin/styles/botling/index.js instead. The files import each other by relative path, so keep the folder whole.

Content Security Policy

If your site sends a Content Security Policy, the page needs img-src data: for the avatars, and script-src https://cdn.jsdelivr.net for the CDN import (not needed self-hosted). A module script inside the page counts as an inline script, so under script-src 'self' move it into its own file, as this site does.