Modern Rating Component as Web Component Built with Stencil.js

Author - Digvijay

The rating component is generated using a Stencil.js. This is our first experiment to generate truly web component which can work in any framework or in vanilla javascript also. Stencil.js provides so much handy tooling and APIs which makes building web-components so easy and fun. Infect Stencil.js adds required polyfill also and that way it runs on almost all mobile and desktop browsers.
Before we move further I would like to give credit to Lea Verou for inspiring me on this topic.

Why another Rating Component?

Ok, so currently there are many open source rating components. But all of them just built with selected and not selected star image. Also its really hard to make them responsive and size it as per our exact requirement. Mostly not supporting auto height and width. Then again we can’t build a rating component with just our own drawn SVG. And most importantly, those rating components never showing so accurate result like “4.25 out of 5”.

In this component, we can set rating icons using two ways :
1.  Set icons as a unicode text icon, eg `♥`, `♠`, `♣`
2.  Provide SVG URL to set it as rating icon

Here I will also cover on using Font-Awesome icon.

So let’s see how to use it and what are the options we can set.


npm i @logisticinfotech/rating-component

We can also directly use it by importing javascript

<script src="">

 Usage examples:

 svgIconPath="url for svg" // If text-icon set, then ignored
 fillMode="half" // full, half, precise(Default)
 font-size="45" // required for text-icon
 stroke-color="rgb(255, 102, 229)"
 color="rgb(255, 153, 255)"

Available options are :

1) fillMode (Optional) string : This option changes rating value as per the given mode. There are three modes are available `full`, `half` and `precise`. Default value is `precise`.

2) textIcon (Optional) string To set icons as a text character in rating component. This text icons  looks likes :  `♥`, `♠`, `♣`, etc. Default value is ``.

3) svgIconPath (Optional) string : This option sets the icon from the given path of the `SVG` file. In this option, we can set any `SVG` file in our li-rating component. Will be ignored if textIcon is set.

4) totalIcons (Optional) number : Indicates how many icons li-rating component will generate. Default value is `5`.

5) color (Optional) string : This options set the color of the icons for li-rating component. With this option we can set the colours in `RGB` , `hex Code` and can pass name of the color also. Default value is `black`..

6) opacity (Optional) number : This option changes the opacity of an unselected icons in the li-rating component. Default value is `0.3`.

7) value
 (Optional) number : Useful to pass existing value of rating. Default value is `0`.

8) fontSize (Optional) number : Using this option we can set the font-size of text icon. Only used for textIcon. Default value is `45`.

9) strokeColor (Optional) string : We can set border/stroke color in text icon using this option. With this option we can set the colours in `RGB` , `hex Code` and direct name of the color. Only used for textIcon. Default value is `black`.

10) strokeWidth (Optional) string : We can set border/stroke width in text icon using this option. Again only useful for textIcon. Default value is `0`.

Available Event :

=> input : This event will be called when we change the rate in rating component.

Available Method :


=> setSvgString(svgHtml) : This method sets the icon using the SVG as a string.

We can pass SVG file as a string in this method.

NOTE :  For now only javascript example will be given to you for reference. In future we will provide you more example for angular, react, etc…

=> How to subscribe to rate change event

 .addEventListener('input', event => {
        console.log('change rate =>' ,event);

=> How to use setSvgString method to pass svg as string

var liRating = document.getElementById('yourElementId');
liRating.componentOnReady().then(() => {

Using font-awesome icon as a rating component icon

As we have seen, we have option to pass SVG as a string to li-rating component.
So if we can find a way to get font-awesome icon as SVG string, then we just need to pass it to our rating component via above method. Well we already found a way.
So firstly, we need to import font-awesome as SVG,

<script src="">

Now with little bit of javascript we will extract icon as SVG string and pass it to our rating meter.

var smileBeam = window.FontAwesome.icon({
  prefix: 'fas',
  iconName: 'smile-beam'

var liRating = document.getElementById('liRatingFontAwesome');
liRating.componentOnReady().then(() => {

And that’s it, you should have smile font-awesome icon settled.

Here is live working example of it.

Here is open source GitHub repo also. Looking forward to get feedbacks from community.
Feel free to report bugs and request features.

Logisticinfotech rating component

Don’t miss the next post!


Related Posts