Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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

This commit is contained in:
Sam Seay 2020-11-19 09:52:24 +13:00 committed by GitHub
parent 2c76b62541
commit be47d9d795
14 changed files with 34 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
plugins/woocommerce-admin/client/dashboard/dashboard-charts/index.js
View File

@ -4,7 +4,8 @@
import { __ } from '@wordpress/i18n'; import { __ } from '@wordpress/i18n';
import classNames from 'classnames'; import classNames from 'classnames';
import { Fragment, useState } from '@wordpress/element'; 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 PropTypes from 'prop-types';
import { Button, NavigableMenu, SelectControl } from '@wordpress/components'; import { Button, NavigableMenu, SelectControl } from '@wordpress/components';
@ -221,7 +222,7 @@ const DashboardCharts = ( props ) => {
tabIndex={ query.chartType === 'line' ? 0 : -1 } tabIndex={ query.chartType === 'line' ? 0 : -1 }
onClick={ handleTypeToggle( 'line' ) } onClick={ handleTypeToggle( 'line' ) }
> >
<Gridicon icon="line-graph" /> <LineGraphIcon />
</Button> </Button>
<Button <Button
className={ classNames( className={ classNames(
@ -237,7 +238,7 @@ const DashboardCharts = ( props ) => {
tabIndex={ query.chartType === 'bar' ? 0 : -1 } tabIndex={ query.chartType === 'bar' ? 0 : -1 }
onClick={ handleTypeToggle( 'bar' ) } onClick={ handleTypeToggle( 'bar' ) }
> >
<Gridicon icon="stats-alt" /> <StatsAltIcon />
</Button> </Button>
</NavigableMenu> </NavigableMenu>
</SectionHeader> </SectionHeader>

4
plugins/woocommerce-admin/client/header/activity-panel/activity-card/index.js
View File

@ -3,7 +3,7 @@
*/ */
import classnames from 'classnames'; import classnames from 'classnames';
import { cloneElement, Component } from '@wordpress/element'; import { cloneElement, Component } from '@wordpress/element';
import Gridicon from 'gridicons'; import NoticeOutline from 'gridicons/dist/notice-outline';
import moment from 'moment'; import moment from 'moment';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { H, Section } from '@woocommerce/components'; import { H, Section } from '@woocommerce/components';
@ -110,7 +110,7 @@ ActivityCard.propTypes = {
}; };
ActivityCard.defaultProps = { ActivityCard.defaultProps = {
icon: <Gridicon icon="notice-outline" size={ 48 } />, icon: <NoticeOutline size={ 48 } />,
unread: false, unread: false,
}; };

7
plugins/woocommerce-admin/client/header/activity-panel/activity-card/test/index.js
View File

@ -2,7 +2,7 @@
* External dependencies * External dependencies
*/ */
import { Button } from '@wordpress/components'; import { Button } from '@wordpress/components';
import Gridicon from 'gridicons'; import CustomizeIcon from 'gridicons/dist/customize';
import moment from 'moment'; import moment from 'moment';
import { Gravatar } from '@woocommerce/components'; import { Gravatar } from '@woocommerce/components';
import { render } from '@testing-library/react'; import { render } from '@testing-library/react';
@ -44,10 +44,7 @@ describe( 'ActivityCard', () => {
test( 'should render a custom icon on a card', () => { test( 'should render a custom icon on a card', () => {
const { container } = render( const { container } = render(
<ActivityCard <ActivityCard title="Inbox message" icon={ <CustomizeIcon /> }>
title="Inbox message"
icon={ <Gridicon icon="customize" /> }
>
This card has some content This card has some content
</ActivityCard> </ActivityCard>
); );

7
plugins/woocommerce-admin/client/header/activity-panel/panels/reviews.js
View File

@ -6,7 +6,8 @@ import classnames from 'classnames';
import { Component, Fragment } from '@wordpress/element'; import { Component, Fragment } from '@wordpress/element';
import { withSelect } from '@wordpress/data'; import { withSelect } from '@wordpress/data';
import { Button } from '@wordpress/components'; 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 interpolateComponents from 'interpolate-components';
import { get, isNull } from 'lodash'; import { get, isNull } from 'lodash';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
@ -86,7 +87,7 @@ class ReviewsPanel extends Component {
<ReviewRating review={ review } /> <ReviewRating review={ review } />
{ review.verified && ( { review.verified && (
<span className="woocommerce-review-activity-card__verified"> <span className="woocommerce-review-activity-card__verified">
<Gridicon icon="checkmark" size={ 18 } /> <CheckmarkIcon size={ 18 } />
{ __( 'Verified customer', 'woocommerce-admin' ) } { __( 'Verified customer', 'woocommerce-admin' ) }
</span> </span>
) } ) }
@ -234,7 +235,7 @@ class ReviewsPanel extends Component {
<ActivityCard <ActivityCard
className="woocommerce-empty-activity-card" className="woocommerce-empty-activity-card"
title={ title } title={ title }
icon={ <Gridicon icon="time" size={ 48 } /> } icon={ <TimeIcon size={ 48 } /> }
actions={ actions={
<Button <Button
href={ buttonUrl } href={ buttonUrl }

4
plugins/woocommerce-admin/client/header/activity-panel/panels/stock/index.js
View File

@ -6,7 +6,7 @@ import { Component, Fragment } from '@wordpress/element';
import { compose } from '@wordpress/compose'; import { compose } from '@wordpress/compose';
import { withSelect } from '@wordpress/data'; import { withSelect } from '@wordpress/data';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import Gridicon from 'gridicons'; import CheckmarkIcon from 'gridicons/dist/checkmark';
import { EmptyContent, Section } from '@woocommerce/components'; import { EmptyContent, Section } from '@woocommerce/components';
import { QUERY_DEFAULTS, ITEMS_STORE_NAME } from '@woocommerce/data'; import { QUERY_DEFAULTS, ITEMS_STORE_NAME } from '@woocommerce/data';
@ -26,7 +26,7 @@ class StockPanel extends Component {
'Your stock is in good shape.', 'Your stock is in good shape.',
'woocommerce-admin' 'woocommerce-admin'
) } ) }
icon={ <Gridicon icon="checkmark" size={ 48 } /> } icon={ <CheckmarkIcon size={ 48 } /> }
> >
{ __( { __(
'You currently have no products running low on stock.', 'You currently have no products running low on stock.',

4
plugins/woocommerce-admin/client/marketing/overview/welcome-card/index.js
View File

@ -3,7 +3,7 @@
*/ */
import { __ } from '@wordpress/i18n'; import { __ } from '@wordpress/i18n';
import { Button, Card, CardBody } from '@wordpress/components'; import { Button, Card, CardBody } from '@wordpress/components';
import Gridicon from 'gridicons'; import CrossIcon from 'gridicons/dist/cross';
import { compose } from '@wordpress/compose'; import { compose } from '@wordpress/compose';
import { withDispatch, withSelect } from '@wordpress/data'; import { withDispatch, withSelect } from '@wordpress/data';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
@ -36,7 +36,7 @@ const WelcomeCard = ( { isHidden, updateOptions } ) => {
onClick={ hide } onClick={ hide }
className="woocommerce-marketing-overview-welcome-card__hide-button" className="woocommerce-marketing-overview-welcome-card__hide-button"
> >
<Gridicon icon="cross" /> <CrossIcon />
</Button> </Button>
<img src={ WelcomeImage } alt="" /> <img src={ WelcomeImage } alt="" />
<h3> <h3>

5
plugins/woocommerce-admin/client/profile-wizard/steps/theme/index.js
View File

@ -6,7 +6,7 @@ import apiFetch from '@wordpress/api-fetch';
import { Component, Fragment } from '@wordpress/element'; import { Component, Fragment } from '@wordpress/element';
import { compose } from '@wordpress/compose'; import { compose } from '@wordpress/compose';
import { decodeEntities } from '@wordpress/html-entities'; import { decodeEntities } from '@wordpress/html-entities';
import Gridicon from 'gridicons'; import InfoIcon from 'gridicons/dist/info';
import { import {
Button, Button,
TabPanel, TabPanel,
@ -211,8 +211,7 @@ class Theme extends Component {
) } ) }
> >
<span> <span>
<Gridicon <InfoIcon
icon="info"
role="img" role="img"
aria-hidden="true" aria-hidden="true"
focusable="false" focusable="false"

4
plugins/woocommerce-admin/client/profile-wizard/steps/theme/uploader.js
View File

@ -11,7 +11,7 @@ import {
DropZone, DropZone,
FormFileUpload, FormFileUpload,
} from '@wordpress/components'; } from '@wordpress/components';
import Gridicon from 'gridicons'; import CloudUploadIcon from 'gridicons/dist/cloud-upload';
import { noop } from 'lodash'; import { noop } from 'lodash';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { withDispatch } from '@wordpress/data'; import { withDispatch } from '@wordpress/data';
@ -77,7 +77,7 @@ class ThemeUploader extends Component {
accept=".zip" accept=".zip"
onChange={ this.handleFilesUpload } onChange={ this.handleFilesUpload }
> >
<Gridicon icon="cloud-upload" /> <CloudUploadIcon />
<H className="woocommerce-theme-uploader__title"> <H className="woocommerce-theme-uploader__title">
{ __( { __(
'Upload a theme', 'Upload a theme',

4
plugins/woocommerce-admin/packages/components/src/advanced-filters/index.js
View File

@ -6,7 +6,7 @@ import { Component, createRef } from '@wordpress/element';
import { SelectControl, Button, Dropdown } from '@wordpress/components'; import { SelectControl, Button, Dropdown } from '@wordpress/components';
import { partial, difference, isEqual } from 'lodash'; import { partial, difference, isEqual } from 'lodash';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import Gridicon from 'gridicons'; import AddOutlineIcon from 'gridicons/dist/add-outline';
import interpolateComponents from 'interpolate-components'; import interpolateComponents from 'interpolate-components';
import { import {
@ -307,7 +307,7 @@ class AdvancedFilters extends Component {
onClick={ onToggle } onClick={ onToggle }
aria-expanded={ isOpen } aria-expanded={ isOpen }
> >
<Gridicon icon="add-outline" /> <AddOutlineIcon />
{ __( { __(
'Add a Filter', 'Add a Filter',
'woocommerce-admin' 'woocommerce-admin'

4
plugins/woocommerce-admin/packages/components/src/advanced-filters/item.js
View File

@ -2,7 +2,7 @@
* External dependencies * External dependencies
*/ */
import { Button } from '@wordpress/components'; import { Button } from '@wordpress/components';
import Gridicon from 'gridicons'; import CrossSmallIcon from 'gridicons/dist/cross-small';
import classnames from 'classnames'; import classnames from 'classnames';
/** /**
@ -74,7 +74,7 @@ const AdvancedFilterItem = ( props ) => {
label={ labels.remove } label={ labels.remove }
onClick={ removeFilter } onClick={ removeFilter }
> >
<Gridicon icon="cross-small" /> <CrossSmallIcon />
</Button> </Button>
</li> </li>
); );

7
plugins/woocommerce-admin/packages/components/src/chart/index.js
View File

@ -6,7 +6,8 @@ import classNames from 'classnames';
import { Component, createRef, Fragment } from '@wordpress/element'; import { Component, createRef, Fragment } from '@wordpress/element';
import { formatDefaultLocale as d3FormatDefaultLocale } from 'd3-format'; import { formatDefaultLocale as d3FormatDefaultLocale } from 'd3-format';
import { isEqual, partial, without } from 'lodash'; 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 { Button, NavigableMenu, SelectControl } from '@wordpress/components';
import { interpolateViridis as d3InterpolateViridis } from 'd3-scale-chromatic'; import { interpolateViridis as d3InterpolateViridis } from 'd3-scale-chromatic';
import memoize from 'memoize-one'; import memoize from 'memoize-one';
@ -392,7 +393,7 @@ class Chart extends Component {
'line' 'line'
) } ) }
> >
<Gridicon icon="line-graph" /> <LineGraphIcon />
</Button> </Button>
<Button <Button
className={ classNames( className={ classNames(
@ -411,7 +412,7 @@ class Chart extends Component {
'bar' 'bar'
) } ) }
> >
<Gridicon icon="stats-alt" /> <StatsAltIcon />
</Button> </Button>
</NavigableMenu> </NavigableMenu>
</div> </div>

10
plugins/woocommerce-admin/packages/components/src/rating/index.js
View File

@ -4,7 +4,7 @@
import { __, sprintf } from '@wordpress/i18n'; import { __, sprintf } from '@wordpress/i18n';
import classnames from 'classnames'; import classnames from 'classnames';
import { Component } from '@wordpress/element'; import { Component } from '@wordpress/element';
import Gridicon from 'gridicons'; import StarIcon from 'gridicons/dist/star';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
/** /**
@ -22,13 +22,7 @@ class Rating extends Component {
const stars = []; const stars = [];
for ( let i = 0; i < totalStars; i++ ) { for ( let i = 0; i < totalStars; i++ ) {
stars.push( stars.push( <StarIcon key={ 'star-' + i } style={ starStyles } /> );
<Gridicon
key={ 'star-' + i }
icon="star"
style={ starStyles }
/>
);
} }
return stars; return stars;
} }

5
plugins/woocommerce-admin/packages/components/src/search-list-control/index.js
View File

@ -12,7 +12,7 @@ import {
import { Component, Fragment } from '@wordpress/element'; import { Component, Fragment } from '@wordpress/element';
import { compose, withInstanceId, withState } from '@wordpress/compose'; import { compose, withInstanceId, withState } from '@wordpress/compose';
import { escapeRegExp, findIndex } from 'lodash'; import { escapeRegExp, findIndex } from 'lodash';
import Gridicon from 'gridicons'; import NoticeOutlineIcon from 'gridicons/dist/notice-outline';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
/** /**
@ -158,8 +158,7 @@ export class SearchListControl extends Component {
return ( return (
<div className="woocommerce-search-list__list is-not-found"> <div className="woocommerce-search-list__list is-not-found">
<span className="woocommerce-search-list__not-found-icon"> <span className="woocommerce-search-list__not-found-icon">
<Gridicon <NoticeOutlineIcon
icon="notice-outline"
role="img" role="img"
aria-hidden="true" aria-hidden="true"
focusable="false" focusable="false"

5
plugins/woocommerce-admin/packages/components/src/summary/number.js
View File

@ -8,7 +8,7 @@ import {
} from '@wordpress/components'; } from '@wordpress/components';
import { sprintf, __ } from '@wordpress/i18n'; import { sprintf, __ } from '@wordpress/i18n';
import classnames from 'classnames'; import classnames from 'classnames';
import Gridicon from 'gridicons'; import ChevronDownIcon from 'gridicons/dist/chevron-down';
import { isNil, noop } from 'lodash'; import { isNil, noop } from 'lodash';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
/** /**
@ -140,9 +140,8 @@ const SummaryNumber = ( {
</Tooltip> </Tooltip>
</div> </div>
{ onToggle ? ( { onToggle ? (
<Gridicon <ChevronDownIcon
className="woocommerce-summary__toggle" className="woocommerce-summary__toggle"
icon="chevron-down"
size={ 24 } size={ 24 }
/> />
) : null } ) : null }