67 lines
2.0 KiB
Markdown
67 lines
2.0 KiB
Markdown
# 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:
|
|
|
|
```html
|
|
<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:
|
|
|
|
```html
|
|
<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 |
|
|
|
|
```css
|
|
:root {
|
|
--pxicon-ap-size: 6px;
|
|
--pxicon-mode: point;
|
|
}
|
|
```
|
|
|
|
## Demo
|
|
|
|
See [`examples/index.html`](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](LICENSE).
|