The icons package provides a collection of icons that can be used to enhance the visual appeal of your applications. These icons are designed to be customizable and easy to incorporate into your projects.
Run the following command using npm (or with you other favorite package manager, eg. yarn):
npm install @livechat/design-system-icons --save
To use icons simply import them from the package:
import { Edit } from '@livechat/design-system-icons';
<Edit />;
But our icons are designed to be used in conjunction with our components library, @livechat/design-system-react-components
. To use them in this manner, you need to install both packages. Please also refer to the installation guide for the LiveChat React Components package.
npm install @livechat/design-system-react-components @livechat/design-system-icons --save
And then import them like this:
import { Edit } from '@livechat/design-system-icons';
import { Icon } from '@livechat/design-system-react-components';
<Icon source={Edit} kind="primary" />;
-
To install all necessary dependencies, run the following command:
npm install
-
Next you need to prepare a SVG by replacing all color values in the
stroke
or/andfill
attributes withcurrentcolor
value. This will allow us to change the color of the icon using thecolor
css property. -
To add a new icon, you need to add a prepared SVG file to the
./svg
directory. The file name should be in the snake_case format with-filled
addition in the name for filled icon variants. -
Then add new prop to
IconsData
in format<icon-name>: <icon-group-name>;
. -
Commit your changes and create a pull request.
⚠️ Commit message should follow the Conventional Commits naming patternfeat(icons): add new icon
.⚠️ This is crucial as, post squash merging, Git will use the PR name as the commit message. -
After the pull request is merged, the changes will be published by the Design System team in the next release.