Skip to content
This repository has been archived by the owner on Feb 23, 2024. It is now read-only.

Commit

Permalink
Add new icon for mini cart block (#6784)
Browse files Browse the repository at this point in the history
* Add new icon for mini cart block (inserter).

See #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.
  • Loading branch information
danielwrobert authored Jul 29, 2022
1 parent 4eed41d commit e075767
Show file tree
Hide file tree
Showing 3 changed files with 42 additions and 2 deletions.
4 changes: 2 additions & 2 deletions assets/js/blocks/mini-cart/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -19,7 +19,7 @@ const settings: BlockConfiguration = {
icon: {
src: (
<Icon
icon={ cart }
icon={ miniCartAlt }
className="wc-block-editor-components-block-icon"
/>
),
Expand Down
1 change: 1 addition & 0 deletions assets/js/icons/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';
39 changes: 39 additions & 0 deletions assets/js/icons/library/mini-cart-alt.tsx
Original file line number Diff line number Diff line change
@@ -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;

0 comments on commit e075767

Please sign in to comment.