Marca

Iconos

Dos familias. Los iconos de interfaz son marcas de una sola línea que acompañan a un control o a una fila. Los iconos de producto representan cada servicio de VADAVO y llevan su propio dibujo a color.

Iconos de interfaz

<vadavo-icon name="…"> inyecta la marca dentro de su propio shadow root, así que resuelve currentColor contra el color del elemento que la contiene. Mide 1em por defecto: sigue al tamaño de letra de donde esté, y se le puede fijar otro tamaño desde fuera.

Todas están dibujadas sobre una caja de 24×24, con trazo de 1,7 y remates redondos, para que pesen lo mismo unas al lado de otras.

<vadavo-icon name="arrow"></vadavo-icon>
<vadavo-icon name="bell"></vadavo-icon>
<vadavo-icon name="check"></vadavo-icon>
<vadavo-icon name="chevron"></vadavo-icon>
<vadavo-icon name="cross"></vadavo-icon>
<vadavo-icon name="cross-circle"></vadavo-icon>
<vadavo-icon name="home"></vadavo-icon>
<vadavo-icon name="info"></vadavo-icon>
<vadavo-icon name="menu"></vadavo-icon>
<vadavo-icon name="play"></vadavo-icon>
<vadavo-icon name="plus"></vadavo-icon>
<vadavo-icon name="search"></vadavo-icon>
<vadavo-icon name="warning"></vadavo-icon>

Color y tamaño

El icono lee el color y el font-size calculados de su contenedor.

<span style="font-size: 2rem; color: var(--text--color--display)"><vadavo-icon name="search"></vadavo-icon></span>
<span style="font-size: 2rem; color: var(--state--color--error)"><vadavo-icon name="cross-circle"></vadavo-icon></span>
<span style="font-size: 1rem; color: var(--text--color--meta)"><vadavo-icon name="search"></vadavo-icon></span>

El chevron apunta a la derecha

Una sola marca cubre las cuatro direcciones: quien la coloca la gira.

<vadavo-icon name="chevron"></vadavo-icon>
<vadavo-icon name="chevron" style="rotate: 90deg"></vadavo-icon>
<vadavo-icon name="chevron" style="rotate: 180deg"></vadavo-icon>
<vadavo-icon name="chevron" style="rotate: 270deg"></vadavo-icon>

Iconos de producto

Un icono por servicio, en dos versiones: la de color y la blanca, para colocarlo sobre un fondo oscuro.

Fibra

VPS

Hosting

Telefonía

Dominios