@elemental-ui-alpha/icon v0.0.2

Icon

Icons are used to visually communicate core parts of the product and available actions. They can act as wayfinding tools to help users more easily understand where they are in the product, and common interaction patterns that are available.

import { ChevronRightIcon } from '@elemental-ui-alpha/icon/ChevronRightIcon'; // prefer explicit entry point
import { ChevronRightIcon, ... } from '@elemental-ui-alpha/icon'; // only when using **many** icons

All Icons

Find the icon that meets your needs.

const [match, setMatch] = React.useState('');
const onlyMatches = i =>
  i
    .slice(0, -4) // remove "Icon"; avoid invalid matches
    .toLowerCase()
    .includes(match.toLowerCase());

return (
  <Stack gap="medium">
    <TextField
      label="Search Icons"
      labelVisibility="hidden"
      onChange={e => setMatch(e.target.value)}
      placeholder="Search..."
      type="search"
      value={match}
    />
    <div
      style={{
        display: 'grid',
        gap: 12,
        gridTemplateColumns: 'repeat(auto-fill, minmax(144px, 1fr))',
      }}
    >
      {Object.keys(icons)
        .sort()
        .filter(onlyMatches)
        .map(key => {
          let Icon = icons[key];
          const c = 'center';

          return (
            <Flex align={c} direction="vertical" justify={c} paddingY="large">
              <Icon fill="B400" />
              <Box marginTop="small">{Icon.displayName}</Box>
            </Flex>
          );
        })}
    </div>
  </Stack>
);