building an object out of the passed style/className concatenated str…

…ing on svgnative implementation

packages/components/src/primitives/svg/index.native.js

@@ -8,6 +8,11 @@ import {
 	Svg,
 } from 'react-native-svg';
 
+/**
+ * Internal dependencies
+ */
+import styles from '../../dashicon/style.scss';
+
 export {
 	G,
 	Path,
@@ -16,8 +21,20 @@ export {
 export const SVG = ( props ) => {
 	// We're using the react-native-classname-to-style plugin, so when a `className` prop is passed it gets converted to `style` here.
 	// Given it carries a string (as it was originally className) but an object is expected for `style`,
-	// we need to check whether `style` exists and is a string, and strip in that case.
-	const safeProps = ( typeof props.style === 'string' || props.style instanceof String ) ? { ...omit( props, [ 'style', 'className' ] ) } : { ...omit( props, [ 'className' ] ) };
+	// we need to check whether `style` exists and is a string, and convert it to an object
+	let styleKeys = new Array();
+	let styleValues = new Array();
+	if ( typeof props.style === 'string' || props.style instanceof String ) {
+		styleKeys = props.style.split( ' ' );
+		styleKeys.forEach(element => {
+			let oneStyle = styles[ styleKeys[ element ] ];
+			if ( oneStyle != undefined ) {
+				styleValues.push( styles[ styleKeys[ element ] ] );
+			}
+		});
+	}
+
+	const safeProps = styleValues.length == 0 ? { ...omit( props, [ 'style' ] ) } : { ...props, style: styleValues };
 	if ( safeProps.width !== undefined && safeProps.height !== undefined ) {
 		return (
 			<Svg { ...safeProps } />