# @elemental-ui-alpha/icon

> Icons are used to visually communicate parts of your application and available actions.

Latest version **0.0.2** (published 2020-04-24) · 0 weekly downloads

## Install

```sh
npm install @elemental-ui-alpha/icon
pnpm add @elemental-ui-alpha/icon
yarn add @elemental-ui-alpha/icon
bun add @elemental-ui-alpha/icon
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; low quality score; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.2 |
| Published | 2020-04-24 |
| First published | 2020-04-23 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 5 |
| Unpacked size | 732.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | dsf-release-bot, mitchellhamilton |

## Links

- npm: https://www.npmjs.com/package/@elemental-ui-alpha/icon
- npm.io page: https://npm.io/package/@elemental-ui-alpha/icon

## Dependencies (5)

- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.8.3
- [@primer/octicons](https://npm.io/package/@primer/octicons.md) ^9.6.0
- [@elemental-ui-alpha/core](https://npm.io/package/@elemental-ui-alpha/core.md) ^0.0.2
- [@elemental-ui-alpha/theme](https://npm.io/package/@elemental-ui-alpha/theme.md) ^0.0.0
- [@elemental-ui-alpha/utils](https://npm.io/package/@elemental-ui-alpha/utils.md) ^0.0.2

## Recent versions

- 0.0.2 (latest) — 2020-04-24
- 0.0.1 — 2020-04-23
- 0.0.0 — 2020-04-23

## README

# 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.

```jsx
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.

```jsx live render
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>
);
```

---
_Source: https://npm.io/package/@elemental-ui-alpha/icon · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._