convert-svg-react/lib/components/createSVG/CreateSVG.js

Converts SVG XML code to be used as ReactJS component.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _react = _interopRequireDefault(require("react"));

var _helpers = require("./helpers");

var CreateSVG = function CreateSVG(nodeArray) {
  return Array.prototype.map.call(nodeArray, function (node, i) {
    var attributeObj = {};
    var attributes = node.attributes,
        localName = node.localName,
        childNodes = node.childNodes,
        nodeValue = node.nodeValue;

    if (attributes) {
      Array.from(attributes).forEach(function (attribute) {
        if (attribute.name === "style") {
          var styleObj = (0, _helpers.updateStyles)(attribute.nodeValue);
          attributeObj[attribute.name] = styleObj; // When fromString gets ran classname is not concatinated
        } else if (attribute.name === 'classname') {
          attributeObj[attribute.name.replace(/n/, 'N')] = attribute.nodeValue;
        } else if (attribute.name === 'fillrule') {
          attributeObj[attribute.name.replace(/r/, 'R')] = attribute.nodeValue;
        } else if (attribute.name === 'strokelinecap') {
          attributeObj['strokeLinecap'] = attribute.nodeValue;
        } else if (attribute.name === 'strokemiterlimit') {
          attributeObj['strokeMiterlimit'] = attribute.nodeValue;
        } else if (attribute.name === 'strokelinejoin') {
          attributeObj['strokeLinejoin'] = attribute.nodeValue;
        } else if (attribute.name === 'strokewidth') {
          attributeObj['strokeWidth'] = attribute.nodeValue;
        } else if (attribute.name === 'clippath') {
          attributeObj['clipPath'] = attribute.nodeValue;
        } else if (attribute.name === 'xmlspace') {
          attributeObj['xmlSpace'] = attribute.nodeValue;
        } else {
          attributeObj[attribute.name] = attribute.nodeValue; // Adds inline style to svg 

          if (localName === 'svg') attributeObj.style = {
            width: '5rem',
            height: '5rem',
            margin: '10px'
          };
        }
      });
    }

    attributeObj.key = i;
    return localName ? /*#__PURE__*/_react["default"].createElement(localName, attributeObj, childNodes && Array.isArray(Array.from(childNodes)) ? CreateSVG(Array.from(childNodes)) : []) : nodeValue;
  });
};

var _default = CreateSVG;
exports["default"] = _default;