@commenteme/icons

Os ícones de commente.me, do kit de marca e interface v3.3.1: os 8 do menu do admin e os 35 de interface. É o único set que a marca usa — nada de Lucide, Heroicons, Material, Font Awesome ou emoji.

npm install @commenteme/icons

React

import { Icon } from '@commenteme/icons/react';

<Icon name="buscar" size={16} />                       // botão, tabela, campo
<Icon name="oms" size={20} />                          // navegação
<Icon name="pedidos" size={32} />                      // módulo: ganha o círculo amarelo
<Icon name="error" size={32} error title="No pudimos conectar" />

O componente aplica a tabela do kit:

| uso | tamanho | traço | círculo amarelo | |---|---|---|---| | check de tabela / de formulário | 10 / 12 | 3,6 / 3,2 | não | | inline em texto, chips | 14 | 2 | não | | botões, tabelas, campos, menus | 16 | 2 | não | | avisos e toast | 18 | 2 | não | | navegação (sidebar, abas) | 20 | 1,9 | não | | estado vazio e páginas de erro | 24 | 2 | não | | ícone de módulo (menu do sitio, cartões) | 32 / 40 | 1,7 | sim | | confirmações grandes | 56 | 1,6 | sim |

• O traço vai em currentColor: a cor vem do color do elemento pai.
• O círculo usa var(--acento); com error, var(--error). Sem o tokens.css de @commenteme/tokens, caem no amarelo e no vermelho do kit.
• Sem title, o ícone é decorativo (aria-hidden). Botão só com ícone leva aria-label no botão.
• As demais props vão para o <svg> (className, style, ref…).
• Sem hooks: funciona em componente de servidor.

Nomes

Menu do admin: inicio, oms, catalogo, comparador (Comparador de precios; precios é alias, como no kit, que guarda o arquivo como cópia), reportes, conversaciones, configuracion, soporte.

Interface: buscar, agregar, cerrar, listo, editar, eliminar, copiar, filtrar, exportar, importar, sincronizar, mas, salir, chevron-abajo, chevron-derecha, chevron-izquierda, volver, abrir-fuera, correo, contrasena, fecha, exito, info, error, aviso, pedidos, productos, clientes, integraciones, notificaciones, menu, ordenar, chevron-arriba, tienda e ver. configuracion serve aos dois grupos: no kit os dois arquivos têm o mesmo desenho, e aqui fica um nome só.

Cinco ícones o kit desenha na Especificaciones mas não traz em brand/icons/ui/: menu (três linhas, o botão do admin no celular, §11), ordenar (as duas setas do cabeçalho ordenável sem ordem, §7), chevron-arriba (o ascendente, §7), tienda (a loja no seletor, §20) e ver (o olho da barra do super admin, §20). O desenho vem de lá, em src/extras/, até o kit incluí-los.

Os ícones de módulo são navegação, nunca logotipo. Faltou um ícone: ele se desenha com as regras do kit e entra no kit, nunca vem de uma biblioteca.

Node e SVG em texto

import { toSvg } from '@commenteme/icons';
import { color } from '@commenteme/tokens';

toSvg('pedidos', { size: 32, color: color.azul, accent: color.amarillo });
// '<svg xmlns=… width="32" … stroke-width="1.7" …><circle … fill="#FFBD38"/>…</svg>'

Fora do navegador não há tokens.css, então passe as cores resolvidas. Também exporta iconNames, strokeWidth(size), hasAccent(size) e os dados crus em icons.

Arquivos SVG

import oms from '@commenteme/icons/svg/oms.svg';   // Vite e afins: vira URL
<img src={oms} alt="" width={20} height={20} />

@commenteme/icons/svg/<nome>.svg são os arquivos do kit como vieram, sem o metadata C2PA de ~8 KB que cada um trazia. Atenção: no kit v3.3.1 os de módulo vêm desiguais — inicio, comparador, conversaciones e soporte com traço 1,7 e o círculo; oms, catalogo, reportes e configuracion com 1,9 e sem círculo —, e os de interface com 1,9 e sem círculo. Para um tamanho certo, use o componente ou toSvg, que normalizam.

Versão e licença

Versionamento semântico próprio; mudanças em CHANGELOG.md. MIT para o código. A marca commente.me não entra nessa licença: ver MARCA.md.