ストロークベースのアイコンをスプリングフィジクスで自動的に変形させるTypeScript・React・Vue・Svelte対応ライブラリです。

bun add morphicons

import { MorphIcon } from "morphicons/react";
import { Menu, X } from "lucide"; // データをインポート（コンポーネントではなく）
import { useState } from "react";

function App() {
  const [open, setOpen] = useState(false);
  return (
    <button onClick={() => setOpen(o => !o)} aria-expanded={open}>
      <MorphIcon icon={open ? X : Menu} />
    </button>
  );
}

import { createMorph } from "morphicons/dom";
import { Menu, X } from "lucide";

const pathEl = document.querySelector("path");
const m = createMorph(pathEl, Menu);
m.morphTo(X, "snappy");

<script setup>
import { ref } from "vue";
import { MorphIcon, type MorphHandle } from "morphicons/vue";
import { Menu, X } from "lucide";

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

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

<script lang="ts">
  import { MorphIcon } from "morphicons/svelte";
  import { Menu, X } from "lucide";

  let open = $state(false);
</script>

<button onclick={() => { open = !open }}>
  <MorphIcon icon={open ? X : Menu} />
</button>

import { MorphIcon } from "morphicons/react-native";
import { Menu, X } from "lucide";
import { useState } from "react";

function App() {
  const [open, setOpen] = useState(false);
  return (
    <MorphIcon icon={open ? X : Menu} />
  );
}