How to change size?

[heeji289]

<div id="star-rating"></div>

const starRating = new Starry(starRatingEl);

starRating.update({
  stars: 6
})

I use starry like above. I thougt I can change stars size by changing css file with selector '#star-rating' like this,

#star-rating {
  width: 20px;
}

but it didn't do anything about sizing stars

In your documentation, stars are small... Can you tell me how to change size of stars?

[Teddy95]

Hey, sorry for the late answer :)

The icon size comes from the icon svg files. The initial star icons are the following with a default size of 24x24 px: https://github.com/Teddy95/Starry/tree/master/dist/icons

If you want to change the icon size you can use your own icons or edit the default icons in the Sketch file and export them.

Load custom icons with the icons option:

var starRating = new Starry(starRatingEl, {
    icons: {
        // File path, uri or base64 string for `src` attribute
        blank: '../pathToIcons/blank.svg',
        hover: '../pathToIcons/hover.svg',
        active: '../pathToIcons/active.svg'
    }
});

Starry will automatically size the star rating to the size of the icons.

Best, Andre