star-icon-tag
v0.0.5
Published
Make SVG Stars
Downloads
16
Maintainers
Readme
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" />
See also
https://github.com/nhz-io/star-icon-hapi
License
MIT © Ishi Ruy