adds simple mechanism to obtain viewport from viewBox so height and w…

…idth do not have to be indicated explicitely
WordPress · Aug 24, 2018 · c75a0db · c75a0db
1 parent 423d189
commit c75a0db
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 10 deletions.
diff --git a/packages/block-library/src/code/index.js b/packages/block-library/src/code/index.js
@@ -17,7 +17,7 @@ export const settings = {
 
 	description: __( 'Add text that respects your spacing and tabs -- perfect for displaying code.' ),
 
-	icon: <SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" height={ 24 } width={ 24 }><Path d="M0,0h24v24H0V0z" fill="none" /><Path d="M9.4,16.6L4.8,12l4.6-4.6L8,6l-6,6l6,6L9.4,16.6z M14.6,16.6l4.6-4.6l-4.6-4.6L16,6l6,6l-6,6L14.6,16.6z" /></SVG>,
+	icon: <SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><Path d="M0,0h24v24H0V0z" fill="none" /><Path d="M9.4,16.6L4.8,12l4.6-4.6L8,6l-6,6l6,6L9.4,16.6z M14.6,16.6l4.6-4.6l-4.6-4.6L16,6l6,6l-6,6L14.6,16.6z" /></SVG>,
 
 	category: 'formatting',
 

diff --git a/packages/block-library/src/heading/index.js b/packages/block-library/src/heading/index.js
@@ -63,7 +63,7 @@ export const settings = {
 
 	description: __( 'Insert a headline above your post or page content.' ),
 
-	icon: <SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height={ 24 } width={ 24 }><Path d="M5 4v3h5.5v12h3V7H19V4z" /><Path fill="none" d="M0 0h24v24H0V0z" /></SVG>,
+	icon: <SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><Path d="M5 4v3h5.5v12h3V7H19V4z" /><Path fill="none" d="M0 0h24v24H0V0z" /></SVG>,
 
 	category: 'common',
 

diff --git a/packages/block-library/src/more/index.js b/packages/block-library/src/more/index.js
@@ -23,7 +23,7 @@ export const settings = {
 
 	description: __( 'Want to show only part of this post on your blog’s home page? Insert a "More" block where you want the split.' ),
 
-	icon: <SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" height={ 24 } width={ 24 }><Path fill="none" d="M0 0h24v24H0V0z" /><G><Path d="M2 9v2h19V9H2zm0 6h5v-2H2v2zm7 0h5v-2H9v2zm7 0h5v-2h-5v2z" /></G></SVG>,
+	icon: <SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><Path fill="none" d="M0 0h24v24H0V0z" /><G><Path d="M2 9v2h19V9H2zm0 6h5v-2H2v2zm7 0h5v-2H9v2zm7 0h5v-2h-5v2z" /></G></SVG>,
 
 	category: 'layout',
 

diff --git a/packages/block-library/src/paragraph/index.js b/packages/block-library/src/paragraph/index.js
@@ -75,7 +75,7 @@ export const settings = {
 
 	description: __( 'Add some basic text.' ),
 
-	icon: <SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height={ 24 } width={ 24 }><Path d="M11 5v7H9.5C7.6 12 6 10.4 6 8.5S7.6 5 9.5 5H11m8-2H9.5C6.5 3 4 5.5 4 8.5S6.5 14 9.5 14H11v7h2V5h2v16h2V5h2V3z" /></SVG>,
+	icon: <SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><Path d="M11 5v7H9.5C7.6 12 6 10.4 6 8.5S7.6 5 9.5 5H11m8-2H9.5C6.5 3 4 5.5 4 8.5S6.5 14 9.5 14H11v7h2V5h2v16h2V5h2V3z" /></SVG>,
 
 	category: 'common',
 

diff --git a/packages/components/src/primitives/svg/index.native.js b/packages/components/src/primitives/svg/index.native.js
@@ -7,9 +7,20 @@ import {
 export const Path = PATH;
 export const G = GROUP;
 export const SVG = ( props ) => {
-	return (
-		<Svg width={ props.width } height={ props.height } >
-			{ props.children }
-		</Svg>
-	);
-};
+	if (props.width != undefined && props.height != undefined) {
+		return (
+			<Svg width={ props.width } height={ props.height } >
+				{ props.children }
+			</Svg>
+		);
+	} else {
+		// take viewport system to match the viewBox definition
+		// i.e. viewBox="0 0 24 24"
+		let viewBoxCoords = props.viewBox.split(' ');
+		return (
+			<Svg width={ viewBoxCoords[2] } height={ viewBoxCoords[3] } >
+				{ props.children }
+			</Svg>
+		);
+	}
+};