npm package: @kyndryl-design-system/shidoka-icons
Description: Shidoka Icons
Latest version: 2.23.0

# Shidoka Icons

[![Release](https://github.com/kyndryl-design-system/shidoka-icons/actions/workflows/release.yml/badge.svg)](https://github.com/kyndryl-design-system/shidoka-icons/actions/workflows/release.yml)

## Contributing

Read the [Contributing Guide](CONTRIBUTING.md) here.

## Usage

### Install

```bash
npm install -S @kyndryl-design-system/shidoka-icons
```

### Set a color scheme

More info on color schemes in the [Foundation Storybook](https://shidoka-foundation.netlify.app/?path=/docs/foundation-colors--docs#setting-a-theme).

### Set up an SVG Inline Loader

Below is a list of links to some loaders that should work for most projects:

Generic loaders:

- [Vite SVG Loader](https://www.npmjs.com/package/vite-svg-loader)
- [Webpack SVG Inline Loader](https://www.npmjs.com/package/svg-inline-loader)
- [Rollup Plugin SVG](https://www.npmjs.com/package/rollup-plugin-svg)

React [SVGR](https://react-svgr.com/) loaders:

- [Vite Plugin SVGR](https://www.npmjs.com/package/vite-plugin-svgr)
- [@svgr/webpack](https://www.npmjs.com/package/@svgr/webpack)
- [@svgr/rollup](https://www.npmjs.com/package/@svgr/rollup)

Angular loaders:

- [Angular SVG Icon](https://www.npmjs.com/package/angular-svg-icon)

### Import an Icon

_Example only, refer to loader documentation._

```js
// monochrome. 4 sizes available: 16, 20, 24, 32
import iconName from '@kyndryl-design-system/shidoka-icons/svg/monochrome/<size>/<icon-name>.svg';

// duotone. one size available (48, 64, 96)
import iconName from '@kyndryl-design-system/shidoka-icons/svg/duotone/<size>/<icon-name>.svg';
```

### Render the Icon

_Example for Lit, refer to loader/framework documentation._

```html
<div>${iconName}</div>
```

### Customize the icon

#### Monochrome Fill

Monochrome icons use `fill="currentColor"` by default, so they will inherit the CSS text color. You can override this by specifying a CSS `fill` on the SVG element. Example:

```css
svg {
  fill: red;
}
```

#### Duotone Fill

Duotone icons have two layers, `primary` and `secondary`, and default colors of Primary `#29707A` and Secondary `#5FBEAC`. These can be customized by changing the fill color of each layer. Example:

```css
svg .primary {
  fill: red;
}

svg .secondary {
  fill: blue;
}
```

#### Icon Size

Generally you should import the icon of the size you need. Since they are vectors, if needed they will scale to any size via CSS override. Example:

```css
svg {
  width: 128px;
  height: 128px;
}
```

## Iconify Icon Sets

Pre-built [Iconify](https://iconify.design/) JSON icon sets are included in the package for use with any Iconify-compatible library or tool (e.g. Iconify web components, Mermaid.js, UnoCSS, etc.).

### Available Icon Sets

| Import name    | Prefix       | Size | Type       |
| -------------- | ------------ | ---- | ---------- |
| `monochrome16` | `kd-mono-16` | 16   | Monochrome |
| `monochrome20` | `kd-mono-20` | 20   | Monochrome |
| `monochrome24` | `kd-mono-24` | 24   | Monochrome |
| `monochrome32` | `kd-mono-32` | 32   | Monochrome |
| `duotone48`    | `kd-duo-48`  | 48   | Duotone    |
| `duotone64`    | `kd-duo-64`  | 64   | Duotone    |
| `duotone96`    | `kd-duo-96`  | 96   | Duotone    |

### Import

```js
import { monochrome32, duotone48 } from '@kyndryl-design-system/shidoka-icons';

// Or import individual JSON files directly
import monochrome32 from '@kyndryl-design-system/shidoka-icons/monochrome-32.json' with { type: 'json' };
import duotone48 from '@kyndryl-design-system/shidoka-icons/duotone-48.json' with { type: 'json' };
```

### Usage with `addCollection()` (Iconify)

```js
import { addCollection } from '@iconify/iconify';
import { monochrome32 } from '@kyndryl-design-system/shidoka-icons';

addCollection(monochrome32);

// Use icons as: prefix:icon-name
```

### Usage with Mermaid.js

```js
import { monochrome32 } from '@kyndryl-design-system/shidoka-icons';

mermaid.registerIconPacks([
  {
    name: monochrome32.prefix, // 'kd-mono-32'
    icons: monochrome32,
  },
]);
```

Then reference icons in your Mermaid diagrams using the prefix:

```
architecture-beta
  service icon[prefix:icon-name](My Service)
```