* Add new icon for mini cart block (inserter).

See https://github.com/woocommerce/woocommerce-blocks/issues/6617.

* Adjust size of SVG

The new SVG was rendering a little bit smaller than the original icon.
Potentially because of the mask and the artboard size.

This commit adjusts the size to render at the same size as the original
version of the icon in the inserter.
This commit is contained in:
Daniel W. Robert 2022-07-29 15:40:03 -04:00 committed by GitHub
parent 008c63b0dc
commit 056e6946e8
3 changed files with 42 additions and 2 deletions

View File

@ -2,7 +2,7 @@
* External dependencies
*/
import { __ } from '@wordpress/i18n';
import { cart } from '@woocommerce/icons';
import { miniCartAlt } from '@woocommerce/icons';
import { Icon } from '@wordpress/icons';
import { registerBlockType } from '@wordpress/blocks';
import type { BlockConfiguration } from '@wordpress/blocks';
@ -19,7 +19,7 @@ const settings: BlockConfiguration = {
icon: {
src: (
<Icon
icon={ cart }
icon={ miniCartAlt }
className="wc-block-editor-components-block-icon"
/>
),

View File

@ -11,3 +11,4 @@ export { default as toggle } from './library/toggle';
export { default as totals } from './library/totals';
export { default as woo } from './library/woo';
export { default as miniCart } from './library/mini-cart';
export { default as miniCartAlt } from './library/mini-cart-alt';

View File

@ -0,0 +1,39 @@
/**
* External dependencies
*/
import { SVG } from '@wordpress/primitives';
const miniCartAlt = (
<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
<defs>
<mask
id="mask"
x="0"
y="0"
width="24.01"
height="24"
maskUnits="userSpaceOnUse"
>
<g
id="path-1-inside-1_928_1005"
data-name="path-1-inside-1 928 1005"
>
<path
d="M2,2V4H4l3.6,7.6L6.3,14A2,2,0,0,0,8,17H20V15H8l1.1-2h7.5a1.9,1.9,0,0,0,1.7-1l3.6-6.5A1,1,0,0,0,21,4H6.2L5.3,2ZM8,18a2,2,0,1,0,2,2A2,2,0,0,0,8,18Zm8,2a2,2,0,1,1,2,2A2,2,0,0,1,16,20Z"
fill="#fff"
fillRule="evenodd"
/>
</g>
</mask>
</defs>
<g mask="url(#mask)">
<path
d="M2,4H0V6H2ZM2,2V0H0V2ZM4,4l1.8-.9L5.3,2H4Zm3.6,7.6,1.7,1,.5-.9-.4-1ZM6.3,14l-1.8-.9h0ZM20,17v2h2V17Zm0-2h2V13H20ZM8,15,6.2,14,4.6,17H8Zm1.1-2V11H7.9l-.6,1Zm9.2-1-1.8-1h0Zm3.6-6.5-1.8-1h0ZM6.2,4l-1.8.9L4.9,6H6.2ZM5.3,2l1.8-.9L6.5,0H5.3ZM4,4V2H0V4ZM4,2H2V6H4Zm5.4,8.7L5.8,3.1,2.2,4.9l3.6,7.5ZM8,15l1.3-2.4-3.5-2L4.5,13.1Zm0,0H8L4.5,13.1A4,4,0,0,0,8,19Zm12,0H8v4H20Zm-2,0v2h4V15ZM8,17H20V13H8Zm-.7-5L6.2,14l3.6,2,1.1-2Zm9.3-1H9.1v4h7.5Zm-.1,0h.1v4a4,4,0,0,0,3.5-2.1Zm3.6-6.5L16.5,11l3.6,1.9,3.5-6.5ZM21,6a1,1,0,0,1-.9-1.5l3.5,2A3,3,0,0,0,21,2ZM6.2,6H21V2H6.2ZM3.5,2.9l.9,2L8,3.1l-.9-2ZM2,4H5.3V0H2ZM8,20H8V16a4,4,0,0,0-4,4Zm0,0H4a4,4,0,0,0,4,4Zm0,0v4a4,4,0,0,0,4-4Zm0,0h4a4,4,0,0,0-4-4Zm10-4a4,4,0,0,0-4,4h4Zm4,4a4,4,0,0,0-4-4v4Zm-4,4a4,4,0,0,0,4-4H18Zm-4-4a4,4,0,0,0,4,4V20H14Z"
fill="#7f54b3"
/>
</g>
<circle cx="20.2" cy="4.7" r="3.8" fill="#7f54b3" />
</SVG>
);
export default miniCartAlt;