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} 
/>

Props overview

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} 
/>

Props overview

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} 
/>

Props overview

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} 
/>

Props overview

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} 
/>

Props overview

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} 
/>

Props overview

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} 
/>

Props overview

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} 
/>

Props overview

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} 
/>

Props overview

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} 
/>

Props overview

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} 
/>

Props overview

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} 
/>

Props overview

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} 
/>

Props overview

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} 
/>

Props overview

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} 
/>

Props overview

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} 
/>

Props overview

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} 
/>

Props overview

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} 
/>

Props overview

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} 
/>

Props overview

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} 
/>

Props overview

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} 
/>

Props overview

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} 
/>

Props overview

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} 
/>

Props overview

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} 
/>

Props overview

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} 
/>

Props overview

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} 
/>

Props overview

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