Default Dashicons to 20x20, the rest to 24x24

WordPress · Oct 26, 2018 · c7959cf · c7959cf
1 parent 3486d0b
commit c7959cf
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 9 deletions.
diff --git a/packages/block-library/src/embed/test/__snapshots__/index.js.snap b/packages/block-library/src/embed/test/__snapshots__/index.js.snap
@@ -14,10 +14,10 @@ exports[`core/embed block edit matches snapshot 1`] = `
         aria-hidden="true"
         class="dashicon dashicons-embed-generic"
         focusable="false"
-        height="24"
+        height="20"
         role="img"
         viewBox="0 0 20 20"
-        width="24"
+        width="20"
         xmlns="http://www.w3.org/2000/svg"
       >
         <path

diff --git a/packages/components/src/icon/README.md b/packages/components/src/icon/README.md
@@ -73,7 +73,7 @@ The size (width and height) of the icon.
 
 - Type: `Number`
 - Required: No
-- Default: `24`
+- Default: `20` when a Dashicon is rendered, `24` for all other icons.
 
 ### className
 

diff --git a/packages/components/src/icon/index.js b/packages/components/src/icon/index.js
@@ -4,14 +4,21 @@
 import { cloneElement, createElement, Component, isValidElement } from '@wordpress/element';
 import { Dashicon, SVG } from '../';
 
-function Icon( { icon = null, size = 24, className } ) {
+function Icon( { icon = null, size, className } ) {
+	let iconSize;
+
 	if ( 'string' === typeof icon ) {
-		return <Dashicon icon={ icon } size={ size } className={ className } />;
+		// Dashicons should be 20x20 by default
+		iconSize = size || 20;
+		return <Dashicon icon={ icon } size={ iconSize } className={ className } />;
 	}
 
+	// Any other icons should be 24x24 by default
+	iconSize = size || 24;
+
 	if ( 'function' === typeof icon ) {
 		if ( icon.prototype instanceof Component ) {
-			return createElement( icon, { className, size } );
+			return createElement( icon, { className, size: iconSize } );
 		}
 
 		return icon();
@@ -20,8 +27,8 @@ function Icon( { icon = null, size = 24, className } ) {
 	if ( icon && ( icon.type === 'svg' || icon.type === SVG ) ) {
 		const appliedProps = {
 			className,
-			width: size,
-			height: size,
+			width: iconSize,
+			height: iconSize,
 			...icon.props,
 		};
 
@@ -31,7 +38,7 @@ function Icon( { icon = null, size = 24, className } ) {
 	if ( isValidElement( icon ) ) {
 		return cloneElement( icon, {
 			className,
-			size,
+			size: iconSize,
 		} );
 	}
 

diff --git a/packages/components/src/icon/test/index.js b/packages/components/src/icon/test/index.js
@@ -36,6 +36,12 @@ describe( 'Icon', () => {
 		expect( wrapper.find( 'Dashicon' ).prop( 'className' ) ).toBe( 'example-class' );
 	} );
 
+	it( 'renders a dashicon and with a default size of 20', () => {
+		const wrapper = shallow( <Icon icon="format-image" /> );
+
+		expect( wrapper.find( 'Dashicon' ).prop( 'size' ) ).toBe( 20 );
+	} );
+
 	it( 'renders a dashicon and passes the size to it', () => {
 		const wrapper = shallow( <Icon icon="format-image" size={ 32 } /> );
 
@@ -78,6 +84,13 @@ describe( 'Icon', () => {
 		expect( wrapper.prop( 'className' ) ).toBe( 'example-class' );
 	} );
 
+	it( 'renders an svg element with a default width and height of 24', () => {
+		const wrapper = shallow( <Icon icon={ svg } /> );
+
+		expect( wrapper.prop( 'width' ) ).toBe( 24 );
+		expect( wrapper.prop( 'height' ) ).toBe( 24 );
+	} );
+
 	it( 'renders an svg element and passes the size as its width and height', () => {
 		const wrapper = shallow( <Icon icon={ <SVG width={ 64 } height={ 64 }><Path d="M5 4v3h5.5v12h3V7H19V4z" /></SVG> } size={ 32 } /> );