Icone

Iconos animados, sin runtime

Dibuja el icono, define dos estados y la transición entre ellos se interpola automáticamente. Lo que ves en la vista previa es lo que exportas, porque ejecutan el mismo código.

Abrir el editor Cómo funciona

Qué hace

Smart Animate que se explica

Las capas se emparejan entre fotogramas primero por identificador, después por nombre y por último por semejanza. Cuando un emparejamiento es dudoso el editor lo indica y permite corregirlo, en lugar de obligar a renombrar capas hasta que funcione.

Morphing de trazados que degrada en vez de romperse

Los trazados idénticos se interpolan directamente. Los reconciliables se remuestrean a un número común de segmentos. El resto pasa por un fundido. El peor caso es un fundido, nunca una geometría retorcida.

Exportación sin dependencias

Tipado, tree-shakeable y compatible con el renderizado en servidor. Cuarenta iconos miden 11 kB gzip en total. Los mismos cuarenta en Lottie miden 24, y sin contar el reproductor, una dependencia que la exportación a componentes no tiene. Ambas cifras salen de un test del repositorio, no de un folleto.

Un editor vectorial de verdad

Pluma Bézier, edición de puntos, operaciones booleanas, contorno y desplazamiento del trazo, repetición radial y espejo, cuadrícula de píxeles y keylines de Material. La reducción de movimiento se incluye siempre en cada exportación animada.

Qué acaba en tu repositorio

Un componente generado no importa nada. Ni reproductor, ni librería de animación, ni proveedor que envuelva la aplicación. Es el archivo que habrías escrito a mano, de haber tenido tiempo.

import { MenuIcon } from './icons/MenuIcon'

export function Header() {
  return <MenuIcon size={24} animate />
}

// size?: number | string   side in pixels, the icon stays square
// animate?: boolean        false keeps it still on the first frame
// className?: string

Tres pasos

  1. Arrastra dos archivos SVG, o dibuja el icono desde cero.
  2. Duplica el fotograma y cambia lo que debe moverse.
  3. Elige un formato y copia el código. Las imágenes fijas, SVG y PNG, se obtienen con el botón derecho sobre el fotograma.

Dónde vive tu trabajo

Los proyectos se guardan en tu navegador mientras trabajas. No se sube nada y no hace falta ninguna cuenta. Un proyecto se puede descargar como archivo y volver a abrir más tarde.