React Icons Rating

Simple react component to display rating in any svg icon you want.

---

List of features

• Custom number of icons
• Custom Fill/Stroke/Background color
• Floating point rating
• Custom icons
• Working in both directions (horizontal & vertical)

Code Demo

<RatingIcons
    numOfIcons={5}
    rating={4.63}
    fillColor="#f00"
    strokeWidth={0}
    size={50}
    iconPadding={5}
    direction="row"
    customIcon={{
        path: heartPath,
        viewBox: '0 0 35 28'
    }}
    backgroundColor="#d3d3d3"
/>

Download & Installation

npm i react-icons-rating

import RatingIcons from 'react-icons-rating';

Props

NAME	TYPE	DEFAULT	DESCRIPTION
numOfIcons	Number	-	Number of icons to be displayed
rating	Number	-	How much icons should be colored
iconPadding	Number	10	Distance between icons in pixels
size	Number	20	Icon size in pixels
fillColor	String	#FF0000	Color of a filled icon in HEX
backgroundColor	String	#FFFFFF	Color of an unfilled icon in HEX
stokeColor	String	same as fillColor	Color of an icon border in HEX
strokeWidth	Number	2	Stroke width in pixels
direction	row / column	row	Direction of stars
customIcon	Object	see below	Custom object of path and viewbox of SVG icon

To pass a custom icon, create an object with two keys:

{
  path: string;
  viewBox: string;
}

i.e.

const customIcon = {
  path: 'M25.808 0A9.186 9.186 0 0017.5 5.3 9.18 9.18 0 000 9.27C0 22.421 17.5 28 17.5 28S35 22.421 35 9.27A9.231 9.231 0 0025.808 0',
  viewBox: '0 0 35 28',
};

License

This project is licensed under the MIT License