eos-icons-react

EOS Icons React package

Showing:

Popularity

Downloads/wk

13

GitHub Stars

10

Maintenance

Last Commit

1mo ago

Contributors

5

Package

Dependencies

0

License

MIT

Type Definitions

Tree-Shakeable

Yes?

Categories

Readme

eos-icons-react

Open Source Love svg2 NPM Package NPM Downloads

Using eos-icons-react in your projects

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.

Installation

# yarn
yarn add eos-icons-react
# npm
npm install eos-icons-react

Usage

common icons usage

import { EOS_STAR } from 'eos-icons-react';

<EOS_STAR />

Filled/Outlined icons usage

import { EOS_STAR_FILLED, EOS_STAR_OUTLINED } from 'eos-icons-react';

<EOS_STAR_FILLED />
<EOS_STAR_OUTLINED />

Animated icons usage

import { EOS_LOADING_ANIMATED } from 'eos-icons-react';

<EOS_LOADING_ANIMATED />

Props

Prop usage

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

Prop Details

NameTypeDefaultDescription
sizestring, number'm'sets the size of icon *
colorstringblacksets the color of icon
rotatestring, number0sets the rotation degree of icon
horizontalFlipbooleanfalseFlips icon horizontally
verticalFlipbooleanfalseFlips icon vertically
themestring'filled'sets icon theme (only available for common components)**
classNamestring''sets custom styling class for icon component

(*) Size can be provided using either string or number. Pre-Defined size list

Size NameSize Value
xs4
s8
base14
m18
l24
xl32
xxl48
xxxl64

(**) 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.

Development of EOS icons React

  • Cloning the repo:
git clone https://github.com/EOS-uiux-Solutions/eos-icons-react
  • run for installing all the required dependencies.
npm install

Package build command

  • run for producing the final build files.
npm run generate

Testing

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

Build process

Untitled-2021-07-18-1339

Learn more about the EOS Design System

Our "thank you" section

Tested for every browser in every device

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.

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial