lodash , convert string from svg circle (properties and values separates with space) to object for spread in react component inline

Question

I have this object, that is a svg definition:

  circle: [
    'cx="12" cy="12" r="8"',
  ],

I'd like to convert from:

'cx="12" cy="12" r="8"'

I mean an object like this:

props = { cx:12, cy:12, r:8 }

it's possible with lodash or .. javascript modern ?

UPDATE:

Here my final component to draw svg in React with two best solutions. I have a component to drawn a svg from a library what is a list of simple objects wit path, or optional circle, this svg component accept size and colors.

import React from 'react';
import iconlibrary1 from './iconlibrary';

// @Alexandrou solution:
const getConditionalProps = ( mystring ) => {
  console.log('my string');
  console.log(mystring);
  let result=mystring.split(' ').reduce(function(acc,item,i){
    let keyAndValue=item.split('=');
    acc[keyAndValue[0]]=keyAndValue[1].replace(/\D/g,'');
    return acc;
  },{});
  return result;
}

// @Nina solution:
const getConditionalProps = ( mystring ) => {
  return Object.assign({}, ...mystring
    .split(' ')
    .map(p => p.split('='))
    .map(([k, v]) => ({ [k]: +v.match(/\d+/) }))
  );
};


const ShowIcon = (props) => {
  const icon = props.icon || '';
  const color = props.color || '#000000';
  const size = props.size || '24';
  const boxSize = '24';

  if (icon !== '' && iconlibrary1[props.icon]) {
    return (
      <svg width={size} height={size} viewBox={`0 0 ${boxSize} ${boxSize}`}   fill={color} >
        { iconlibrary1[props.icon].circle && <circle    { ...getConditionalProps(  iconlibrary1[props.icon].circle[0] ) }  />}
        <path d={iconlibrary1[props.icon].path[0]} />
      </svg>
    );
  }
  return null;
};
export default ShowIcon;

here iconlibrary.js, where i define the svg images, with properties with path or circle

const iconlibray1 = {
  vpnkey:
    {
      path: [
        'M12.65 10C11.83 7.67 9.61 6 7 6c-3.31 0-6 2.69-6 6s2.69 6 6 6c2.61 0 4.83-1.67 5.65-4H17v4h4v-4h2v-4H12.65zM7 14c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z',
      ],
      circle: [
        'cx="12" cy="12" r="8"',
      ],
    },
  exitapp:
    {
      path: [
        'M10.09 15.59L11.5 17l5-5-5-5-1.41 1.41L12.67 11H3v2h9.67l-2.58 2.59zM19 3H5c-1.11 0-2 .9-2 2v4h2V5h14v14H5v-4H3v4c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z',
      ],
    },

};

export default iconlibray1;

This components are useful to show svg in native html, and not with so you can change size, colors, in a simple way:

 <ShowIcon icon="exitapp" color="#FFFFFF" />

you can download free svg icons from :

https://material.io/icons

open the file, and just copy the main path(s), don't copy the last one, and circle if there is

Answer 1

One of the solutions can be using split method in combination with reduce .

Use replace method by passing a regex pattern in order to remove " chars from your string. For instance, "15" will be turn into 15 .

The reduce() method applies a function against an accumulator and each element in the array (from left to right) to reduce it to a single value.

You can also use forEach method instead reduce .

 let string='cx="12" cy="12" r="8"'; let result=string.split(' ').reduce(function(acc,item,i){ let keyAndValue=item.split('='); acc[keyAndValue[0]]=keyAndValue[1].replace(/\\D/g,''); return acc; },{}); console.log(result); 

---

An alternate solution:

 var string='cx="12" cy="12" r="8"'; var result = {}; var parts = string.split(' '); for (var i = 0; i< parts.length; i++) { var subValues = parts[i].split('='); result[subValues[0]] = subValues[1].substring(1, subValues[1].length -1); } console.log(result); 

Answer 2

You could take a multi step approach where you split the string first by space, then the parts by equal sign and then reassamble the parts to objects and later to a single object.

It is working with

• Object.assign for getting a single object out of multiple objects,

• spread syntax ... , takes an iterable and use the parts as parameters,

• Array#map , for mapping an element in a different value,

• String#split , for getting an array with parts, who were separated by a given string,

• destructuring assignment , for taking parts of an array or object,

• computed property names for dynamic creation of an object.

 var string = 'cx="12" cy="12" r="8"', object = Object.assign({}, ...string .split(' ') .map(p => p.split('=')) .map(([k, v]) => ({ [k]: +v.match(/\\d+/) })) ) console.log(object);