Icon

3.0.1

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;

Anatomía del componente

El componente se compone de una forma vectorial, que utiliza nuestra biblioteca Nimbus Icons.

Guidelines

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.

Tamaños

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.

AriaLabel

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.

Recomendaciones de uso

Ilustrar estados de un pedido
Ilustrar acciones dentro de un botón
Ilustrar una sección de una aplicación

Implementación

Instalá el componente via terminal.

npm install @nimbus-ds/icon

Props

Additional props are passed to the <Icon> element. See div docs for a list of props accepted by the <Icon> element.

Icon

Name	Type	Default	Description
source*	React.ReactNode		The SVG contents to display in the Icon.
color	'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.
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.