calcite-ui-icons-react

Calcite UI Icons as individual React components. https://esrips.github.io/cui-icons-reference/

Installation

npm i calcite-ui-icons-react

Quick Start

Here are some quick examples:

import BikingIcon from 'calcite-ui-icons-react/BikingIcon';
import ArticleIcon from 'calcite-ui-icons-react/ArticleIcon';
import CircleIcon from 'calcite-ui-icons-react/CircleIcon';

const MyComponent = () => (
  <div>
    <BikingIcon size={36} />
    <ArticleIcon color="#ddd" />
    <CircleIcon size={48} color="rgba(255, 255, 255, 0.5)" />
  </div>
);

Component Names

Find the icon you want to use here: https://esri.github.io/calcite-ui-icons/

The name of the React component you will import is simply the icon name in PascalCase suffixed with Icon.

For example:

If you want to use the globe and caret-square-down icons...

import GlobeIcon from 'calcite-ui-icons-react/GlobeIcon';
import CaretSquareDownIcon from 'calcite-ui-icons-react/CaretSquareDownIcon';

const MyComponent = () => (
  <div>
    <GlobeIcon />
    <CaretSquareDownIcon />
  </div>
);

Sizes

Calcite UI Icons come in three size variations: 16px, 24px, and 32px. Note that these are three unique SVGs to avoid issues when scaling vector graphics. You can read more about this here.

Each component in this library includes all three of these unique SVGs - simply pass a size prop, and we'll pick the right one for you. Note that if you don't include a size prop, it defaults to 24. The 32px SVG will be used whenever a size prop greater than 24 is found.

import Globe from 'calcite-ui-icons-react/Globe';

const MyComponent = () => (
  <div>
    {/* size will be 24, 24px version of SVG will be used */}
    <Globe />

    {/* size will be 12, 12px version of SVG will be used */}
    <Globe size={12} />

    {/* size will be 48, 32px version of SVG will be used */}
    <Globe size={48} />
  <div>
)

Color

All components accept a color prop, which will be applied to the fill attribute on the <svg> element. This means any valid CSS color value can be used (e.g. "red", "#e34f2c", "rgba(255, 0, 0, 0.5)"). If a color prop is not found, we will set it to "currentColor".

Styling

All components get a calcite-ui-icon css class that you can use for generic styling. We merge in a className prop if you provide one. We also spread all other props onto the <svg> element for you.

Gotchas

Since JavaScript variables cannot start with a number - we convert any icon name that begins with a number so that the word (or words, in PascalCase) are used instead.

Currently, there are only two such cases:

| Calcite UI Icons name | React Component Name | | --------------------- | -------------------- | | 2d-explore | TwoDExplore | | 3d-glasses | ThreeDGlasses |