react-svg-path

react-svg-path makes composing svg elements dead simple. Everything is a path. Have fun.

There are more docs and interactive demos at https://joemaddalone.github.io/react-svg-path-docs/

Table of contents

• Installation
• Path
• toComponent
• Components
  • Shapes
    • Circle
    • Cross
    • Ellipse
    • Kite
    • Lens
    • Line
    • Omino
    • Polygon
    • Polygram
    • Polyline
    • RadialLines
    • Rect
    • RegPolygon
    • RoundedRect
    • RoundedSquare
    • Sector
    • Segment
    • Square
    • Star
    • SymH
    • SymI
    • SymX
    • Triangle
  • Curves
    • Arc
    • Cubic
    • Quad

Install

npm install --save react-svg-path

Path

import Path from 'react-svg-path'

react-svg-path is mostly helpful for building the commands needed for the "d" attribute of an svg path.

Most methods are direct translations from the SVG Path specification.

<path d="M0 0, L0 100"></path>

This path can be produced with:

const path = new Path().M(0,0).L(0,100);
console.log(path.toString()) // M0 0, L0 100

This library wraps https://github.com/joemaddalone/path and further documentation can be found there. All of the functionality of path is always available via import Path from 'react-svg-path' Please read the docs on path

toComponent

This library adds one additional rendering method to path called toComponent.

• toComponent(props)
  • returns a jsx function including attributes and props.

import React from 'react';
import Path, {Svg}  from 'react-svg-path';

const CustomSquare = ({ x, y, size }) => {
  const path = new Path()
    .moveTo(x, y) // move pen to x, y
    .right(size) // draw line right to relative "size" px
    .down(size) // draw line down to relative "size" px
    .left(size) // draw line left to relative "size" px
    .close() // draw line back to first point
  return path.toComponent({ fill: 'green'});
};

const App = () => {
  const width = 800;
  const height = 800;
  return (
    <Svg
      width={width}
      height={height}
    >
      <CustomSquare x={50} y={50} size={50} />
    </svg>
  );
};

Components

Writing path commands via the library makes creating paths super simple and intuitive. However it can seem like overkill for really common patterns you may need. react-svg-path includes a number of components to allow for a declarative interface for generating the paths you need.

Note: The following shorthand version of some props are available where applicable:

• sxy: sx & sy = sxy
• exy: ex & ey = exy
• cxy: cx & cy = cxy
• rxy: rx & cy = rxy

The following components are available

Shapes

Circle

→ Interactive demo of Circle

<Circle 
  centerEnd={boolean|default = true} 
  cx={number} 
  cy={number} 
  size={number} 
/>

Prop|Type|Description|Required|Default :-|:-|:-|:-|:- size|number|Circumference of the Circle.|true| cx|number|Center x coordinate of the Circle.|true| cy|number|Center x coordinate of the Circle.|true| centerEnd|boolean|Determines whether cursor should return to cx & cy as a last step.|false|true

Cross

→ Interactive demo of Cross

<Cross 
  centerEnd={boolean|default = true} 
  cx={number} 
  cy={number} 
  height={number} 
  width={number} 
/>

Prop|Type|Description|Required|Default :-|:-|:-|:-|:- width|number|Width of the Cross.|true| height|number|Height of the Cross.|true| cx|number|Center x coordinate of the Cross.|true| cy|number|Center x coordinate of the Cross.|true| centerEnd|boolean|Determines whether cursor should return to cx & cy as a last step.|false|true

Ellipse

→ Interactive demo of Ellipse

<Ellipse 
  centerEnd={boolean|default = true} 
  cx={number} 
  cy={number} 
  height={number} 
  width={number} 
/>

Prop|Type|Description|Required|Default :-|:-|:-|:-|:- width|number|Width of the Ellipse.|true| height|number|Height of the Ellipse.|true| cx|number|Center x coordinate of the Ellipse.|true| cy|number|Center x coordinate of the Ellipse.|true| centerEnd|boolean|Determines whether cursor should return to cx & cy as a last step.|false|true

Kite

→ Interactive demo of Kite

<Kite 
  centerEnd={boolean|default = true} 
  cx={number} 
  cy={number} 
  dh={number} 
  height={number} 
  width={number} 
/>

Prop|Type|Description|Required|Default :-|:-|:-|:-|:- width|number|Width of the Kite.|true| height|number|Height of the Kite.|true| dh|number|Vertical position of the left and right points from the top.|true| cx|number|Center x coordinate of the Kite.|true| cy|number|Center x coordinate of the Kite.|true| centerEnd|boolean|Determines whether cursor should return to cx & cy as a last step.|false|true

Lens

→ Interactive demo of Lens

<Lens 
  centerEnd={boolean|default = true} 
  cx={number} 
  cy={number} 
  height={number} 
  width={number} 
/>

Prop|Type|Description|Required|Default :-|:-|:-|:-|:- width|number|Width of the Lens.|true| height|number|Height of the Lens.|true| cx|number|Center x coordinate of the Lens.|true| cy|number|Center x coordinate of the Lens.|true| centerEnd|boolean|Determines whether cursor should return to cx & cy as a last step.|false|true

Line

→ Interactive demo of Line

<Line 
  ex={number} 
  ey={number} 
  relative={boolean|default = false} 
  sx={number} 
  sy={number} 
/>

Prop|Type|Description|Required|Default :-|:-|:-|:-|:- sx|number|Starting x coordinate for the Line.|true| sy|number|Starting y coordinate for the Line.|true| ex|number|Ending x coordinate for the Line.|true| ey|number|Ending y coordinate for the Line.|true| relative|boolean|If set to true ex & ey will become relative to sx & sy.|true|false

Omino

→ Interactive demo of Omino

<Omino 
  lined={boolean|default = false} 
  shape={2d-array} 
  size={number} 
  sx={number} 
  sy={number} 
/>

Prop|Type|Description|Required|Default :-|:-|:-|:-|:- size|number|Size of the squares.|true| shape|2d-array|2d array of the Omino.|true| sx|number|Starting x coordinate for left.|true| sy|number|Starting y coordinate for top.|true| lined|boolean|Draw inner lines or not.|false|false

Polygon

→ Interactive demo of Polygon

<Polygon 
  points={point-array} 
/>

Prop|Type|Description|Required|Default :-|:-|:-|:-|:- points|point-array|x, y, points of the polygon.|true|

Polygram

→ Interactive demo of Polygram

<Polygram 
  centerEnd={boolean|default = true} 
  cx={number} 
  cy={number} 
  points={number} 
  size={number} 
  vertexSkip={number|default = 2} 
/>

Prop|Type|Description|Required|Default :-|:-|:-|:-|:- size|number|Size of the underlying polygon.|true| points|number|Number of points to create.|true| cx|number|Center x coordinate of the Polygram.|true| cy|number|Center x coordinate of the Polygram.|true| vertexSkip|number|Integer representing which vertex to go to next relative to current.|false|2 centerEnd|boolean|Determines whether cursor should return to cx & cy as a last step.|false|true

Polyline

→ Interactive demo of Polyline

<Polyline 
  points={point-array} 
  relative={boolean|default = false} 
/>

Prop|Type|Description|Required|Default :-|:-|:-|:-|:- points|point-array|x, y, points of the Polyline.|true| relative|boolean|If set to true all points will be relative.|false|false

RadialLines

→ Interactive demo of RadialLines

<RadialLines 
  centerEnd={boolean|default = true} 
  cx={number} 
  cy={number} 
  innerSize={number} 
  outerSize={number} 
  points={number} 
/>

Prop|Type|Description|Required|Default :-|:-|:-|:-|:- outerSize|number|Circumference of the outer circle.|true| innerSize|number|Circumference of the inner circle.|true| points|number|Number of lines to draw.|true| cx|number|Center x coordinate of the RadialLines.|true| cy|number|Center x coordinate of the RadialLines.|true| centerEnd|boolean|Determines whether cursor should return to cx & cy as a last step.|false|true

Rect

→ Interactive demo of Rect

<Rect 
  centerEnd={boolean|default = true} 
  cx={number} 
  cy={number} 
  height={number} 
  width={number} 
/>

Prop|Type|Description|Required|Default :-|:-|:-|:-|:- width|number|Width of the Rect.|true| height|number|Height of the Rect.|true| cx|number|Center x coordinate of the Rect.|true| cy|number|Center x coordinate of the Rect.|true| centerEnd|boolean|Determines whether cursor should return to cx & cy as a last step.|false|true

RegPolygon

→ Interactive demo of RegPolygon

<RegPolygon 
  centerEnd={boolean|default = true} 
  cx={number} 
  cy={number} 
  sides={number} 
  size={number} 
/>

Prop|Type|Description|Required|Default :-|:-|:-|:-|:- size|number|Size of the RegPolygon.|true| sides|number|Number of sides of the RegPolygon.|true| cx|number|Center x coordinate of the RegPolygon.|true| cy|number|Center x coordinate of the RegPolygon.|true| centerEnd|boolean|Determines whether cursor should return to cx & cy as a last step.|false|true

RoundedRect

→ Interactive demo of RoundedRect

<RoundedRect 
  centerEnd={boolean|default = true} 
  cx={number} 
  cy={number} 
  height={number} 
  radius={number} 
  width={number} 
/>

Prop|Type|Description|Required|Default :-|:-|:-|:-|:- width|number|Width of the Rect.|true| height|number|Height of the Rect.|true| radius|number|Radius for the corners.|true| cx|number|Center x coordinate of the RoundedRect.|true| cy|number|Center x coordinate of the RoundedRect.|true| centerEnd|boolean|Determines whether cursor should return to cx & cy as a last step.|false|true

RoundedSquare

→ Interactive demo of RoundedSquare

<RoundedSquare 
  centerEnd={boolean|default = true} 
  cx={number} 
  cy={number} 
  radius={number} 
  size={number} 
/>

Prop|Type|Description|Required|Default :-|:-|:-|:-|:- size|number|Width & height of the Square.|true| radius|number|Radius for the corners.|true| cx|number|Center x coordinate of the RoundedSquare.|true| cy|number|Center x coordinate of the RoundedSquare.|true| centerEnd|boolean|Determines whether cursor should return to cx & cy as a last step.|false|true

Sector

→ Interactive demo of Sector

<Sector 
  centerEnd={boolean|default = true} 
  cx={number} 
  cy={number} 
  endAngle={number} 
  size={number} 
  startAngle={number} 
/>

Prop|Type|Description|Required|Default :-|:-|:-|:-|:- cx|number|Center x coordinate of the Sector.|true| cy|number|Center x coordinate of the Sector.|true| size|number|Circumference of the Sector.|true| startAngle|number|Start angle of the Sector. 0 = top center.|true| endAngle|number|End angle of the Sector. 0 = top center.|true| centerEnd|boolean|Determines whether cursor should return to cx & cy as a last step.|false|true

Segment

→ Interactive demo of Segment

<Segment 
  centerEnd={boolean|default = true} 
  cx={number} 
  cy={number} 
  endAngle={number} 
  size={number} 
  startAngle={number} 
/>

Prop|Type|Description|Required|Default :-|:-|:-|:-|:- cx|number|Center x coordinate of the Segment.|true| cy|number|Center x coordinate of the Segment.|true| size|number|Circumference of the Segment.|true| startAngle|number|Start angle of the Segment. 0 = top center.|true| endAngle|number|End angle of the Segment. 0 = top center.|true| centerEnd|boolean|Determines whether cursor should return to cx & cy as a last step.|false|true

Square

→ Interactive demo of Square

<Square 
  centerEnd={boolean|default = true} 
  cx={number} 
  cy={number} 
  size={number} 
/>

Prop|Type|Description|Required|Default :-|:-|:-|:-|:- size|number|Width & height of the Square.|true| cx|number|Center x coordinate of the Square.|true| cy|number|Center x coordinate of the Square.|true| centerEnd|boolean|Determines whether cursor should return to cx & cy as a last step.|false|true

Star

→ Interactive demo of Star

<Star 
  centerEnd={boolean|default = true} 
  cx={number} 
  cy={number} 
  innerSize={number} 
  outerSize={number} 
  points={number} 
/>

Prop|Type|Description|Required|Default :-|:-|:-|:-|:- outerSize|number|The outer circumference where points will reach.|true| innerSize|number|The inner circumference where points will end.|true| points|number|Number of points for the Star.|true| cx|number|Center x coordinate of the Star.|true| cy|number|Center x coordinate of the Star.|true| centerEnd|boolean|Determines whether cursor should return to cx & cy as a last step.|false|true

SymH

→ Interactive demo of SymH

<SymH 
  centerEnd={boolean|default = true} 
  cx={number} 
  cy={number} 
  height={number} 
  width={number} 
/>

Prop|Type|Description|Required|Default :-|:-|:-|:-|:- width|number|Width of the H.|true| height|number|Height of the H.|true| cx|number|Center x coordinate of the SymH.|true| cy|number|Center x coordinate of the SymH.|true| centerEnd|boolean|Determines whether cursor should return to cx & cy as a last step.|false|true

SymI

→ Interactive demo of SymI

<SymI 
  centerEnd={boolean|default = true} 
  cx={number} 
  cy={number} 
  height={number} 
  width={number} 
/>

Prop|Type|Description|Required|Default :-|:-|:-|:-|:- width|number|Width of the I.|true| height|number|Height of the I.|true| cx|number|Center x coordinate of the SymI.|true| cy|number|Center x coordinate of the SymI.|true| centerEnd|boolean|Determines whether cursor should return to cx & cy as a last step.|false|true

SymX

→ Interactive demo of SymX

<SymX 
  centerEnd={boolean|default = true} 
  cx={number} 
  cy={number} 
  height={number} 
  width={number} 
/>

Prop|Type|Description|Required|Default :-|:-|:-|:-|:- width|number|Width of the X.|true| height|number|Height of the X.|true| cx|number|Center x coordinate of the SymX.|true| cy|number|Center x coordinate of the SymX.|true| centerEnd|boolean|Determines whether cursor should return to cx & cy as a last step.|false|true

Triangle

→ Interactive demo of Triangle

<Triangle 
  centerEnd={boolean|default = true} 
  cx={number} 
  cy={number} 
  size={number} 
/>

Prop|Type|Description|Required|Default :-|:-|:-|:-|:- size|number|Size of the Tirangle.|true| cx|number|Center x coordinate of the Triangle.|true| cy|number|Center x coordinate of the Triangle.|true| centerEnd|boolean|Determines whether cursor should return to cx & cy as a last step.|false|true

Curves

Arc

→ Interactive demo of Arc

<Arc 
  arc={number|default = 0} 
  ex={number} 
  ey={number} 
  relative={boolean|default = false} 
  rotation={number|default = 0} 
  rx={number} 
  ry={number} 
  sweep={number|default = 0} 
  sx={number} 
  sy={number} 
/>

Prop|Type|Description|Required|Default :-|:-|:-|:-|:- sx|number|Starting x coordinate for the Arc.|true| sy|number|Starting y coordinate for the Arc.|true| rx|number|Width of the underlying ellipse of the Arc.|true| ry|number|Height of the underlying ellipse of the Arc.|true| rotation|number|Rotation of the underlying ellipse of the Arc.|false|0 arc|number|Large arc flag: this says whether to follow the larger or smaller part of the underlying ellipse.|false|0 sweep|number|Sweep flag: think of this as direction flag, follow a clockwise or counterclockwise path along the underlying ellipse.|false|0 ex|number|Ending x coordinate for the Arc.|true| ey|number|Ending y coordinate for the Arc.|true| relative|boolean|If set to true all points after sx & sy will become relative to sx & sy.|false|false

Cubic

→ Interactive demo of Cubic

<Cubic 
  S={point-array} 
  cx1={number} 
  cx2={number} 
  cy1={number} 
  cy2={number} 
  ex={number} 
  ey={number} 
  relative={boolean|default = false} 
  s={point-array} 
  sx={number} 
  sy={number} 
/>

Prop|Type|Description|Required|Default :-|:-|:-|:-|:- sx|number|Starting x coordinate for the Cubic.|true| sy|number|Starting y coordinate for the Cubic.|true| cx1|number|x coordinate for control point 1.|true| cy1|number|y coordinate for control point 1.|true| cx2|number|x coordinate for control point 2.|true| cy2|number|y coordinate for control point 2.|true| ex|number|Ending x coordinate for the Cubic.|true| ey|number|Ending y coordinate for the Cubic.|true| S|point-array|Optionally String together multiple Cubic wit an array consisting of 2 or more control points.|false| s|point-array|Optional relative "smoooth curve" array consisting of 2 or more control points.|false| relative|boolean|If set to true all points after sx & sy will become relative to sx & sy.|false|false

Quad

→ Interactive demo of Quad

<Quad 
  T={point-array} 
  cx={number} 
  cy={number} 
  ex={number} 
  ey={number} 
  relative={boolean|default = false} 
  sx={number} 
  sy={number} 
  t={point-array} 
/>

Prop|Type|Description|Required|Default :-|:-|:-|:-|:- sx|number|Starting x coordinate for the Quad.|true| sy|number|Starting y coordinate for the Quad.|true| cx|number|x coordinate for the control point.|true| cy|number|y coordinate for the control point.|true| ex|number|Ending x coordinate for the Quad.|true| ey|number|Ending y coordinate for the Quad.|true| T|point-array|String together multiple Quad curves.|false| t|point-array|String together multiple Quad curves where coordinates are relative.|false| relative|boolean|If set to true all points after sx & sy will become relative to sx & sy.|false|false

License

MIT © joemaddalone