[RN mobile] fix className style in SVG primitive (#10556)

* building an object out of the passed style/className concatenated string

* fix array level indirection when looking into styles object

* removed merge conflict comments and using correct variable safeProps

* removed width/height check as defaults are provided now

* fixed code style lint warnings

* added spaces in paren

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

@@ -4,20 +4,39 @@
 import { omit } from 'lodash';
 import { Svg } from 'react-native-svg';
 
+/**
+ * Internal dependencies
+ */
+import styles from '../../dashicon/style.scss';
+
 export {
  G,
  Path,
  Polygon,
 } from 'react-native-svg';
 
 export const SVG = ( props ) => {
- const appliedProps = omit( props, 'className' );
+ // 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 convert it to an object
+ let styleKeys = new Array();
+ const styleValues = new Array();
+ if ( typeof props.style === 'string' || props.style instanceof String ) {
+ styleKeys = props.style.split( ' ' );
+ styleKeys.forEach( ( element ) => {
+ const oneStyle = styles[ element ];
+ if ( oneStyle !== undefined ) {
+ styleValues.push( oneStyle );
+ }
+ } );
+ }
 
+ const safeProps = styleValues.length === 0 ? { ...omit( props, [ 'style' ] ) } : { ...props, style: styleValues };
  return (
  <Svg
  height="100%"
  width="100%"
- { ...appliedProps }
+ { ...safeProps }
  />
  );
 };