Components (registry)Actions
Icon
Sizes and colors an inline SVG; the DS owns scale, not the path art. Pair with any approved icon set.
Anatomía CSS
<div class="icon"> </div>
| Clase | Propósito |
|---|---|
icon | root |
icon--brand | modifier |
icon--l | modifier |
icon--leading | modifier |
icon--m | modifier |
icon--muted | modifier |
icon--s | modifier |
icon--success | modifier |
icon--xl | modifier |
icon--xs | modifier |
Tokens resueltos
Valores finales tras seguir la cadena de tokens. Derivados del source: si un token cambia, esta tabla cambia sola.
| Variante | Prop | Valor | Token |
|---|---|---|---|
| all | fg | currentColor | (literal) |
| all | fill | currentColor | (literal) |
| success | fg | #25d366 | success |
| brand | fg | #ff6600 | brand |
| muted | fg | #525252 | muted.foreground |
CSS mínimo funcional
Autocontenido: sin imports ni tokens. Para previews y prototipos — en producción se consume el CSS del DS (@atom-uikit/css/components.css</code>, <code>@atom-uikit/tokens/tokens.css).
/* -------------------------------------------------------------------------
Icon
Contenedor de tamano para SVG inline. El DS no envia paths (los iconos son
contenido, no estilo): envia la ESCALA y el color, para que ningun consumidor
vuelva a dimensionar SVGs a mano.
Uso: <svg class="icon icon--m icon--success" viewBox="0 0 24 24">…</svg>
Sizes: xs 1em · s 1.25em · m 1.5em · l 2em · xl 2.5em (relativos al
font-size del contexto: el icono acompana al texto y escala con el)
Intents: currentColor por defecto; success/brand/muted como atajos.
------------------------------------------------------------------------- */
.icon {
display: inline-block;
flex-shrink: 0;
width: 1.25em;
height: 1.25em;
color: currentcolor;
fill: currentcolor;
vertical-align: middle;
}
.icon--xs { --icon-size: 1em; }
.icon--s { --icon-size: 1.25em; }
.icon--m { --icon-size: 1.5em; }
.icon--l { --icon-size: 2em; }
.icon--xl { --icon-size: 2.5em; }
.icon--success { color: #25d366; }
.icon--brand { color: #ff6600; }
.icon--muted { color: #525252; }
/* Alineacion optica con la primera linea cuando acompana texto multilinea */
.icon--leading { margin-block-start: 0.2em; }
Codigo fuente
styles/components/icon.css
/* ------------------------------------------------------------------------- Icon Contenedor de tamano para SVG inline. El DS no envia paths (los iconos son contenido, no estilo): envia la ESCALA y el color, para que ningun consumidor vuelva a dimensionar SVGs a mano. Uso: <svg class="icon icon--m icon--success" viewBox="0 0 24 24">…</svg> Sizes: xs 1em · s 1.25em · m 1.5em · l 2em · xl 2.5em (relativos al font-size del contexto: el icono acompana al texto y escala con el) Intents: currentColor por defecto; success/brand/muted como atajos. ------------------------------------------------------------------------- */ .icon { display: inline-block; flex-shrink: 0; width: var(--icon-size, 1.25em); height: var(--icon-size, 1.25em); color: currentcolor; fill: currentcolor; vertical-align: middle; } .icon--xs { --icon-size: 1em; } .icon--s { --icon-size: 1.25em; } .icon--m { --icon-size: 1.5em; } .icon--l { --icon-size: 2em; } .icon--xl { --icon-size: 2.5em; } .icon--success { color: var(--success); } .icon--brand { color: var(--brand); } .icon--muted { color: var(--muted-foreground); } /* Alineacion optica con la primera linea cuando acompana texto multilinea */ .icon--leading { margin-block-start: 0.2em; }