# @wedgekit/icons

> ## Purpose

Latest version **4.9.0** (published 2023-10-04) · MIT license · 0 weekly downloads

## Install

```sh
npm install @wedgekit/icons
pnpm add @wedgekit/icons
yarn add @wedgekit/icons
bun add @wedgekit/icons
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 4.9.0 |
| Published | 2023-10-04 |
| First published | 2019-08-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 109.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | tprettyman, rnimrod, jquerijero, brent-heavican, msuiter, rerskine, daniel.z, timmy2654, jfiller, mada1113, hbiede.dmsi, jaradpiniarski, kolson, dreadman3716 |

## Links

- npm: https://www.npmjs.com/package/@wedgekit/icons
- Repository: https://design.dmsi.com/
- npm.io page: https://npm.io/package/@wedgekit/icons

## Dependencies (2)

- [@wedgekit/color](https://npm.io/package/@wedgekit/color.md) 4.6.0
- [@wedgekit/primitives](https://npm.io/package/@wedgekit/primitives.md) 5.0.1

## Recent versions

- 4.9.0 (latest) — 2023-10-04
- 4.6.1-tc.1 (test) — 2023-05-04
- 1.1.0-rc.1 (beta) — 2019-09-13
- 4.7.0 — 2023-05-05
- 4.6.1-tc.0 — 2023-05-04
- 4.6.0 — 2023-05-03
- 4.5.0 — 2023-02-28
- 4.4.2-tc.5 — 2023-02-28
- 4.4.2-tc.4 — 2023-02-28
- 4.4.2-tc.3 — 2023-02-28
- 4.4.2-tc.2 — 2023-01-26
- 4.4.2-tc.1 — 2023-01-24
- 4.4.2-tc.0 — 2023-01-24
- 4.4.2 — 2022-11-09
- 4.4.1 — 2022-11-08
- … 87 more at https://npm.io/package/@wedgekit/icons/versions

## README

# Icons

## Purpose

The icon package provides approved svg's for use in wegekit related applications.

## Usage

```jsx
import Icon, { IconWidth } from '@wedgekit/icons';

const Example = () => (
  <IconWidth iconWidth={64}>
    <Icon> save </Icon>
  </IconWidth>
);

render(<Example />);
```

## Props

### children

Type: `IconTag`

Required: ✅

The child of an Icon component is an `IconTag`. An `IconTag` is a snake-cased name of a provided icon. A full list can be found [here](/visualGuidelines/icons/design)

### className

Type: `string`

required: ❌

This is exposed but is only here so that styled-components will be able to style components correctly. Please do not use this unless you really know what you are doing.

### color

Type: `ColorTag`

Required: ❌

Icon color. All `ColorTag` options can be found [here](/visualGuidelines/color/design).

### disabled

Type: `boolean`

Required: ❌

A disabled icon will have a `not-allowed` cursor styling.

## Development

Icons offers a `yarn start` command for watching changes made on the module. It is important to note that the expectation is that this is only really useful when doing development on the `Icon` component. Any changes to the svg folder would not be compiled unless `yarn build:icons` is manually run. Typically the work of adding icons versus working on the Icon component will be done separately, so this will be rare.

## Named Exports

Icons offers a few icons component with unique animations and stylings. They are listed here with links to their own doc pages.

[Chevron](resources/chevron/dev) - A horizontal chevron than can switch between facing up or down

[IconWidth](resources/iconwidth/dev) - A wrapper used to size a child icon component

[Interactivewrapper](resources/interactivewrapper/dev) - An Icon Button

_Note:_ InteractiveWrapper is no longer recommended. Instead please use [IconButton](/components/button/components/iconbutton/dev)

[Sort](resources/sort/dev) - A `sort` icon that can be styled to indicate descending or ascending order

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