Shidoka Icons

Contributing

Read the Contributing Guide here.

Usage

Install

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

Set a color scheme

More info on color schemes in the Foundation Storybook.

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
• Webpack SVG Inline Loader
• Rollup Plugin SVG

React SVGR loaders:

• Vite Plugin SVGR
• @svgr/webpack
• @svgr/rollup

Angular loaders:

• Angular SVG Icon

Import an Icon

Example only, refer to loader documentation.

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

<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:

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:

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:

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

Iconify Icon Sets

Pre-built Iconify 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

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)

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

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)