Brief examples of using SVG in React

circle.js

export default class Circle {
  render () {
    return <circle {...this.props}>{this.props.children}</circle>;
  }
}

SVG.js

import { PropTypes } from 'react';

// Add check for children types, only a limited subset of SVG shapes that it can take
// Sketch SVG to react?
// Path
// Animation
export default class SVG {
  static propTypes = {
    // Aria Required Properties
    title: PropTypes.string.isRequired,
    description: PropTypes.string.isRequired,

    // Sizing
    minX: PropTypes.string,
    minY: PropTypes.string,
    width: PropTypes.string.isRequired,
    height: PropTypes.string.isRequired
  }

  constructor(props) {
    this.props = { minX: 0, minY: 0 };
  }

  render() {
    const { minX, minY, width, height } = this.props;

    return (
      <svg {...this.props}
           aria-labelledby="title desc"
           role="img"
           preserveAspectRatio="xMidYMid meet"
           viewBox={`${minX} ${minY} ${width} ${height}`}>
        <title id="title">{this.props.title}</title>
        <desc id="desc">{this.props.description}</desc>
        {this.props.children}
      </svg>
    );
  }
}

usage.js

import { Component } from 'react';

import SVG from './SVG';
import Rectangle from './Rectangle';
import Circle from './Circle';
import Ellipse from './Ellipse';

export class App extends Component {
  render () {
    return (
      <section>
        <header><h1>SVG Demos</h1></header>
        <article>
          <h3>Base SVG component render</h3>
          <code>{`<SVG height="50" width="50" />`}</code>
          <div>
            <SVG title="Base SVG component" height="50" width="50" />
          </div>
        </article>
        <article>
          <h3>Rectangle component</h3>
          <code>{`
<SVG height="100" width="100">
  <Rectangle height="50" width="50" x="25" y="25" />
</SVG>
`}</code>
          <div>
            <SVG title="Rectangle Component" height="100" width="100">
                <Rectangle height="50" width="50" x="25" y="25" />
            </SVG>
          </div>
        </article>
        <article>
          <h3>Circle component</h3>
          <code>{`
<SVG height="100" width="100">
  <Rectangle height="50" width="50" x="25" y="25" />
</SVG>
`}</code>
          <div>
            <SVG title="Circle Component" height="100" width="100">
              <Circle cx="50" cy="50" r="25" />
            </SVG>
          </div>
        </article>
        <article>
          <h3>Ellipse component</h3>
          <code>{`
<SVG height="100" width="100">
  <Rectangle height="50" width="50" x="25" y="25" />
</SVG>
`}</code>
          <div>
            <SVG title="Ellipse Component" height="100" width="100">
              <Ellipse cx="50" cy="50" rx="25" ry="15" />
            </SVG>
          </div>
        </article>
        <h2>Colors</h2>
        <article>
          <h3>Fill and Stroke</h3>
          <code>{`
<SVG height="100" width="230">
  <Circle
    cx="50" cy="50" r="25"
    fill="mediumorchid" />
  <Circle
    cx="125" cy="50" r="25"
    fill="#ff0099" />
  <Circle
    cx="200" cy="50" r="25"
    fill="none"
    stroke="crimson" />
</SVG>
`}</code>
          <div>
            <SVG title="Colors Demo" height="100" width="230">
              <Circle
                cx="50" cy="50" r="25"
                fill="mediumorchid" />
              <Circle
                cx="125" cy="50" r="25"
                fill="#ff0099" />
              <Circle
                cx="200" cy="50" r="25"
                fill="none"
                stroke="crimson" />
            </SVG>
          </div>
        </article>
      </section>
    );
  }
}