Skip to main content

Icon

Used to display Pando Icons.

Anatomy

  1. Container (optional)
  2. Icon

Import

import { Icon } from '@pluralsight/react'

Usage

Examples

function IconSizes() {
  return (
    <Grid cols="repeat(12, 1fr)" gap={8} data-site-override="alignGridCenter">
      <GridItem>
        <Icon icon={PlaceholderIcon} size="s" />
      </GridItem>
      <GridItem>
        <Icon
          ariaHidden={false}
          ariaLabel="visible icon"
          icon={PlaceholderIcon}
          size="m"
        />
      </GridItem>
      <GridItem>
        <Icon icon={PlaceholderIcon} size="l" />
      </GridItem>

      <GridItem>
        <Icon icon={PlaceholderIcon} customSize="5rem" />
      </GridItem>
    </Grid>
  )
}

Customizing

There are 3 ways to customize the Icon component.

1. Unused Classes

Each component layer of the Icon has a unused class name that can be utilized in your local CSS to customize the Icon at any level.

  1. pando-icon: The element of the Icon.

2. Passing a className prop

You can pass a className prop to the Icon component to customize the Icon. This is useful if your project uses CSS Modules or a CSS-in-JS library like Emotion.

import customStyles from './customStyles.module.css'

function CustomIcon(props) {
  return <Icon className={customStyles.custom}>{props.children}</Icon>
}

3. Ejected Icon

For a low-level "ejected" approach, you can use the Headless-styles API to customize the Icon however you prefer while keeping the accessibility behavior.

import { getIconProps } from '@pluralsight/headless-styles'

To learn more about the Headless-styles API, check out the Headless-styles documentation.

Behavior

There are no behavior patterns required for the Icon.

API

Parameters

interface IconProps extends SVGAttributes<SVGSVGElement> {
  ariaHidden?: boolean
  ariaLabel?: string // Required if ariaHidden is false
  customSize?: string
  size?: 's' | 'm' | 'l'
}
  1. Any prop that can be passed to an SVG element.
  2. Ref is forwarded to a span container element.
  3. ariaHidden is a boolean that determines whether the icon is hidden from screen readers. If ariaHidden is false, ariaLabel is required.
  4. ariaLabel is a string that is read by screen readers. It is required if ariaHidden is false.
  5. customSize is a string that sets the width and height of the icon. It overrides the size prop.
  6. size is a string that sets the width and height of the icon. It is overridden by the customSize prop.

Accessibility

The Pando Icon is fully accessible and screen-readable through the following features:

  1. The ariaHidden prop hides the icon from screen readers if set to true.
  2. The ariaLabel prop is required if ariaHidden is false.
  3. The role prop is set to img by default.