Narcissistic, Perfectly Modest
    Wondering what’s next for npm?Check out our public roadmap! »

    react-svg-draw

    0.0.12 • Public • Published

    react-svg-draw

    A React component for the SVG Elements.

    Install

    npm install --save react-svg-draw
     
    or
     
    yarn add react-svg-draw

    Usage

    const React = require('react')
    const SVG = require('react-svg-draw')
    const {Circle} = SVG;
    React.render(<SVG><Circle cx="40" cy="40" r="24" /></SVG>, document.body)

    TAGS Available

    • <SVG />
    • <SVG.A />
    • <SVG.Animate />
    • <SVG.AnimateMotion />
    • <SVG.AnimateTransform />
    • <SVG.Circle />
    • <SVG.Defs />
    • <SVG.Ellipse />
    • <SVG.G />
    • <SVG.Image />
    • <SVG.Line />
    • <SVG.Path />
    • <SVG.Polygon />
    • <SVG.Polyline />
    • <SVG.Rect />
    • <SVG.Symbol />
    • <SVG.Text />
    • <SVG.THref />
    • <SVG.TSpan />
    • <SVG.Use />

    Examples

    Regular usage

    var React = require('react')
    const SVG = require('react-svg-draw')
    const {Circle, Defs, G, Rect, Use} = SVG;
     
    var MyComponent = React.createClass({
      render: function() {
        return (
          <SVG>
            <Defs>
              <G id="shape">
                  <Rect x="50" y="50" width="50" height="50" />
                  <Circle cx="50" cy="50" r="50" />
              </G>
            </Defs>
            <Use xlinkHref="#shape" x="50" y="50" />
            <Use xlinkHref="#shape" x="200" y="50" />
          </SVG>
        )
      },
    })

    With ES6 JS

    import React from 'react'
    import SVG, {Circle} from 'react-svg-draw'
     
    class MyComponent extends React.Component {
      render() {
        return (
          <SVG>
            <Defs>
              <G id="shape">
                  <Rect x="50" y="50" width="50" height="50" />
                  <Circle cx="50" cy="50" r="50" />
              </G>
            </Defs>
            <Use xlinkHref="#shape" x="50" y="50" />
            <Use xlinkHref="#shape" x="200" y="50" />
          </SVG>
        )
      }
    }

    License

    MIT © Arshpreet Wadehra

    Install

    npm i react-svg-draw

    DownloadsWeekly Downloads

    134

    Version

    0.0.12

    License

    MIT

    Unpacked Size

    205 kB

    Total Files

    29

    Last publish

    Collaborators

    • avatar