# tiny-isprite

> SVG sprite generator and React Icon component, with a separate browser color and motion editor.

## Package
- Documented npm release: 2.2.0 (Node.js 18+; React 17, 18 or 19).
- Install: `npm install tiny-isprite@2.2.0`
- Input: SVG files with a viewBox in `./icons`; filenames become symbol names.
- Generate: `npx build-sprite ./icons ./public/sprite.svg --manifest ./src/generated/sprite.js`
- Render: `import { Icon } from 'tiny-isprite'; import sprite from './generated/sprite.js';`
- JSX: `<Icon name="star" spriteUrl={sprite.url} prefix={sprite.prefix} size={32} />`
- CLI flags: `--watch`, `--prefix <prefix>`, `--public-path <url>`, `--manifest <file>`.
- Colors: `--preserve-colored`; `--use-css-vars`; add `--all` for all icon colors.
- Output formatting: `--minify`.
- Use the generated manifest URL: content-hashed files avoid stale sprite caches.
- Import generated CSS separately when using color variables.
- Browser API: `import { buildSpriteContent } from 'tiny-isprite/browser'`.
- The browser generation API does not sanitize SVG; callers sanitize untrusted input.

## Documentation
- [Start from zero](https://tiny-isprite.com/get-started.md)
- [README for 2.2.0](https://github.com/Dynation/tiny-isprite/blob/v2.2.0/README.md)
- [CHANGELOG for 2.2.0](https://github.com/Dynation/tiny-isprite/blob/v2.2.0/CHANGELOG.md)
- [npm package](https://www.npmjs.com/package/tiny-isprite)

## Separate online editor
- [Editor](https://tiny-isprite.com/editor/): JavaScript required; SVG editing happens locally in the browser.
- [Portable animation example](https://tiny-isprite.com/demos/orbit/)
- [Editor agent tool contract](https://tiny-isprite.com/agent-guide.md): WebMCP-capable browser required for tool execution.
- Installing the npm package does not install the editor or its animation player.

- [HTML documentation](https://tiny-isprite.com/docs/): readable without JavaScript.