Install

Script tag

The script tag works today. It is one file. It defines <morph-icon> and loads the Lucide icons.

<script type="module" src="https://shapcn.com/morph-icon.js"></script>
<morph-icon name="mic" size="48"></morph-icon>

The script also sets window.shapcn. The object holds these names: DEFAULTS, easings, registerIcons, registerFamily, registerFamilyFile, getIconInfo, getFamily, getIconNames, iconToSVG, planMorph, planAlive, MorphIcon, and defineMorphIcon.

The script tag build has the Lucide icons only. It does not expose registerSVGs, registerFamilyIcons, or alive. Use the npm package for those.

Use window.shapcn from a module script. A module script runs after the page loads, so the API is ready.

<script type="module" src="https://shapcn.com/morph-icon.js"></script>
<script type="module">
  const { planMorph } = window.shapcn;
  const plan = planMorph('mic', 'mic-off');
  console.log(plan.frame(0.5).length, 'drawing entries at the middle');
</script>

npm

Script tag works today. npm package is in progress. Source is on GitHub.

npm i shape-aware-morph

The package is ES modules only. In Node, require('shape-aware-morph') works only on Node 22.12 or newer. Use import on older versions.

The core has no icon data. You import only the icons you use (see Icons). The core alone is about 181 kB minified (70 kB gzipped). Each icon adds a few hundred bytes.

Use it in a bundler:

import { registerLucide, defineMorphIcon } from 'shape-aware-morph';

await registerLucide();   // loads the Lucide icons
defineMorphIcon();        // defines <morph-icon>

Use it from a CDN as one file. It loads the Lucide icons and defines <morph-icon> for you. It also sets window.shapcn.

<script src="https://unpkg.com/shape-aware-morph@0.1.0"></script>
<morph-icon name="mic"></morph-icon>

jsDelivr works too: https://cdn.jsdelivr.net/npm/shape-aware-morph@0.1.0.

Use the source today

The npm package is not published yet. The source is on GitHub. Build it in three steps.

git clone https://github.com/seahorsecastle/shapcn
cd shapcn/package
npm install && npm run build

Then import from the package folder, or use dist/morph-icon.js.

License

shapcn is MIT. Lucide icon data is ISC. The other icon sets keep their own licenses (see Icons).

Markdown version