px-icon

A tiny, dependency-free <px-icon> custom element that rasterizes an inline <svg> onto a shared art-pixel grid. The source <svg> stays untouched in light DOM (so server-driven morphs, e.g. Idiomorph/Datastar, can freely update it); the raster is rendered into shadow DOM.

No build step, no npm, no dependencies. It's one ES module: px-icon.js.

Usage

Serve px-icon.js from wherever you host static files (your CDN, gitea raw URL, whatever) and import it as a module:

<script type="module" src="https://your-cdn.example/px-icon/v1.0.0/px-icon.js"></script>

<px-icon>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <path fill="#4a90d9" d="M12 2 2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
  </svg>
</px-icon>

Or import it directly in your own module and let bundling/copying be someone else's problem:

<script type="module">
  import 'https://your-cdn.example/px-icon/v1.0.0/px-icon.js';
</script>

Config

Set via CSS custom properties, so they cascade normally:

Property	Default	Values
`--pxicon-ap-size`	`8` (px)	art-pixel grid cell size
`--pxicon-mode`	`average`	`average` \| `point`
`--pxicon-debug-delay`	`0` (ms)	artificial render delay, for testing progressive enhancement

:root {
  --pxicon-ap-size: 6px;
  --pxicon-mode: point;
}

Demo

See examples/index.html — open it directly in a browser (served over http, not file://, since it uses ES modules and Blob URLs) or point your dev server at the repo root.

Versioning

No package.json, no registry. Releases are plain git tags (v1.0.0, ...) on the file as it exists at that commit. Point your CDN/proxy at a tag (or commit SHA) for a pinned, immutable URL; point at main only if you want to live dangerously.

License

MIT, see LICENSE.

2.0 KiB Raw Permalink Blame History