Introduce the Icons package (#17055)

docs/manifest-devhub.json

@@ -1325,6 +1325,12 @@
 		"markdown_source": "../packages/i18n/README.md",
 		"parent": "packages"
 	},
+	{
+		"title": "@wordpress/icons",
+		"slug": "packages-icons",
+		"markdown_source": "../packages/icons/README.md",
+		"parent": "packages"
+	},
 	{
 		"title": "@wordpress/is-shallow-equal",
 		"slug": "packages-is-shallow-equal",

package.json

@@ -48,6 +48,7 @@
 		"@wordpress/hooks": "file:packages/hooks",
 		"@wordpress/html-entities": "file:packages/html-entities",
 		"@wordpress/i18n": "file:packages/i18n",
+		"@wordpress/icons": "file:packages/icons",
 		"@wordpress/is-shallow-equal": "file:packages/is-shallow-equal",
 		"@wordpress/keyboard-shortcuts": "file:packages/keyboard-shortcuts",
 		"@wordpress/keycodes": "file:packages/keycodes",

packages/base-styles/_z-index.scss

@@ -125,7 +125,7 @@ $z-layers: (
 
 	".components-circular-option-picker__option.is-pressed": 1,
 	// Needs to be higher than .components-circular-option-picker__option.is-pressed.
-	".components-circular-option-picker__option.is-pressed + .dashicons-saved": 2
+	".components-circular-option-picker__option.is-pressed + svg": 2
 );
 
 @function z-index( $key ) {

packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap

@@ -49,12 +49,11 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
           />
           <svg
             aria-hidden="true"
-            className="dashicon dashicons-saved"
             focusable="false"
-            height={20}
+            height={24}
             role="img"
-            viewBox="0 0 20 20"
-            width={20}
+            viewBox="-2 -2 24 24"
+            width={24}
             xmlns="http://www.w3.org/2000/svg"
           >
             <path

packages/block-library/package.json

@@ -41,6 +41,7 @@
 		"@wordpress/element": "file:../element",
 		"@wordpress/escape-html": "file:../escape-html",
 		"@wordpress/i18n": "file:../i18n",
+		"@wordpress/icons": "file:../icons",
 		"@wordpress/is-shallow-equal": "file:../is-shallow-equal",
 		"@wordpress/keycodes": "file:../keycodes",
 		"@wordpress/rich-text": "file:../rich-text",

packages/block-library/src/paragraph/index.js

@@ -7,13 +7,13 @@ import { isEmpty } from 'lodash';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
+import { paragraph as icon } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
 import deprecated from './deprecated';
 import edit from './edit';
-import icon from './icon';
 import metadata from './block.json';
 import save from './save';
 import transforms from './transforms';

packages/components/package.json

@@ -36,6 +36,7 @@
 		"@wordpress/element": "file:../element",
 		"@wordpress/hooks": "file:../hooks",
 		"@wordpress/i18n": "file:../i18n",
+		"@wordpress/icons": "file:../icons",
 		"@wordpress/is-shallow-equal": "file:../is-shallow-equal",
 		"@wordpress/keycodes": "file:../keycodes",
 		"@wordpress/primitives": "file:../primitives",

packages/components/src/circular-option-picker/index.js

@@ -3,13 +3,17 @@
  */
 import classnames from 'classnames';
 
+/**
+ * WordPress dependencies
+ */
+import { __experimentalIcon as Icon, check } from '@wordpress/icons';
+
 /**
  * Internal dependencies
  */
 import Button from '../button';
 import Dropdown from '../dropdown';
 import Tooltip from '../tooltip';
-import Dashicon from '../dashicon';
 
 function Option( {
 	className,
@@ -33,7 +37,7 @@ function Option( {
 				( <Tooltip text={ tooltipText }>{ optionButton }</Tooltip> ) :
 				optionButton
 			}
-			{ isSelected && <Dashicon icon="saved" /> }
+			{ isSelected && <Icon icon={ check } /> }
 		</div>
 	);
 }

packages/components/src/circular-option-picker/style.scss

@@ -72,12 +72,12 @@ $color-palette-circle-spacing: 12px;
 		position: relative;
 		z-index: z-index(".components-circular-option-picker__option.is-pressed");
 
-		& + .dashicons-saved {
+		& + svg {
 			position: absolute;
-			left: 4px;
-			top: 4px;
+			left: 2px;
+			top: 2px;
 			border-radius: 50%;
-			z-index: z-index(".components-circular-option-picker__option.is-pressed + .dashicons-saved");
+			z-index: z-index(".components-circular-option-picker__option.is-pressed + svg");
 			background: $white;
 			pointer-events: none;
 		}

packages/components/src/color-palette/test/__snapshots__/index.js.snap

@@ -318,27 +318,37 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
               />
             </ForwardRef(Button)>
           </Tooltip>
-          <Dashicon
-            icon="saved"
+          <Icon
+            icon={
+              <SVG
+                aria-hidden={true}
+                focusable="false"
+                role="img"
+                viewBox="-2 -2 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <Path
+                  d="M15.3 5.3l-6.8 6.8-2.8-2.8-1.4 1.4 4.2 4.2 8.2-8.2"
+                />
+              </SVG>
+            }
           >
             <SVG
               aria-hidden={true}
-              className="dashicon dashicons-saved"
               focusable="false"
-              height={20}
+              height={24}
               role="img"
-              viewBox="0 0 20 20"
-              width={20}
+              viewBox="-2 -2 24 24"
+              width={24}
               xmlns="http://www.w3.org/2000/svg"
             >
               <svg
                 aria-hidden="true"
-                className="dashicon dashicons-saved"
                 focusable="false"
-                height={20}
+                height={24}
                 role="img"
-                viewBox="0 0 20 20"
-                width={20}
+                viewBox="-2 -2 24 24"
+                width={24}
                 xmlns="http://www.w3.org/2000/svg"
               >
                 <Path
@@ -350,7 +360,7 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
                 </Path>
               </svg>
             </SVG>
-          </Dashicon>
+          </Icon>
         </div>
       </Option>
       <Option

packages/components/src/custom-select-control/index.js

@@ -4,6 +4,10 @@
 import { useSelect } from 'downshift';
 import classnames from 'classnames';
 
+/**
+ * WordPress dependencies
+ */
+import { __experimentalIcon as Icon, check } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
@@ -126,8 +130,8 @@ export default function CustomSelectControl( {
 							} ) }
 						>
 							{ item === selectedItem && (
-								<Dashicon
-									icon="saved"
+								<Icon
+									icon={ check }
 									className="components-custom-select-control__item-icon"
 								/>
 							) }

packages/editor/package.json

@@ -39,6 +39,7 @@
 		"@wordpress/hooks": "file:../hooks",
 		"@wordpress/html-entities": "file:../html-entities",
 		"@wordpress/i18n": "file:../i18n",
+		"@wordpress/icons": "file:../icons",
 		"@wordpress/is-shallow-equal": "file:../is-shallow-equal",
 		"@wordpress/keyboard-shortcuts": "file:../keyboard-shortcuts",
 		"@wordpress/keycodes": "file:../keycodes",

packages/editor/src/components/post-saved-state/index.js

@@ -14,6 +14,7 @@ import { withSelect, withDispatch } from '@wordpress/data';
 import { displayShortcut } from '@wordpress/keycodes';
 import { withSafeTimeout, compose } from '@wordpress/compose';
 import { withViewportMatch } from '@wordpress/viewport';
+import { __experimentalIcon as Icon, check } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -88,7 +89,7 @@ export class PostSavedState extends Component {
 		if ( forceSavedMessage || ( ! isNew && ! isDirty ) ) {
 			return (
 				<span className="editor-post-saved-state is-saved">
-					<Dashicon icon="saved" />
+					<Icon icon={ check } />
 					{ __( 'Saved' ) }
 				</span>
 			);

packages/editor/src/components/post-saved-state/style.scss

@@ -7,10 +7,11 @@
 	overflow: hidden;
 	white-space: nowrap;
 
-	.dashicon {
+	svg {
 		display: inline-block;
 		flex: 0 0 auto;
-		margin-right: $grid-size;
+		margin-right: $grid-size-small;
+		fill: currentColor;
 	}
 
 	@include break-small() {

packages/editor/src/components/post-saved-state/test/index.js

@@ -48,7 +48,7 @@ describe( 'PostSavedState', () => {
 				isSaveable={ true } />
 		);
 
-		expect( wrapper.childAt( 0 ).name() ).toBe( 'Dashicon' );
+		expect( wrapper.childAt( 0 ).name() ).toBe( 'Icon' );
 		expect( wrapper.childAt( 1 ).text() ).toBe( 'Saved' );
 	} );
 

packages/icons/.npmrc

@@ -0,0 +1 @@
+package-lock=false

packages/icons/CHANGELOG.md

@@ -0,0 +1,3 @@
+## 1.0.0 (2019-08-15)
+
+- Initial release

packages/icons/README.md

@@ -0,0 +1,30 @@
+# Icons
+
+WordPress Icons Library.
+
+## Installation
+
+Install the module:
+
+```bash
+npm install @wordpress/icons --save
+```
+
+_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods. Learn more about it in [Babel docs](https://babeljs.io/docs/en/next/caveats)._
+
+## Usage
+
+```js
+import { __experimentalIcon as Icon, check } from '@wordpress/icons';
+
+<Icon icon={ check } />
+```
+
+## Props
+
+Name | Type | Default | Description
+--- | --- | --- | ---
+`size` | `integer` | `24` | Size of icon in pixels.
+
+
+<br/><br/><p align="center"><img src="https://s.w.org/style/images/codeispoetry.png?1" alt="Code is Poetry." /></p>

packages/icons/package.json

@@ -0,0 +1,31 @@
+{
+	"name": "@wordpress/icons",
+	"version": "1.0.0",
+	"description": "WordPress Icons package, based on dashicon.",
+	"author": "The WordPress Contributors",
+	"license": "GPL-2.0-or-later",
+	"keywords": [
+		"icons",
+		"dashicon",
+		"wordpress"
+	],
+	"homepage": "https://github.com/WordPress/gutenberg/tree/master/packages/icons/README.md",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/WordPress/gutenberg.git",
+		"directory": "packages/icons"
+	},
+	"sideEffects": false,
+	"bugs": {
+		"url": "https://github.com/WordPress/gutenberg/issues"
+	},
+	"main": "build/index.js",
+	"module": "build-module/index.js",
+	"dependencies": {
+		"@wordpress/element": "../element",
+		"@wordpress/primitives": "../primitives"
+	},
+	"publishConfig": {
+		"access": "public"
+	}
+}

packages/icons/src/icon/index.js

@@ -0,0 +1,14 @@
+/**
+ * WordPress dependencies
+ */
+import { cloneElement } from '@wordpress/element';
+
+function Icon( { icon, size = 24, ...props } ) {
+	return cloneElement( icon, {
+		width: size,
+		height: size,
+		...props,
+	} );
+}
+
+export default Icon;