Refer to EOS Icons for more details about all the icons that are supported by EOS-Icons React
Storybook EOS-Icons React, checkout storybook for an in-depth look at the various different icons that are provided by EOS-Icons React as well the props available for configuring icons.
# yarn
yarn add eos-icons-react
# npm
npm install eos-icons-react
import { EOS_STAR } from 'eos-icons-react';
<EOS_STAR />
import { EOS_STAR_FILLED, EOS_STAR_OUTLINED } from 'eos-icons-react';
<EOS_STAR_FILLED />
<EOS_STAR_OUTLINED />
import { EOS_LOADING_ANIMATED } from 'eos-icons-react';
<EOS_LOADING_ANIMATED />
import { EOS_LOADING_ANIMATED } from 'eos-icons-react';
# The below icons will have the color #FF5733, size xxl and a rotation of 45 degree
<EOS_LOADING_ANIMATED color="#FF5733" size="xxl" rotate={45} className="icon"/>
| Name | Type | Default | Description |
|---|---|---|---|
| size | string, number | 'm' | sets the size of icon * |
| color | string | black | sets the color of icon |
| rotate | string, number | 0 | sets the rotation degree of icon |
| horizontalFlip | boolean | false | Flips icon horizontally |
| verticalFlip | boolean | false | Flips icon vertically |
| theme | string | 'filled' | sets icon theme (only available for common components)** |
| className | string | '' | sets custom styling class for icon component |
(*) Size can be provided using either string or number. Pre-Defined size list
| Size Name | Size Value |
|---|---|
| xs | 4 |
| s | 8 |
| base | 14 |
| m | 18 |
| l | 24 |
| xl | 32 |
| xxl | 48 |
| xxxl | 64 |
(**) The theme prop is only available for common icon component. Eos-Icons React has 4 different types of icon components (common / filled / outlined / animated). The common icon component contains both filled and outlined version of the icon. For switching between the two types of version you can either supply 'outlined' or 'filled' to the theme prop.
- Cloning the repo:
git clone https://github.com/EOS-uiux-Solutions/eos-icons-react
- run for installing all the required dependencies.
npm install
- run for producing the final build files.
npm run generate
Follow the above steps before running the test command. The test sequence requires the presence of the final build files in order to test them.
- run to start the testing of the final build files using Jest.
npm run test
We use semantic release to name our commits in order to trigger the correct version bump. For more information on semantic release and the keywords used go to our wiki
Thanks to Browserstack and their continuous contribution to open source projects, we continuously test the EOS to make sure all our features and components work perfectly fine in all browsers. Browserstack helps us make sure our Design System also delivers a peace of mind to all developers and designers making use of our components and layout in their products.