Icon
El componente Icon es utilizado cuando necesitamos ilustrar una acción, estado o texto dentro o fuera de otro componente.
import React from "react";
import { Icon } from "@nimbus-ds/components";
import { TiendanubeIcon } from "@nimbus-ds/icons";
const Example: React.FC = () => (
<Icon color="primary-textLow" source={<TiendanubeIcon size="large" />} />
);
export default Example;El componente se compone de una forma vectorial, que utiliza nuestra biblioteca Nimbus Icons.
Usamos este componente para reforzar por medio de un icono un mensaje, estado o acción que requiere mayor destaque en relación a un texto, por ejemplo.
El Icon posee 3 tamaños pre-definidos: Large, medium y small. Estos deben ser usados teniendo en cuenta el componente y contexto en el que serán aplicados.
Este componente no posee texto, por lo que posee una tag (Aria Label) para facilitar su identificación por personas con algún tipo de limitación visual o cognitiva. Por eso debemos agregar una descripción que deje clara la función del icono.
- Ilustrar estados de un pedido
- Ilustrar acciones dentro de un botón
- Ilustrar una sección de una aplicación
Instalá el componente via terminal.
npm install @nimbus-ds/iconAdditional props are passed to the <Icon> element. See div docs for a list of props accepted by the <Icon> element.