5stars

5star

:star::star::star::star::star:

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 :warning:

• 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

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.