Morphicons

https://www.morphicons.com

Admin

Morphicons is a universal morphing library for stroke-based SVG icons that solves optimal rotation...

Tokens:1,156

Snippets:19

Trust Score:2.1

Update:2 months ago

Show doc for...

Tokens:

Raw

### Install Morphicons

Source: https://www.morphicons.com/showcase

Install the package via npm to begin using morphicons in your project.

```bash
npm i morphicons
```

--------------------------------

### Vanilla JavaScript Morphing

Source: https://www.morphicons.com/llms.txt

Use the createMorph function to initialize and control icon morphing in non-framework environments.

```ts
import { createMorph } from "morphicons/dom";

const m = createMorph(pathEl, Menu);
m.morphTo(X, "snappy"); // interruptible spring; re-plans mid-flight
```

--------------------------------

### Morphing Icons in React

Source: https://www.morphicons.com/

Use the MorphIcon component to animate between two icons by passing the desired icon as a prop. The library handles the transition automatically without requiring explicit from/to pairs.

```tsx
import { MorphIcon } from "morphicons/react";
import { Menu, X } from "lucide"; // data, not components

<button onClick={() => setOpen(o => !o)} aria-expanded={open}>
  <MorphIcon icon={open ? X : Menu} />
</button>
```

--------------------------------

### Vue 3 Icon Morphing

Source: https://www.morphicons.com/llms.txt

Implement icon morphing in Vue 3 using the MorphIcon component and standard ref state.

```vue
<script setup lang="ts">
import { ref } from "vue";
import { MorphIcon } from "morphicons/vue";
import { Menu, X } from "lucide"; // data, not components

const open = ref(false);
</script>

<template>
  <button @click="open = !open" :aria-expanded="open">
    <MorphIcon :icon="open ? X : Menu" />
  </button>
</template>
```

--------------------------------

### React Icon Morphing

Source: https://www.morphicons.com/llms.txt

Use the MorphIcon component to animate between icon data objects from libraries like Lucide.

```tsx
import { MorphIcon } from "morphicons/react";
import { Menu, X } from "lucide"; // icon data, not components

<button onClick={() => setOpen(o => !o)} aria-expanded={open}>
  <MorphIcon icon={open ? X : Menu} />
</button>
```

Tokens:

Raw