svg-triangle

The svg-triangle is a lib which can provide a triangle icon with svg.And it support radius/border/shadow.

Installation

npm install --save svg-triangle

Usage

import Triangle from 'svg-triangle';

const svg = new Triangle({
    width: 80,
    height: 30,
    radius: 2,
    color: 'yellow',
    border: 'red',
    className: 'triangle',
    shadow: {
        opacity: 0.2,
    },
});

document.body.append(svg.triangle);

Demo

demo

effect:

API

• Triangle(class)

  • constructor(conifg: IConfig)

  • member:

    • triangle: SVGSVGElement

  • methods:

    • update(config?: Iconfig): void update the triangle

Interface

• IConfig

  key	type	default	explain
  width?	nubmer	10	triagnle wrapper width.
  height?	number	10	triangle wrapper height.
  direction?	string(enums) ['down', 'up', 'left', 'right']	down	triangle dirction.
  radius?	number	5	triagnle radius.
  color?	string	black	triangle backgrond color.
  border?	string		triangle border color.
  className?	string		triangle class name.
  shadow	Ishadow	Ishadow	triangle shadow.

  • Ishadow

    key	type	default	explain
    offsetX?	string | number	0	same as box-shadow.
    offsetY?	string | number	4	same as box-shadow.
    blur?	string | nubmer	4	same as box-shadow.
    opacity？	string | number	0.2	same as box-shadow.