LiveChat Design System Icons

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.

Installation

Run the following command using npm (or with you other favorite package manager, eg. yarn):

npm install @livechat/design-system-icons --save

Basic usage

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" />;

Adding new icons

1. To install all necessary dependencies, run the following command:

   npm install
   

2. Next you need to prepare a SVG by replacing all color values in the stroke or/and fill attributes with currentcolor value. This will allow us to change the color of the icon using the color css property.

3. 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.

4. Then add new prop to IconsData in format <icon-name>: <icon-group-name>;.

5. Commit your changes and create a pull request. ⚠️ Commit message should follow the Conventional Commits naming pattern feat(icons): add new icon. ⚠️ This is crucial as, post squash merging, Git will use the PR name as the commit message.

6. After the pull request is merged, the changes will be published by the Design System team in the next release.