Dessinez l’icône, définissez deux états, et la transition entre eux est interpolée automatiquement. Ce que vous voyez dans l’aperçu est ce que vous exportez, parce que les deux exécutent le même code.
Les calques sont appariés entre les images d’abord par identifiant, puis par nom, puis par ressemblance. Quand un appariement est incertain, l’éditeur le signale et permet de le corriger, au lieu d’obliger à renommer des calques jusqu’à ce que ça marche.
Les tracés identiques s’interpolent directement. Ceux qui sont réconciliables sont rééchantillonnés vers un nombre commun de segments. Le reste passe par un fondu. Le pire cas est un fondu, jamais une géométrie tordue.
Typé, tree-shakeable, compatible avec le rendu côté serveur. Quarante icônes pèsent 11 ko gzip au total. Les mêmes quarante en Lottie en pèsent 24, et sans compter le lecteur, une dépendance que l’export en composants n’a pas du tout. Les deux chiffres viennent d’un test du dépôt, pas d’une plaquette.
Plume Bézier, édition des points, opérations booléennes, contour et décalage du tracé, répétition radiale et miroir, grille de pixels et keylines Material. La réduction du mouvement est incluse dans chaque export animé, toujours.
Un composant généré n’importe rien. Aucun lecteur, aucune bibliothèque d’animation, aucun fournisseur autour de l’application. C’est le fichier que vous auriez écrit à la main, si vous en aviez eu le temps.
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?: stringLes projets sont enregistrés dans votre navigateur au fil du travail. Rien n’est envoyé et aucun compte n’est requis. Un projet peut être téléchargé comme fichier et rouvert plus tard.