# shapcn

> Morph icons like a pro. Change the icon name. shapcn animates the rest. The engine plans every morph live, shape by shape.

Install from npm (`npm i shape-aware-morph`) or with one script tag. Source is on GitHub.

## Docs

- [Overview](https://shapcn.com/docs.md): Docs for shapcn, the icon morph engine. Change the name of a morph-icon element and the icon moves like an animator drew it.
- [Install](https://shapcn.com/docs/install.md): Install shapcn with one script tag, or from npm as shape-aware-morph. Source is on GitHub.
- [Element](https://shapcn.com/docs/element.md): Every attribute of the morph-icon element, with its default and a live demo.
- [Feel](https://shapcn.com/docs/feel.md): The three easing presets of shapcn, smooth, spring, and elastic, with a live side-by-side demo.
- [Effects](https://shapcn.com/docs/effects.md): The seven appear and disappear effects of shapcn, with a live demo of each.
- [Hover and press](https://shapcn.com/docs/hover-press.md): Hover and press styles for shapcn icons, grow, bend, bold, cascade, move, pop, squash, squat-jump and burst, and a press that changes the icon.
- [Icons](https://shapcn.com/docs/icons.md): Lucide is built in. Twelve icon sets ship as separate modules. Register your own SVG icons with registerSVGs.
- [JavaScript](https://shapcn.com/docs/javascript.md): The stable JavaScript API of shapcn, planMorph, planAlive, planPress, createSway, alive, defineMorphIcon, and registerIcons.
- [Frameworks](https://shapcn.com/docs/frameworks.md): Use shapcn in plain HTML, React, Vue, and Svelte. Types for React come with the package.
- [Accessibility](https://shapcn.com/docs/accessibility.md): How shapcn handles reduced motion and keyboard focus, and how to add aria labels to icons.

## Optional

- [All docs in one file](https://shapcn.com/llms-full.txt)
- [Landing page](https://shapcn.com/)
- [Chrome extension: shapcn everywhere](https://shapcn.com/extension)
- [Extension privacy policy](https://shapcn.com/extension/privacy)