Star-icon-tag NPM

Install

$ npm i -D star-icon-tag

Usage

<star-icon fill="orange" />

import 'star-icon-tag'
...
riot.mount('star-icon')

Tag Properties

layers - Number of overlapping star layers. Default: 1
fill - Star fill color. Default: #555
arms - Number of star arms. Default: 5
ratio - Inner points radius / Outer points radius ratio. Default: 0.6
rotation - Rotation angle in degrees - Default: 0
zoom - Inner points radius / Outer points radius ratio - Default: 0.6

fill, arms, ratio, rotation and zoom can be either a single value or a comma-separated list of values for each layer. If the count of values does not match the number of layers, the list is trimmed or propagated with the first value.

Examples

Header star

<star-icon layers="6"
  fill="brown, orange ,yellow,  brown, orange, yellow"
  ratio="0.55, 0.5, 0.44, 0.55, 0.5, 0.44"
  rotation="0, 0, 0, 36, 36, 36"
  zoom="1, 0.95, 0.9, 0.50, 0.45, 0.4" />

Compass

<star-icon layers="8"
  arms="4"
  fill="black, white ,black,  white, black, #eee, black, #eee"
  ratio="0.16, 0.12, 0.16, 0.12, 0.16, 0.12, 0.16, 0.12"
  rotation="-22.5, -22.5, 22.5, 22.5, 0, 0, 45, 45"
  zoom="0.8, 0.75, 0.8, 0.75, 1, 0.95, 1, 0.95" />

Red

<star-icon layers="3"
  arms="5"
  fill="red, white, red"
  ratio="0.8, 0.6, 0.4"
  zoom="1, 0.95, 0.95" />

Squares

<star-icon layers="8"
  arms="4"
  fill="black, white, black, white, black, white, black, white"
  ratio="0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7"
  zoom="1, 0.9, 0.7, 0.6, 0.49, 0.39, 0.33, 0.23"
  rotation="45, 45, 0, 0, 45, 45, 0, 0, 45, 45, 0, 0" />