Icon

3.2.0

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;

Anatomia do componente

O componente é composto por uma forma vetorial, que utiliza a nossa biblioteca Nimbus icons.

Guidelines

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.

Tamanhos

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.

AriaLabel

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.

Recomendação de uso

Ilustrar estados de um pedido
Ilustrar ações dentro de um botão
Ilustrar uma seção do aplicativo

Implementação

Instale o componente via terminal.

npm install @nimbus-ds/icon

Props

Propriedades adicionais são repassadas ao elemento <Icon>. Consulte a documentação do elemento div para ver a lista de atributos aceitos pelo elemento <Icon>.

Icon

Name	Type	Default	Description
source*	React.ReactNode		The SVG contents to display in the Icon.
color	'ai-generative' 'currentColor' 'danger-interactive' 'danger-surface' 'danger-textHigh' 'danger-textLow' 'neutral-background' 'neutral-interactive' 'neutral-surface' 'neutral-textDisabled' 'neutral-textHigh' 'neutral-textLow' 'primary-interactive' 'primary-surface' 'primary-textHigh' 'primary-textLow' 'success-interactive' 'success-surface' 'success-textHigh' 'success-textLow' 'warning-interactive' 'warning-surface' 'warning-textHigh' 'warning-textLow'	'neutral-textLow'	Set the color for the SVG fill. Use "ai-generative" to apply the Nimbus AI generative gradient.
cursor	'auto' 'grab' 'inherit' 'not-allowed' 'pointer'	'inherit'	The cursor property specifies the mouse cursor to be displayed when pointing over an element.

Icon.Skeleton

Name	Type	Description
width	string	Width of the skeleton. Useful when the skeleton is inside an inline element with no width of its own.
height	string	Height of the skeleton. Useful when you don't want to adapt the skeleton to a text element but for instance a card.
data-testid	string	This is an attribute used to identify a DOM node for testing purposes.