Move more dashicons to the icons package (#20181)

WordPress · Feb 14, 2020 · 61e936c · 61e936c
1 parent 5a5564b
commit 61e936c
Show file tree

Hide file tree

Showing 45 changed files with 272 additions and 89 deletions.
diff --git a/packages/block-directory/src/components/block-ratings/stars.js b/packages/block-directory/src/components/block-ratings/stars.js
@@ -7,7 +7,7 @@ import { times } from 'lodash';
  * WordPress dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
-import { Icon } from '@wordpress/components';
+import { Icon, starEmpty, starFilled, starHalf } from '@wordpress/icons';
 
 function Stars( { rating } ) {
 	const stars = Math.round( rating / 0.5 ) * 0.5;
@@ -21,21 +21,21 @@ function Stars( { rating } ) {
 			{ times( fullStarCount, ( i ) => (
 				<Icon
 					key={ `full_stars_${ i }` }
-					icon="star-filled"
+					icon={ starFilled }
 					size={ 16 }
 				/>
 			) ) }
 			{ times( halfStarCount, ( i ) => (
 				<Icon
 					key={ `half_stars_${ i }` }
-					icon="star-half"
+					icon={ starHalf }
 					size={ 16 }
 				/>
 			) ) }
 			{ times( emptyStarCount, ( i ) => (
 				<Icon
 					key={ `empty_stars_${ i }` }
-					icon="star-empty"
+					icon={ starEmpty }
 					size={ 16 }
 				/>
 			) ) }

diff --git a/packages/block-directory/src/components/block-ratings/style.scss b/packages/block-directory/src/components/block-ratings/style.scss
@@ -4,16 +4,13 @@
 		line-height: 1;
 		display: flex;
 	}
-	.dashicons {
-		font-size: ms(-2);
-		width: 1.1em;
-	}
+
 	.block-directory-block-ratings__rating-count {
 		color: $dark-gray-400;
 		font-size: ms(-2);
 	}
 
-	[class*="dashicons-star-"] {
-		color: #ffb900;
+	svg {
+		fill: #ffb900;
 	}
 }
diff --git a/packages/block-editor/src/components/block-settings-menu/index.js b/packages/block-editor/src/components/block-settings-menu/index.js
@@ -14,7 +14,12 @@ import {
 	MenuItem,
 } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
-import { trash, moreHorizontal } from '@wordpress/icons';
+import {
+	trash,
+	moreHorizontal,
+	insertAfter,
+	insertBefore,
+} from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -107,7 +112,7 @@ export function BlockSettingsMenu( { clientIds } ) {
 													onClose,
 													onInsertBefore
 												) }
-												icon="insert-before"
+												icon={ insertBefore }
 												shortcut={
 													shortcuts.insertBefore
 												}
@@ -119,7 +124,7 @@ export function BlockSettingsMenu( { clientIds } ) {
 													onClose,
 													onInsertAfter
 												) }
-												icon="insert-after"
+												icon={ insertAfter }
 												shortcut={
 													shortcuts.insertAfter
 												}

diff --git a/packages/block-editor/src/components/block-switcher/index.js b/packages/block-editor/src/components/block-switcher/index.js
@@ -26,6 +26,7 @@ import { Component } from '@wordpress/element';
 import { DOWN } from '@wordpress/keycodes';
 import { withSelect, withDispatch } from '@wordpress/data';
 import { compose } from '@wordpress/compose';
+import { layout } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -87,7 +88,7 @@ export class BlockSwitcher extends Component {
 			const blockType = getBlockType( sourceBlockName );
 			icon = blockType.icon;
 		} else {
-			icon = 'layout';
+			icon = layout;
 		}
 
 		if ( ! hasBlockStyles && ! possibleBlockTransformations.length ) {

diff --git a/packages/block-editor/src/components/block-switcher/test/__snapshots__/index.js.snap b/packages/block-editor/src/components/block-switcher/test/__snapshots__/index.js.snap
@@ -7,7 +7,16 @@ exports[`BlockSwitcher should render disabled block switcher with multi block of
     disabled={true}
     icon={
       <BlockIcon
-        icon="layout"
+        icon={
+          <SVG
+            viewBox="-2 -2 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <Path
+              d="M2 2h5v11H2V2zm6 0h5v5H8V2zm6 0h4v16h-4V2zM8 8h5v5H8V8zm-6 6h11v4H2v-4z"
+            />
+          </SVG>
+        }
         showColors={true}
       />
     }

diff --git a/packages/block-editor/src/components/block-variation-picker/index.js b/packages/block-editor/src/components/block-variation-picker/index.js
@@ -8,9 +8,10 @@ import classnames from 'classnames';
  */
 import { __ } from '@wordpress/i18n';
 import { Button, Placeholder } from '@wordpress/components';
+import { layout } from '@wordpress/icons';
 
 function BlockVariationPicker( {
-	icon = 'layout',
+	icon = layout,
 	label = __( 'Choose variation' ),
 	instructions = __( 'Select a variation to start with.' ),
 	variations,

diff --git a/packages/block-editor/src/components/button-block-appender/index.native.js b/packages/block-editor/src/components/button-block-appender/index.native.js
@@ -7,7 +7,8 @@ import { View } from 'react-native';
  * WordPress dependencies
  */
 import { withPreferredColorScheme } from '@wordpress/compose';
-import { Button, Dashicon } from '@wordpress/components';
+import { Button } from '@wordpress/components';
+import { Icon, plusCircleFilled } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -44,8 +45,8 @@ function ButtonBlockAppender( {
 						fixedRatio={ false }
 					>
 						<View style={ appenderStyle }>
-							<Dashicon
-								icon="plus-alt"
+							<Icon
+								icon={ plusCircleFilled }
 								style={ addBlockButtonStyle }
 								color={ addBlockButtonStyle.color }
 								size={ addBlockButtonStyle.size }

diff --git a/packages/block-editor/src/components/inserter/index.native.js b/packages/block-editor/src/components/inserter/index.native.js
@@ -2,16 +2,17 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import {
-	Dropdown,
-	ToolbarButton,
-	Dashicon,
-	Picker,
-} from '@wordpress/components';
+import { Dropdown, ToolbarButton, Picker } from '@wordpress/components';
 import { Component } from '@wordpress/element';
 import { withSelect } from '@wordpress/data';
 import { compose, withPreferredColorScheme } from '@wordpress/compose';
 import { isUnmodifiedDefaultBlock } from '@wordpress/blocks';
+import {
+	Icon,
+	plusCircleFilled,
+	insertAfter,
+	insertBefore,
+} from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -24,7 +25,11 @@ const defaultRenderToggle = ( { onToggle, disabled, style, onLongPress } ) => (
 	<ToolbarButton
 		title={ __( 'Add block' ) }
 		icon={
-			<Dashicon icon="plus-alt" style={ style } color={ style.color } />
+			<Icon
+				icon={ plusCircleFilled }
+				style={ style }
+				color={ style.color }
+			/>
 		}
 		onClick={ onToggle }
 		extraProps={ {
@@ -51,31 +56,31 @@ export class Inserter extends Component {
 		const addBeforeOption = {
 			value: 'before',
 			label: __( 'Add Block Before' ),
-			icon: 'insert-before',
+			icon: insertBefore,
 		};
 
 		const replaceCurrentOption = {
 			value: 'replace',
 			label: __( 'Replace Current Block' ),
-			icon: 'plus-alt',
+			icon: plusCircleFilled,
 		};
 
 		const addAfterOption = {
 			value: 'after',
 			label: __( 'Add Block After' ),
-			icon: 'insert-after',
+			icon: insertAfter,
 		};
 
 		const addToBeginningOption = {
 			value: 'before',
 			label: __( 'Add To Beginning' ),
-			icon: 'insert-before',
+			icon: insertBefore,
 		};
 
 		const addToEndOption = {
 			value: 'after',
 			label: __( 'Add To End' ),
-			icon: 'insert-after',
+			icon: insertAfter,
 		};
 
 		const { isAnyBlockSelected, isSelectedBlockReplaceable } = this.props;

diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js
@@ -33,6 +33,7 @@ import { withDispatch, withSelect } from '@wordpress/data';
 import { withInstanceId, compose, withSafeTimeout } from '@wordpress/compose';
 import { LEFT, RIGHT, UP, DOWN, BACKSPACE, ENTER } from '@wordpress/keycodes';
 import { addQueryArgs } from '@wordpress/url';
+import { controlsRepeat } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -422,7 +423,7 @@ export class InserterMenu extends Component {
 								title={ __( 'Reusable' ) }
 								opened={ isPanelOpen( 'reusable' ) }
 								onToggle={ this.onTogglePanel( 'reusable' ) }
-								icon="controls-repeat"
+								icon={ controlsRepeat }
 								ref={ this.bindPanel( 'reusable' ) }
 							>
 								<BlockTypesList

diff --git a/packages/block-editor/src/components/link-control/search-input.js b/packages/block-editor/src/components/link-control/search-input.js
@@ -5,6 +5,7 @@ import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { Button } from '@wordpress/components';
 import { LEFT, RIGHT, UP, DOWN, BACKSPACE, ENTER } from '@wordpress/keycodes';
+import { keyboardReturn } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -77,7 +78,7 @@ const LinkControlSearchInput = ( {
 				<Button
 					type="submit"
 					label={ __( 'Submit' ) }
-					icon="editor-break"
+					icon={ keyboardReturn }
 					className="block-editor-link-control__search-submit"
 				/>
 			</div>

diff --git a/packages/block-editor/src/components/link-control/test/__snapshots__/index.js.snap b/packages/block-editor/src/components/link-control/test/__snapshots__/index.js.snap
@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Basic rendering should render 1`] = `"<div tabindex=\\"-1\\" class=\\"block-editor-link-control\\"><form><div class=\\"components-base-control block-editor-url-input block-editor-link-control__search-input\\"><div class=\\"components-base-control__field\\"><input type=\\"text\\" aria-label=\\"URL\\" required=\\"\\" placeholder=\\"Search or type url\\" role=\\"combobox\\" aria-expanded=\\"false\\" aria-autocomplete=\\"list\\" aria-owns=\\"block-editor-url-input-suggestions-0\\" value=\\"\\"></div></div><div class=\\"block-editor-link-control__search-actions\\"><button type=\\"submit\\" class=\\"components-button block-editor-link-control__search-submit has-icon\\" aria-label=\\"Submit\\"><svg aria-hidden=\\"true\\" role=\\"img\\" focusable=\\"false\\" xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"20\\" height=\\"20\\" viewBox=\\"0 0 20 20\\" class=\\"dashicon dashicons-editor-break\\"><path d=\\"M16 4h2v9H7v3l-5-4 5-4v3h9V4z\\"></path></svg></button></div></form><fieldset class=\\"block-editor-link-control__settings\\"><legend class=\\"screen-reader-text\\">Currently selected link settings</legend><div class=\\"components-base-control components-toggle-control block-editor-link-control__setting\\"><div class=\\"components-base-control__field\\"><span class=\\"components-form-toggle\\"><input class=\\"components-form-toggle__input\\" id=\\"inspector-toggle-control-0\\" type=\\"checkbox\\"><span class=\\"components-form-toggle__track\\"></span><span class=\\"components-form-toggle__thumb\\"></span><svg width=\\"6\\" height=\\"6\\" aria-hidden=\\"true\\" role=\\"img\\" focusable=\\"false\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 6 6\\" class=\\"components-form-toggle__off\\"><path d=\\"M3 1.5c.8 0 1.5.7 1.5 1.5S3.8 4.5 3 4.5 1.5 3.8 1.5 3 2.2 1.5 3 1.5M3 0C1.3 0 0 1.3 0 3s1.3 3 3 3 3-1.3 3-3-1.3-3-3-3z\\"></path></svg></span><label for=\\"inspector-toggle-control-0\\" class=\\"components-toggle-control__label\\">Open in New Tab</label></div></div></fieldset></div>"`;
+exports[`Basic rendering should render 1`] = `"<div tabindex=\\"-1\\" class=\\"block-editor-link-control\\"><form><div class=\\"components-base-control block-editor-url-input block-editor-link-control__search-input\\"><div class=\\"components-base-control__field\\"><input type=\\"text\\" aria-label=\\"URL\\" required=\\"\\" placeholder=\\"Search or type url\\" role=\\"combobox\\" aria-expanded=\\"false\\" aria-autocomplete=\\"list\\" aria-owns=\\"block-editor-url-input-suggestions-0\\" value=\\"\\"></div></div><div class=\\"block-editor-link-control__search-actions\\"><button type=\\"submit\\" class=\\"components-button block-editor-link-control__search-submit has-icon\\" aria-label=\\"Submit\\"><svg width=\\"24\\" height=\\"24\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"-2 -2 24 24\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M16 4h2v9H7v3l-5-4 5-4v3h9V4z\\"></path></svg></button></div></form><fieldset class=\\"block-editor-link-control__settings\\"><legend class=\\"screen-reader-text\\">Currently selected link settings</legend><div class=\\"components-base-control components-toggle-control block-editor-link-control__setting\\"><div class=\\"components-base-control__field\\"><span class=\\"components-form-toggle\\"><input class=\\"components-form-toggle__input\\" id=\\"inspector-toggle-control-0\\" type=\\"checkbox\\"><span class=\\"components-form-toggle__track\\"></span><span class=\\"components-form-toggle__thumb\\"></span><svg width=\\"6\\" height=\\"6\\" aria-hidden=\\"true\\" role=\\"img\\" focusable=\\"false\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 6 6\\" class=\\"components-form-toggle__off\\"><path d=\\"M3 1.5c.8 0 1.5.7 1.5 1.5S3.8 4.5 3 4.5 1.5 3.8 1.5 3 2.2 1.5 3 1.5M3 0C1.3 0 0 1.3 0 3s1.3 3 3 3 3-1.3 3-3-1.3-3-3-3z\\"></path></svg></span><label for=\\"inspector-toggle-control-0\\" class=\\"components-toggle-control__label\\">Open in New Tab</label></div></div></fieldset></div>"`;
diff --git a/packages/block-editor/src/components/media-placeholder/index.native.js b/packages/block-editor/src/components/media-placeholder/index.native.js
@@ -13,9 +13,9 @@ import {
 	MEDIA_TYPE_IMAGE,
 	MEDIA_TYPE_VIDEO,
 } from '@wordpress/block-editor';
-import { Dashicon } from '@wordpress/components';
 import { withPreferredColorScheme } from '@wordpress/compose';
 import { useRef } from '@wordpress/element';
+import { Icon, plusCircleFilled } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -113,8 +113,8 @@ function MediaPlaceholder( props ) {
 			);
 		} else if ( isAppender && ! disableMediaButtons ) {
 			return (
-				<Dashicon
-					icon="plus-alt"
+				<Icon
+					icon={ plusCircleFilled }
 					style={ addMediaButtonStyle }
 					color={ addMediaButtonStyle.color }
 					size={ addMediaButtonStyle.size }

diff --git a/packages/block-editor/src/components/media-replace-flow/index.js b/packages/block-editor/src/components/media-replace-flow/index.js
@@ -16,7 +16,7 @@ import {
 import { LEFT, RIGHT, UP, DOWN, BACKSPACE, ENTER } from '@wordpress/keycodes';
 import { useSelect } from '@wordpress/data';
 import { compose } from '@wordpress/compose';
-import { link, upload } from '@wordpress/icons';
+import { link, upload, media as mediaIcon } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -146,7 +146,7 @@ const MediaReplaceFlow = ( {
 							onSelect={ ( media ) => selectMedia( media ) }
 							allowedTypes={ allowedTypes }
 							render={ ( { open } ) => (
-								<MenuItem icon="admin-media" onClick={ open }>
+								<MenuItem icon={ mediaIcon } onClick={ open }>
 									{ __( 'Open Media Library' ) }
 								</MenuItem>
 							) }

diff --git a/packages/block-library/src/button/edit.native.js b/packages/block-library/src/button/edit.native.js
@@ -26,7 +26,7 @@ import {
 import { Component } from '@wordpress/element';
 import { withSelect } from '@wordpress/data';
 import { isURL, prependHTTP } from '@wordpress/url';
-import { link } from '@wordpress/icons';
+import { link, external } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -244,7 +244,7 @@ class ButtonEdit extends Component {
 					keyboardType="url"
 				/>
 				<ToggleControl
-					icon={ ! isCompatibleWithSettings && 'external' }
+					icon={ ! isCompatibleWithSettings && external }
 					label={ __( 'Open in new tab' ) }
 					checked={ linkTarget === '_blank' }
 					onChange={ this.onChangeOpenInNewTab }

diff --git a/packages/block-library/src/embed/test/__snapshots__/index.js.snap b/packages/block-library/src/embed/test/__snapshots__/index.js.snap
@@ -75,12 +75,12 @@ exports[`core/embed block edit matches snapshot 1`] = `
         </span>
         <svg
           aria-hidden="true"
-          class="dashicon dashicons-external components-external-link__icon"
+          class="components-external-link__icon"
           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

diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js
@@ -48,7 +48,7 @@ import { isURL } from '@wordpress/url';
 import { doAction, hasAction } from '@wordpress/hooks';
 import { compose, withPreferredColorScheme } from '@wordpress/compose';
 import { withSelect } from '@wordpress/data';
-import { link, image as icon } from '@wordpress/icons';
+import { external, link, image as icon, textColor } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -397,7 +397,7 @@ export class ImageEdit extends React.Component {
 						keyboardType="url"
 					/>
 					<ToggleControl
-						icon={ 'external' }
+						icon={ external }
 						label={ __( 'Open in new tab' ) }
 						checked={ linkTarget === '_blank' }
 						onChange={ this.onSetNewTab }
@@ -415,7 +415,7 @@ export class ImageEdit extends React.Component {
 						/>
 					) }
 					<TextControl
-						icon={ 'editor-textcolor' }
+						icon={ textColor }
 						label={ __( 'Alt Text' ) }
 						value={ alt || '' }
 						valuePlaceholder={ __( 'None' ) }

diff --git a/packages/block-library/src/missing/edit.native.js b/packages/block-library/src/missing/edit.native.js
@@ -12,6 +12,7 @@ import { coreBlocks } from '@wordpress/block-library';
 import { normalizeIconObject } from '@wordpress/blocks';
 import { Component } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
+import { help } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -47,7 +48,7 @@ export class UnsupportedBlockEdit extends Component {
 					<Icon
 						className="unsupported-icon-help"
 						label={ __( 'Help icon' ) }
-						icon="editor-help"
+						icon={ help }
 						color={ infoIconStyle.color }
 					/>
 				</View>
@@ -89,7 +90,7 @@ export class UnsupportedBlockEdit extends Component {
 			>
 				<View style={ styles.infoContainer }>
 					<Icon
-						icon="editor-help"
+						icon={ help }
 						color={ infoSheetIconStyle.color }
 						size={ styles.infoSheetIcon.size }
 					/>