Only import the Gridicons we need, to reduce package size. (https://github.com/woocommerce/woocommerce-admin/pull/5668)

2020-11-19 09:52:24 +13:00 · 2020-11-19 09:52:24 +13:00 · be47d9d795
parent 2c76b62541
commit be47d9d795
14 changed files with 34 additions and 43 deletions
--- a/plugins/woocommerce-admin/client/dashboard/dashboard-charts/index.js
+++ b/plugins/woocommerce-admin/client/dashboard/dashboard-charts/index.js
@ -4,7 +4,8 @@
 import { __ } from '@wordpress/i18n';
 import classNames from 'classnames';
 import { Fragment, useState } from '@wordpress/element';
-import Gridicon from 'gridicons';
+import LineGraphIcon from 'gridicons/dist/line-graph';
+import StatsAltIcon from 'gridicons/dist/stats-alt';
 import PropTypes from 'prop-types';
 import { Button, NavigableMenu, SelectControl } from '@wordpress/components';

@ -221,7 +222,7 @@ const DashboardCharts = ( props ) => {
 						tabIndex={ query.chartType === 'line' ? 0 : -1 }
 						onClick={ handleTypeToggle( 'line' ) }
 					>
-						<Gridicon icon="line-graph" />
+						<LineGraphIcon />
 					</Button>
 					<Button
 						className={ classNames(
@ -237,7 +238,7 @@ const DashboardCharts = ( props ) => {
 						tabIndex={ query.chartType === 'bar' ? 0 : -1 }
 						onClick={ handleTypeToggle( 'bar' ) }
 					>
-						<Gridicon icon="stats-alt" />
+						<StatsAltIcon />
 					</Button>
 				</NavigableMenu>
 			</SectionHeader>
--- a/plugins/woocommerce-admin/client/header/activity-panel/activity-card/index.js
+++ b/plugins/woocommerce-admin/client/header/activity-panel/activity-card/index.js
@ -3,7 +3,7 @@
 */
 import classnames from 'classnames';
 import { cloneElement, Component } from '@wordpress/element';
-import Gridicon from 'gridicons';
+import NoticeOutline from 'gridicons/dist/notice-outline';
 import moment from 'moment';
 import PropTypes from 'prop-types';
 import { H, Section } from '@woocommerce/components';
@ -110,7 +110,7 @@ ActivityCard.propTypes = {
 };

 ActivityCard.defaultProps = {
-	icon: <Gridicon icon="notice-outline" size={ 48 } />,
+	icon: <NoticeOutline size={ 48 } />,
 	unread: false,
 };

--- a/plugins/woocommerce-admin/client/header/activity-panel/activity-card/test/index.js
+++ b/plugins/woocommerce-admin/client/header/activity-panel/activity-card/test/index.js
@ -2,7 +2,7 @@
 * External dependencies
 */
 import { Button } from '@wordpress/components';
-import Gridicon from 'gridicons';
+import CustomizeIcon from 'gridicons/dist/customize';
 import moment from 'moment';
 import { Gravatar } from '@woocommerce/components';
 import { render } from '@testing-library/react';
@ -44,10 +44,7 @@ describe( 'ActivityCard', () => {

 	test( 'should render a custom icon on a card', () => {
 		const { container } = render(
-			<ActivityCard
-				title="Inbox message"
-				icon={ <Gridicon icon="customize" /> }
-			>
+			<ActivityCard title="Inbox message" icon={ <CustomizeIcon /> }>
 				This card has some content
 			</ActivityCard>
 		);
--- a/plugins/woocommerce-admin/client/header/activity-panel/panels/reviews.js
+++ b/plugins/woocommerce-admin/client/header/activity-panel/panels/reviews.js
@ -6,7 +6,8 @@ import classnames from 'classnames';
 import { Component, Fragment } from '@wordpress/element';
 import { withSelect } from '@wordpress/data';
 import { Button } from '@wordpress/components';
-import Gridicon from 'gridicons';
+import CheckmarkIcon from 'gridicons/dist/checkmark';
+import TimeIcon from 'gridicons/dist/time';
 import interpolateComponents from 'interpolate-components';
 import { get, isNull } from 'lodash';
 import PropTypes from 'prop-types';
@ -86,7 +87,7 @@ class ReviewsPanel extends Component {
 				<ReviewRating review={ review } />
 				{ review.verified && (
 					<span className="woocommerce-review-activity-card__verified">
-						<Gridicon icon="checkmark" size={ 18 } />
+						<CheckmarkIcon size={ 18 } />
 						{ __( 'Verified customer', 'woocommerce-admin' ) }
 					</span>
 				) }
@ -234,7 +235,7 @@ class ReviewsPanel extends Component {
 			<ActivityCard
 				className="woocommerce-empty-activity-card"
 				title={ title }
-				icon={ <Gridicon icon="time" size={ 48 } /> }
+				icon={ <TimeIcon size={ 48 } /> }
 				actions={
 					<Button
 						href={ buttonUrl }
--- a/plugins/woocommerce-admin/client/header/activity-panel/panels/stock/index.js
+++ b/plugins/woocommerce-admin/client/header/activity-panel/panels/stock/index.js
@ -6,7 +6,7 @@ import { Component, Fragment } from '@wordpress/element';
 import { compose } from '@wordpress/compose';
 import { withSelect } from '@wordpress/data';
 import PropTypes from 'prop-types';
-import Gridicon from 'gridicons';
+import CheckmarkIcon from 'gridicons/dist/checkmark';
 import { EmptyContent, Section } from '@woocommerce/components';
 import { QUERY_DEFAULTS, ITEMS_STORE_NAME } from '@woocommerce/data';

@ -26,7 +26,7 @@ class StockPanel extends Component {
 					'Your stock is in good shape.',
 					'woocommerce-admin'
 				) }
-				icon={ <Gridicon icon="checkmark" size={ 48 } /> }
+				icon={ <CheckmarkIcon size={ 48 } /> }
 			>
 				{ __(
 					'You currently have no products running low on stock.',
--- a/plugins/woocommerce-admin/client/marketing/overview/welcome-card/index.js
+++ b/plugins/woocommerce-admin/client/marketing/overview/welcome-card/index.js
@ -3,7 +3,7 @@
 */
 import { __ } from '@wordpress/i18n';
 import { Button, Card, CardBody } from '@wordpress/components';
-import Gridicon from 'gridicons';
+import CrossIcon from 'gridicons/dist/cross';
 import { compose } from '@wordpress/compose';
 import { withDispatch, withSelect } from '@wordpress/data';
 import PropTypes from 'prop-types';
@ -36,7 +36,7 @@ const WelcomeCard = ( { isHidden, updateOptions } ) => {
 					onClick={ hide }
 					className="woocommerce-marketing-overview-welcome-card__hide-button"
 				>
-					<Gridicon icon="cross" />
+					<CrossIcon />
 				</Button>
 				<img src={ WelcomeImage } alt="" />
 				<h3>
--- a/plugins/woocommerce-admin/client/profile-wizard/steps/theme/index.js
+++ b/plugins/woocommerce-admin/client/profile-wizard/steps/theme/index.js
@ -6,7 +6,7 @@ import apiFetch from '@wordpress/api-fetch';
 import { Component, Fragment } from '@wordpress/element';
 import { compose } from '@wordpress/compose';
 import { decodeEntities } from '@wordpress/html-entities';
-import Gridicon from 'gridicons';
+import InfoIcon from 'gridicons/dist/info';
 import {
 	Button,
 	TabPanel,
@ -211,8 +211,7 @@ class Theme extends Component {
 								) }
 							>
 								<span>
-									<Gridicon
-										icon="info"
+									<InfoIcon
 										role="img"
 										aria-hidden="true"
 										focusable="false"
--- a/plugins/woocommerce-admin/client/profile-wizard/steps/theme/uploader.js
+++ b/plugins/woocommerce-admin/client/profile-wizard/steps/theme/uploader.js
@ -11,7 +11,7 @@ import {
 	DropZone,
 	FormFileUpload,
 } from '@wordpress/components';
-import Gridicon from 'gridicons';
+import CloudUploadIcon from 'gridicons/dist/cloud-upload';
 import { noop } from 'lodash';
 import PropTypes from 'prop-types';
 import { withDispatch } from '@wordpress/data';
@ -77,7 +77,7 @@ class ThemeUploader extends Component {
 								accept=".zip"
 								onChange={ this.handleFilesUpload }
 							>
-								<Gridicon icon="cloud-upload" />
+								<CloudUploadIcon />
 								<H className="woocommerce-theme-uploader__title">
 									{ __(
 										'Upload a theme',
--- a/plugins/woocommerce-admin/packages/components/src/advanced-filters/index.js
+++ b/plugins/woocommerce-admin/packages/components/src/advanced-filters/index.js
@ -6,7 +6,7 @@ import { Component, createRef } from '@wordpress/element';
 import { SelectControl, Button, Dropdown } from '@wordpress/components';
 import { partial, difference, isEqual } from 'lodash';
 import PropTypes from 'prop-types';
-import Gridicon from 'gridicons';
+import AddOutlineIcon from 'gridicons/dist/add-outline';
 import interpolateComponents from 'interpolate-components';

 import {
@ -307,7 +307,7 @@ class AdvancedFilters extends Component {
 									onClick={ onToggle }
 									aria-expanded={ isOpen }
 								>
-									<Gridicon icon="add-outline" />
+									<AddOutlineIcon />
 									{ __(
 										'Add a Filter',
 										'woocommerce-admin'
--- a/plugins/woocommerce-admin/packages/components/src/advanced-filters/item.js
+++ b/plugins/woocommerce-admin/packages/components/src/advanced-filters/item.js
@ -2,7 +2,7 @@
 * External dependencies
 */
 import { Button } from '@wordpress/components';
-import Gridicon from 'gridicons';
+import CrossSmallIcon from 'gridicons/dist/cross-small';
 import classnames from 'classnames';

 /**
@ -74,7 +74,7 @@ const AdvancedFilterItem = ( props ) => {
 				label={ labels.remove }
 				onClick={ removeFilter }
 			>
-				<Gridicon icon="cross-small" />
+				<CrossSmallIcon />
 			</Button>
 		</li>
 	);
--- a/plugins/woocommerce-admin/packages/components/src/chart/index.js
+++ b/plugins/woocommerce-admin/packages/components/src/chart/index.js
@ -6,7 +6,8 @@ import classNames from 'classnames';
 import { Component, createRef, Fragment } from '@wordpress/element';
 import { formatDefaultLocale as d3FormatDefaultLocale } from 'd3-format';
 import { isEqual, partial, without } from 'lodash';
-import Gridicon from 'gridicons';
+import LineGraphIcon from 'gridicons/dist/line-graph';
+import StatsAltIcon from 'gridicons/dist/stats-alt';
 import { Button, NavigableMenu, SelectControl } from '@wordpress/components';
 import { interpolateViridis as d3InterpolateViridis } from 'd3-scale-chromatic';
 import memoize from 'memoize-one';
@ -392,7 +393,7 @@ class Chart extends Component {
 									'line'
 								) }
 							>
-								<Gridicon icon="line-graph" />
+								<LineGraphIcon />
 							</Button>
 							<Button
 								className={ classNames(
@ -411,7 +412,7 @@ class Chart extends Component {
 									'bar'
 								) }
 							>
-								<Gridicon icon="stats-alt" />
+								<StatsAltIcon />
 							</Button>
 						</NavigableMenu>
 					</div>
--- a/plugins/woocommerce-admin/packages/components/src/rating/index.js
+++ b/plugins/woocommerce-admin/packages/components/src/rating/index.js
@ -4,7 +4,7 @@
 import { __, sprintf } from '@wordpress/i18n';
 import classnames from 'classnames';
 import { Component } from '@wordpress/element';
-import Gridicon from 'gridicons';
+import StarIcon from 'gridicons/dist/star';
 import PropTypes from 'prop-types';

 /**
@ -22,13 +22,7 @@ class Rating extends Component {

 		const stars = [];
 		for ( let i = 0; i < totalStars; i++ ) {
-			stars.push(
-				<Gridicon
-					key={ 'star-' + i }
-					icon="star"
-					style={ starStyles }
-				/>
-			);
+			stars.push( <StarIcon key={ 'star-' + i } style={ starStyles } /> );
 		}
 		return stars;
 	}
--- a/plugins/woocommerce-admin/packages/components/src/search-list-control/index.js
+++ b/plugins/woocommerce-admin/packages/components/src/search-list-control/index.js
@ -12,7 +12,7 @@ import {
 import { Component, Fragment } from '@wordpress/element';
 import { compose, withInstanceId, withState } from '@wordpress/compose';
 import { escapeRegExp, findIndex } from 'lodash';
-import Gridicon from 'gridicons';
+import NoticeOutlineIcon from 'gridicons/dist/notice-outline';
 import PropTypes from 'prop-types';

 /**
@ -158,8 +158,7 @@ export class SearchListControl extends Component {
 			return (
 				<div className="woocommerce-search-list__list is-not-found">
 					<span className="woocommerce-search-list__not-found-icon">
-						<Gridicon
-							icon="notice-outline"
+						<NoticeOutlineIcon
 							role="img"
 							aria-hidden="true"
 							focusable="false"
--- a/plugins/woocommerce-admin/packages/components/src/summary/number.js
+++ b/plugins/woocommerce-admin/packages/components/src/summary/number.js
@ -8,7 +8,7 @@ import {
 } from '@wordpress/components';
 import { sprintf, __ } from '@wordpress/i18n';
 import classnames from 'classnames';
-import Gridicon from 'gridicons';
+import ChevronDownIcon from 'gridicons/dist/chevron-down';
 import { isNil, noop } from 'lodash';
 import PropTypes from 'prop-types';
 /**
@ -140,9 +140,8 @@ const SummaryNumber = ( {
 					</Tooltip>
 				</div>
 				{ onToggle ? (
-					<Gridicon
+					<ChevronDownIcon
 						className="woocommerce-summary__toggle"
-						icon="chevron-down"
 						size={ 24 }
 					/>
 				) : null }