Íconos

Los íconos de Moodinary, dibujados en una grilla de 16 por 16 píxeles. Un archivo por ícono, así tu bundle lleva solo los que usás.

Instalación

npm

npm i @moodinary/sprites

import

import { Sun, CloudFog, Users } from "@moodinary/sprites/icons";
// o un archivo por ícono
import Sun from "@moodinary/sprites/icons/Sun";

<Sun size={32} color="#0f2868" title="Soleado" />

SVG suelto

node_modules/@moodinary/sprites/dist/icons/svg/Sun.svg

Todos los íconos

Buscá por nombre o por palabra (probá "clima", "ánimo" o "equipo"). Hacé clic en un ícono para copiar el JSX o el SVG.

360 resultados

Props

size: tamaño en px, 16 por defecto. Escala solo en múltiplos enteros (16, 32, 48) para que cada píxel caiga entero; el resto queda como margen.
color: cualquier color CSS. Por defecto hereda currentColor.
toneOpacity: opacidad del segundo tono, 0,4 por defecto. Los íconos pixel no tienen trazo, así que este es su control de peso en lugar de strokeWidth.
title: etiqueta accesible. Sin ella el ícono queda aria-hidden.

Reglas de dibujo

Grilla de 16 por 16 con un píxel de margen en cada borde.
Líneas de un píxel. Dos tonos como máximo: el color y el mismo color al 40%.
Nada de diagonales suaves ni antialias: shape-rendering: crispEdges.
Para agregar un ícono, dibujalo en src/icons/source.ts o sumá un SVG de 16 por 16 con su entrada en icons.json al set extendido, y corré bun run icons. Si algo queda fuera de la grilla, el build avisa.