Do domínio
From the domain
Sem build, sem npm. CORS aberto.
No build, no npm. Open CORS.
DestaqueAccent
TraçoInk
ExibirShow
npm
Para produtos com bundler.
For products with a bundler.
npm install @uxag/iconsSVG
Para Figma e apresentações — nas cores que você escolher.
For Figma and decks — in the colours you pick.
| /dist/uxag-icons.js | Módulo ESM + <uxag-icon> |
ESM module + <uxag-icon> |
| /dist/sprite.svg | Um <symbol> por ícone |
One <symbol> per icon |
| /dist/manifest.json | Nomes, categorias e tags | Names, categories and tags |
| /icons/<nome>.svg | Um ícone | A single icon |
| /tokens/palette.css | Variáveis CSS da paleta | Palette custom properties |
Se o ícone precisa mudar de cor conforme o contexto, ele tem que estar inline —
<img> não recebe CSS da página.
If an icon must change colour with its context, it has to be inline —
an <img> can't be reached by page CSS.
Acessibilidade
Accessibility
Ícone decorativo, ao lado de um texto que já diz o mesmo: aria-hidden="true".
Ícone que carrega o significado sozinho: aria-label (inline) ou
alt (em <img>). O <uxag-icon> resolve isso
sozinho — sem label, é decorativo.
Decorative, next to text that already says the same thing:
aria-hidden="true". Carrying the meaning alone: aria-label
(inline) or alt (on an <img>). The
<uxag-icon> element handles it — no label means decorative.
Todo ícone usa duas funções de cor. É essa disciplina que faz 43 ícones parecerem um só conjunto.
Every icon uses two colour roles. That discipline is what makes 43 icons look like one set.
currentColor
O traço. Herda color, então segue o texto e se inverte no
tema escuro.
The stroke. Inherits color, so it follows the text and
inverts in dark mode.
--uxag-accent
O plano de destaque — o assunto do ícone. Padrão: ciano da marca.
The accent plane — the subject of the icon. Brand cyan by default.
--uxag-guide-opacity
As guias pontilhadas. Traço com opacidade reduzida, nunca uma terceira cor.
The dotted guides. Ink at reduced opacity, never a third colour.
:root { --uxag-accent: #00C2F0; } /* destaque global */
.alert--danger { --uxag-accent: #E5484D; } /* por estado */
.uxag-icon--mono { --uxag-accent: currentColor; --uxag-guide-opacity: .35; }Paleta
Palette
Clique para copiar o hexadecimal.
Click to copy the hex.
A especificação que todo ícone novo segue. npm run validate confere cada item.
The spec every new icon follows. npm run validate checks each line of it.