Introduce Icons package

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/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, saved } 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={ saved } /> }
 		</div>
 	);
 }

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, saved } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
@@ -126,8 +130,8 @@ export default function CustomSelectControl( {
 							} ) }
 						>
 							{ item === selectedItem && (
-								<Dashicon
-									icon="saved"
+								<Icon
+									icon={ saved }
 									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, saved } 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={ saved } />
 					{ __( 'Saved' ) }
 				</span>
 			);

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, saved } from '@wordpress/icons';
+
+<Icon icon={ saved } />
+```
+
+## 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;

packages/icons/src/icon/stories/index.js

@@ -0,0 +1,29 @@
+/**
+ * Internal dependencies
+ */
+import Icon from '../';
+import saved from '../../library/saved';
+import paragraph from '../../library/paragraph';
+
+export default { title: 'Icons/Icon', component: Icon };
+
+export const _default = () => {
+	return (
+		<>
+			<div>
+				<h2>Dashicons (corrected viewport)</h2>
+
+				<Icon icon={ saved } />
+				<Icon icon={ saved } size={ 36 } />
+				<Icon icon={ saved } size={ 48 } />
+			</div>
+			<div>
+				<h2>Material and Other</h2>
+
+				<Icon icon={ paragraph } />
+				<Icon icon={ paragraph } size={ 36 } />
+				<Icon icon={ paragraph } size={ 48 } />
+			</div>
+		</>
+	);
+};

packages/icons/src/index.js

@@ -0,0 +1,4 @@
+export { default as __experimentalIcon } from './icon';
+
+export { default as saved } from './library/saved';
+export { default as paragraph } from './library/paragraph';

packages/icons/src/library/paragraph.js

@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const paragraph = (
+	<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>
+);
+
+export default paragraph;

packages/icons/src/library/saved.js

@@ -0,0 +1,19 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const saved = (
+	<SVG
+		aria-hidden
+		role="img"
+		focusable="false"
+		xmlns="http://www.w3.org/2000/svg"
+		viewBox="-2 -2 24 24"
+	>
+		<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>
+);
+
+export default saved;
+

storybook/main.js

@@ -1,6 +1,7 @@
 const stories = [
 	process.env.NODE_ENV !== 'test' && './stories/**/*.(js|mdx)',
 	'../packages/components/src/**/stories/*.js',
+	'../packages/icons/src/**/stories/*.js',
 ].filter( Boolean );
 
 module.exports = {