Rating
Often you want to display a kind of rating for an item on your webpage. A widely used form to display this rating is a number of icons (for example stars) where the number of filled stars represent the rating.
Usage
You can import the Rating component from the design system like so:
import Rating from "@finanzchef24gmbh/design-system/src/Rating";
The component accepts the following props:
| Property name | Type | Required | Values | Default |
|---|---|---|---|---|
| icon | React.ReactNode | ✅ | - | |
| numberOfIcons | number | - | 5 | |
| iconScale | string | tiny, small, big | small | |
| spacingScale | string | tiny, small, big | small | |
| score | number | ✅ | - |
The icon prop defined the icon that should be rendered. Note that this component
has to render svg.
The score property should be a number between 0 and 100 that represents the
percentage to which the renders icons should be filled.