❤
npm
Sign UpSign In

5stars

1.0.0 • Public • Published

5star

⭐️⭐️⭐️⭐️⭐️

A quickly generating 5 stars for rating based on SVG technique utility tool.

CHINESE DOC

Features

  • supports display and click modes.
  • optimizes SVG files by sogo.
  • supports remote url file and local file.
  • generates fast.
  • supports configuration and cli usages.

Warn ⚠️

  • normal svg file and active svg file must be the same size, the both files are required as well.
  • normal svg file and active svg file need to be filled，in order to ensure 'click' mode work.

Try it out

  • display mode
npx 5stars -a https://raw.githubusercontent.com/zhansingsong/5stars/master/svgs/emoji-a.svg -b https://raw.githubusercontent.com/zhansingsong/5stars/master/svgs/emoji-b.svg -o output-emoji.svg -s 20

output-emoji.svg

  • click mode
npx 5stars -a https://raw.githubusercontent.com/zhansingsong/5stars/master/svgs/emoji-a.svg -b https://raw.githubusercontent.com/zhansingsong/5stars/master/svgs/emoji-b.svg -o output-emoji-click.svg -m click -s 20

output-emoji-click.svg

Getting started

  • If there is the following directory structure: examples

    examples
    ├── config.json
    ├── star-active.svg
    └── star-normal.svg

  • config.json

    {
      "normal": "star-normal.svg",
      "active": "star-active.svg",
      "space": 0,
      "width": "auto",
      "height": "auto",
      "computeSpace": true,
      "mode": "display",
      "output": "output.svg"
    }

  • run the following command in current directory examples

    ➜  examples git:(master) ✗ npx 5stars
    5stars  start generating ...
            complete reading star-active.svg
            complete reading star-normal.svg
            complete creating new symbol element star-a
            complete creating new symbol element star-b
            start to output output.svg
            done!

  • output.svg

    output

Usage

npx 5stars # use default config.json
npx 5stars -c yourConfigFile
npx 5stars --a star-normal.svg --b star-active.svg

  • display mode

    <!-- output.svg -->
    <svg class="5stars-svg" data-width="0.5" id="5stars-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%"
    viewBox="0 0 309.335 53.867">
      <!-- Generator: 5stars. https://github.com/zhansingsong/5stars -->
      <!-- content -->
    </svg>

    manipulate output.svg how to display by data-width="0.5" attribute of the output svg.

    The following output is data-width="0.7":

  • click mode

    <svg class="5stars-svg" id="5stars-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%"
    viewBox="0 0 309.335 53.867">
      <!-- Generator: 5stars. https://github.com/zhansingsong/5stars -->
      <!-- content -->
    </svg>

    If you want to control when the click operation ends, You can override window._5stars_click_cb_(n):

    window._5stars_click_cb_ = function (n) {
      // end click operation when returning true
      return n == 5;
    }

    Example

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>5stars click mode</title>
    </head>
    <body>
      <script>
      window._5stars_click_cb_ = function (n) {
        // end click operation when returning true
        return n == 5;
      }
      </script> 
     
      <svg class="5stars-svg" id="5stars-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  width="100%" height="100%"
      viewBox="0 0 269.335 53.867">
        <!-- Generator: 5stars. https://github.com/zhansingsong/5stars -->
        <!-- content -->
      </svg>
    </body>
    </html>

config options

// defaults
const config = {
  // normal svg file
  normal: undefined,
  // active svg file
  active: undefined,
  // space between stars
  space: 0,
  // width of normal and active svg files
  width: 'auto',
  // height of normal and active svg files
  height: 'auto',
  // output path
  output: './output.svg',
  // if space isn't included on computing svg width.
  computeSpace: false,
  // generation mode: display | click
  mode: 'display'
};
  • normal: normal svg file, required.
  • active: active svg file, required.
  • space: space between stars.
  • width: width of normal and active svg files.
  • height: height of normal and active svg files.
  • output: output path relative to current directory.
  • computeSpace: if space isn't included on computing svg width.
  • mode: generation mode
    • display
    • click

CLI

Usage: 5stars [options]

Options:
  -v, --version           output the version number
  -c, --config [config]   config file
  -a, --normal [normal]   normal svg file
  -b, --active [active]   active svg file
  -s, --space [space]     space between stars
  --width [width]         width of normal and active svg files
  --height [height]       height of normal and active svg files
  -o, --output [output]   output path
  -m, --mode [mode]       generation mode
  -M, --no-compute-space  if space is not included on computing svg width.
  -h, --help              output usage information

Examples:

  $ 5stars # use default config.json
  $ 5stars -c yourConfig.json
  $ 5stars -a star-normal.svg -b star-active.svg

License

MIT.

Readme

Keywords

none

Package Sidebar

Install

npm i 5stars

Weekly Downloads

0

Version

1.0.0

License

none

Unpacked Size

21.8 kB

Total Files

6

Last publish

Collaborators

  • zhansingsong
Try on RunKit
Report malware