@kyndryl-design-system/shidoka-icons v1.5.0

Shidoka Icons

Contributing

Read the Contributing Guide here.

Usage

Install

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

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

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

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

Render the Icon

This will depend on your framework and the loader you've set up, but generally you'll just reference the import directly in your template, ex:

<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;
}