Icon
O componente Icon é utilizado quando precisamos ilustrar uma ação, estado ou texto dentro ou fora de outro 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;O componente é composto por uma forma vetorial, que utiliza a nossa biblioteca Nimbus icons.
Utilizamos esse componente para reforçar por meio de um ícone uma mensagem, estado ou ação que requer maior destaque em relação a um texto, por exemplo.
O Icon possui 3 tamanhos pré-definidos large, medium e small e devem ser utilizados levando em consideração o componente e contexto em que serão aplicados.
Esse componente não possui texto, porém ele possui uma tag (Aria Label) para facilitar sua identificação por pessoas com algum tipo de limitação visual ou cognitiva. Por isso precisamos agregar uma descrição que deixe clara a função do ícone.
- Ilustrar estados de um pedido
- Ilustrar ações dentro de um botão
- Ilustrar uma seção do aplicativo
Instale o 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.