clm-svg-figures

Project setup

npm install clm-svg-figures

In order to use components in your main.js file where you set up render function simply import this package, and use via middleware. Like this:

import clm_svg_figures from 'clm-svg-figures';
Vue.use(clm_svg_figures);

Now your project has all clm-svg-figures components installed globally, so you can directly call them in templates, like this:

<template>
  <div id="app">
    <SvgStraightLine />
  </div>
</template>

Components List

• SvgStraightLine;

Component Description

SvgStraightLine - simple line from point A to point B. Props:

• width - set line width (def: 400, type: Number, req: false);
• height - set line height (def: 5, type: Number, req: false);
• colorHex - set line color, expects Hex format color. In case this prop and gradientHex are set or none of them is set, priority is given to colorHex (def: #000, type: String, req: false);
• gradientHex - set gradient to line color, expects array with 2 Hex format color strings. In case this prop and colorHex are set or none of them is set, priority is given to colorHex (def: ['#000', '#222'], type: Array, req: false);
• gradientAnimation - determine if linear gradient is animated, to use this prop gradientHex must be set (def: false, type: Boolean, req: false);
• gradientAnimationDur - speed of linear gradient animation (def: 5, type: Number, req: false);
• gradientAnimationRepeat - number of linear gradient animation is played. Expects a string that contains word 'indefinite' or simple positive integer value that will be set to seconds value of linear gradient animation (def: indefinite, type: String, req: false);
• grow - define if line will grow from A to B (def: false, type: Boolean, req: false);
• growSpeed - define line grow animation speed, expects only positive integer value that will be set to seconds value of grow animation (def: 3, type: Number, req: false)
• growDirectionForward - define if line will grow from A to B, false will make line to grow from B to A (def: true, type: Boolean, req: false);

Customize configuration

See Configuration Reference.