Помимо основных компонентов в дизайн-системе Condo UI есть свой собственный набор иконок,
который запакован в набор React-компонентов и доступен для использования в качестве отдельного npm-пакета.
Установка
Для добавления набора иконок в JS-проект выполните одну из следующих команд в соответствии с вашим пакетным менеджером:
npm
yarn
pnpm
bashnpm i @open-condo/icons
Базовое использование
typescriptimport { Wallet } from '@open-condo/icons' <Wallet/>
Изменение размера
Каждая иконка из Condo UI представлена в 4 размерах:
large(24px x 24px)medium(20px x 20px)small(16px x 16px)auto(1em x 1em)
По умолчанию все иконки имеют размер
large. Изменить размер иконки можно с помощью свойства size:typescriptimport { Star } from '@open-condo/icons' <Star size='small'/>
Изменение цвета иконок
Иконки можно красить.
Для этого к элементу
svg применено правило fill: currentColor.
Иными словами, цвет подстраивается под текущее значение CSS-свойства color родительского элемента.Цвет иконки также можно задать с помощью параметра
color у самой иконки:typescriptimport { Mail } from '@open-condo/icons' <Mail color='#39ce66'/>