morphicons

Roadmap

Where morphicons is heading — hardening and new capabilities, interleaved. No dates: things ship when they feel right.

Shipped

  1. Universal morphing core — v1.0

    Any stroke icon morphs into any other: optimal rotation in closed form, spring physics, zero dependencies. DOM and React drivers included.

  2. morphicons.com

    The interactive Studio: every pair, every library, scrubbable mid-flight.

  3. React, Vue and Svelte drivers

    morphicons/react morphicons/vue morphicons/svelte: MorphIcon experience: SSR first paint, accessibility included

  4. React, Vue and Svelte lifecycle hardening

    One documented contract for the three drivers — icons that arrive late, explicit mode precedence, clean re-entry — pinned by real client-mount tests.

  5. React Native driver

    morphicons/react-native: the DOM-free core beyond the browser — the same MorphIcon over react-native-svg, same lifecycle contract, reduced motion from the OS setting

  6. Component showcase

    The icon swaps that show up most in real shadcn/ui apps, as copy-paste components: pick the library, framework, spring and stroke.

  7. Reduced motion, as an explicit policy

    reducedMotion: "never" | "user" | "always" on the driver and all four bindings, live at runtime. Motion becomes a product decision instead of a silent global override.

  8. Format adapters: markup in, CSS masks out

    morphicons/adapters: svgToIcon parses the SVG an Iconify-style pipeline ships, maskTarget morphs mask-styled elements in place (double-buffered so Safari repaints). One opt-in entry, each adapter tree-shakes alone, pinned by per-export size gates.

  9. Canvas adapter

    canvasTarget: any canvas or 2D context as a morph target via Path2D. The icon becomes pixels you own: GPU textures, chart sprites, favicons, OffscreenCanvas. 0.5 KB gzip on top of the driver.

  10. Adapter showcase

    The showcase grew tabs: core, mask and canvas. The canvas tab runs a Mapbox map whose pins morph through interaction states, and a streaming chart whose trend icon rides the data.

Up next

  1. Adapter ergonomics

    useTarget so React lifecycles stop hand-rolling destroy/dispose, elementToIcon to read the icon an element already renders, and a viewBox parameter across the pipeline for off-grid packs.

  2. Bulletproof inputs

    Clear errors at every public boundary, malformed paths, invalid springs, mismatched sample sizes.

Planned

  1. SVG Doctor

    Paste any SVG: a compatibility verdict, a live morph preview and ready-to-use code.

  2. Shareable Studio

    The full morph state, pair, spring, progress, serialized in the URL.

Exploring

  1. Custom Animation Studio

    A timeline editor for choreographies beyond the automatic morph, shipped as a separate package.

  2. Type that morphs

    Regular fonts are filled outlines, off limits by design. But monoline fonts (Hershey, single-stroke plotter faces) are pure centerlines: exactly the core's contract. Digits first, a counter whose 3 bends into 8; then a textToIcon adapter for single-line fonts.