In addition to the core components, the Condo UI design system has its own icon set,
which is packed into the React component set and available for use as a separate npm package.
Installation
To add a set of icons to your JS project, run one of the following commands according to your package manager:
npm
yarn
pnpm
bashnpm i @open-condo/icons
Basic usage
typescriptimport { Wallet } from '@open-condo/icons' <Wallet/>
Each icon from the Condo UI is presented in 4 sizes:
large(24px x 24px)medium(20px x 20px)small(16px x 16px)auto(1em x 1em)
By default, all icons come in
large size. You can change the size of the icon using the size property:typescriptimport { Star } from '@open-condo/icons' <Star size='small'/>
Changing icon color
The icons can be colored.
To accomplish this, the rule
fill: currentColor is applied to the svg element.
In other words, the color is adjusted to the current value of the CSS property color of the parent element.typescriptimport { Mail } from '@open-condo/icons' <Mail color='#39ce66'/>