@kyndryl-design-system/shidoka-icons
v1.9.0
Published
Shidoka Icons
Downloads
8,963
Keywords
Readme
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:
React SVGR loaders:
Angular loaders:
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/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
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;
}