react-undraw-illustrations/lib/components/UndrawPenTool/UndrawPenTool.js

unDraw: MIT licensed illustrations for every project you can imagine and create...for React!

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

var _propTypes = require("prop-types");

var _propTypes2 = _interopRequireDefault(_propTypes);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var UndrawPenTool = function UndrawPenTool(props) {
  return _react2.default.createElement(
    "svg",
    {
      style: { height: props.height, width: '100%' },
      className: props.class,
      id: "b9db6c67-941f-4cc2-b17c-4ec7dbc0da14",
      "data-name": "Layer 1",
      xmlnsXlink: "http://www.w3.org/1999/xlink",
      viewBox: "0 0 907.88 641.74"
    },
    _react2.default.createElement(
      "defs",
      null,
      _react2.default.createElement(
        "linearGradient",
        {
          id: "6dbd394d-3147-4710-ae5b-040c9889b819",
          x1: 444.99,
          y1: 641.74,
          x2: 444.99,
          y2: 550.42,
          gradientUnits: "userSpaceOnUse"
        },
        _react2.default.createElement("stop", { offset: 0, stopColor: "gray", stopOpacity: 0.25 }),
        _react2.default.createElement("stop", { offset: 0.54, stopColor: "gray", stopOpacity: 0.12 }),
        _react2.default.createElement("stop", { offset: 1, stopColor: "gray", stopOpacity: 0.1 })
      ),
      _react2.default.createElement("linearGradient", {
        id: "25611293-a7d7-4bef-9ea8-eef2963e34c7",
        x1: 586.17,
        y1: 702.27,
        x2: 586.17,
        y2: 250.71,
        xlinkHref: "#6dbd394d-3147-4710-ae5b-040c9889b819"
      }),
      _react2.default.createElement("linearGradient", {
        id: "f7aa0426-c3ad-4d3b-8596-50aa38a87e77",
        x1: 448.88,
        y1: 71.08,
        x2: 448.88,
        y2: 1.14,
        xlinkHref: "#6dbd394d-3147-4710-ae5b-040c9889b819"
      }),
      _react2.default.createElement("linearGradient", {
        id: "170327e1-c007-4bc3-aecd-c22d9d8756ba",
        x1: 41,
        y1: 82.01,
        x2: 41,
        y2: 0,
        xlinkHref: "#6dbd394d-3147-4710-ae5b-040c9889b819"
      }),
      _react2.default.createElement("linearGradient", {
        id: "35baff6c-edbd-4d6b-969d-bf3825558dc6",
        x1: 866.87,
        y1: 82.01,
        x2: 866.87,
        y2: 0,
        xlinkHref: "#6dbd394d-3147-4710-ae5b-040c9889b819"
      })
    ),
    _react2.default.createElement(
      "title",
      null,
      "pen"
    ),
    _react2.default.createElement("polygon", {
      points: "531.57 550.42 358.41 550.42 358.41 611.3 377.65 611.3 377.65 641.74 512.33 641.74 512.33 611.3 531.57 611.3 531.57 550.42",
      fill: "url(#6dbd394d-3147-4710-ae5b-040c9889b819)"
    }),
    _react2.default.createElement("path", {
      d: "M596.87,251.71V460.23c20.73,6.22,29.81,12.58,34.91,26.13a65.58,65.58,0,0,1,2.18,38c-3.27,14-9.28,21.47-25.65,25.81a62.53,62.53,0,0,1-28.41,1c-22.62-4.59-34.51-20-34.51-45.56,0-24.46,8.4-37.44,31.5-45.16V421.29l-1-170.59L406.09,503.22s81.27,67.93,111,199.05H655.23s41.59-152.22,111-189.69Z",
      transform: "translate(-146.06 -129.13)",
      fill: "url(#25611293-a7d7-4bef-9ea8-eef2963e34c7)"
    }),
    _react2.default.createElement("path", {
      d: "M599.93,261.88v193.5a55,55,0,1,1-27.52,2.37V261.88l-156,238.55s82.57,73.4,110.1,201.85H645.81s45.87-156,110.1-192.67Z",
      transform: "translate(-146.06 -129.13)",
      fill: "#eceff1"
    }),
    _react2.default.createElement("rect", { x: 59.35, y: 31.83, width: 366.99, height: 18.35, fill: "#eceff1" }),
    _react2.default.createElement("rect", { x: 472.22, y: 31.83, width: 366.99, height: 18.35, fill: "#eceff1" }),
    _react2.default.createElement("rect", { x: 380.47, y: 591.49, width: 128.45, height: 45.87, fill: props.primaryColor }),
    _react2.default.createElement("rect", {
      x: 413.91,
      y: 1.14,
      width: 69.93,
      height: 69.93,
      fill: "url(#f7aa0426-c3ad-4d3b-8596-50aa38a87e77)"
    }),
    _react2.default.createElement("rect", { x: 417.17, y: 4.3, width: 64.22, height: 64.22, fill: props.primaryColor }),
    _react2.default.createElement("circle", {
      cx: 41,
      cy: 41,
      r: 41,
      fill: "url(#170327e1-c007-4bc3-aecd-c22d9d8756ba)"
    }),
    _react2.default.createElement("circle", {
      cx: 866.87,
      cy: 41,
      r: 41,
      fill: "url(#35baff6c-edbd-4d6b-969d-bf3825558dc6)"
    }),
    _react2.default.createElement("circle", { cx: 41, cy: 41, r: 36.7, fill: props.primaryColor }),
    _react2.default.createElement("circle", { cx: 866.74, cy: 41, r: 36.7, fill: props.primaryColor }),
    _react2.default.createElement("rect", { x: 362.12, y: 554.79, width: 165.15, height: 55.05, fill: props.primaryColor }),
    _react2.default.createElement("rect", { x: 362.12, y: 554.79, width: 165.15, height: 55.05, opacity: 0.2 })
  );
};

UndrawPenTool.propTypes = {
  /**
   * Hex color
   */
  primaryColor: _propTypes2.default.string,
  /**
   * percentage
   */
  height: _propTypes2.default.string,
  /**
   * custom class for svg
   */
  class: _propTypes2.default.string
};

UndrawPenTool.defaultProps = {
  primaryColor: "#6c68fb",
  height: "250px",
  class: ""
};

exports.default = UndrawPenTool;