Add support for various attributes and polyline component

Author: kirillpisarev

index.js

@@ -39,14 +39,18 @@ const ACEPTED_SVG_ELEMENTS = [
 // Attributes from SVG elements that are mapped directly.
 const SVG_ATTS = ['viewBox'];
 const G_ATTS = ['id'];
-const CIRCLE_ATTS = ['cx', 'cy', 'r', 'fill', 'stroke'];
-const PATH_ATTS = ['d', 'fill', 'stroke'];
-const RECT_ATTS = ['width', 'height', 'fill', 'stroke', 'x', 'y'];
+const CIRCLE_ATTS = ['cx', 'cy', 'r'];
+const PATH_ATTS = ['d'];
+const RECT_ATTS = ['width', 'height'];
 const LINEARG_ATTS = ['id', 'x1', 'y1', 'x2', 'y2'];
 const RADIALG_ATTS = ['id', 'cx', 'cy', 'r'];
 const STOP_ATTS = ['offset'];
-const ELLIPSE_ATTS = ['fill', 'cx', 'cy', 'rx', 'ry'];
+const ELLIPSE_ATTS = ['cx', 'cy', 'rx', 'ry'];
 const POLYGON_ATTS = ['points'];
+const POLYLINE_ATTS = ['points'];
+
+const COMMON_ATTS = ['fill', 'fillOpacity', 'stroke', 'strokeWidth', 'strokeOpacity', 'strokeLinecap', 'strokeLinejoin',
+    'strokeDasharray', 'strokeDashoffset', 'x', 'y', 'rotate', 'scale', 'origin', 'originX', 'originY'];
 
 let ind = 0;
 
@@ -144,6 +148,9 @@ class SvgUri extends Component{
         case 'polygon':
              componentAtts = this.obtainComponentAtts(node, POLYGON_ATTS);
             return <Polygon key={i} {...componentAtts}>{childs}</Polygon>;
+        case 'polyline':
+            componentAtts = this.obtainComponentAtts(node, POLYLINE_ATTS);
+            return <Polyline key={i} {...componentAtts}>{childs}</Polyline>;
         default:
           return null;
         }
@@ -152,13 +159,13 @@ class SvgUri extends Component{
   obtainComponentAtts({attributes}, enabledAttributes) {
     let styleAtts = {};
     Array.from(attributes).forEach(({nodeName, nodeValue}) => {
-                Object.assign(styleAtts, utils.transformStyle(nodeName, nodeValue, this.props.fill));
+                Object.assign(styleAtts, utils.transformStyle({nodeName, nodeValue, fillProp: this.props.fill}));
     });
 
     let componentAtts =  Array.from(attributes)
       .map(utils.camelCaseNodeName)
       .map(utils.removePixelsFromNodeValue)
-      .filter(utils.getEnabledAttributes(enabledAttributes))
+      .filter(utils.getEnabledAttributes(enabledAttributes.concat(COMMON_ATTS)))
       .reduce((acc, {nodeName, nodeValue}) => ({
         ...acc,
         [nodeName]: this.props.fill && nodeName === 'fill' ? this.props.fill : nodeValue,

utils.js

@@ -4,7 +4,7 @@ export const camelCaseNodeName = ({nodeName, nodeValue}) => ({nodeName: camelCas
 
 export const removePixelsFromNodeValue = ({nodeName, nodeValue}) => ({nodeName, nodeValue: nodeValue.replace('px', '')});
 
-export const transformStyle = (nodeName, nodeValue, fillProp) => {
+export const transformStyle = ({nodeName, nodeValue, fillProp}) => {
   if (nodeName === 'style') {
     return nodeValue.split(';')
       .reduce((acc, attribute) => {
@@ -18,4 +18,4 @@ export const transformStyle = (nodeName, nodeValue, fillProp) => {
   return null;
 };
 
-export const getEnabledAttributes = enabledAttributes => ({nodeName}) => enabledAttributes.includes(nodeName);
+export const getEnabledAttributes = enabledAttributes => ({nodeName}) => enabledAttributes.includes(camelCase(nodeName));