Add custom block icon

Author: petitphp

package-lock.json

@@ -37,7 +37,7 @@
     "@wordpress/env": "^5.2.0",
     "@wordpress/hooks": "^3.15.0",
     "@wordpress/i18n": "^4.15.0",
-    "@wordpress/icons": "^9.6.0",
+    "@wordpress/primitives": "^3.16.0",
     "@wordpress/scripts": "^23.7.2",
     "@wordpress/wordcount": "^3.15.0",
     "lodash": "^4.17.21"

package.json

@@ -14,13 +14,13 @@ import {
 	PanelBody,
 	Placeholder,
 } from '@wordpress/components';
-import { share } from '@wordpress/icons';
 import { __, sprintf } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import SharedBlocksSelector from './sharedBlocksSelector';
+import { default as BlockIcon } from './icon';
 
 import './editor.scss';
 
@@ -140,7 +140,7 @@ export default function Edit( { attributes, setAttributes } ) {
 				</div>
 			) : (
 				<Placeholder
-					icon={ share }
+					icon={ BlockIcon }
 					label="Bloc partagé"
 					instructions={ getPlaceholderLabel( display ) }
 					className={ 'shared-block-placeholder' }

src/blocks/shared-block/edit.js

@@ -0,0 +1,23 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const MultisiteSharedBlockIcon = (
+	<SVG
+		xmlns="http://www.w3.org/2000/svg"
+		width="24"
+		height="24"
+		fill="none"
+		viewBox="0 0 24 24"
+	>
+		<Path
+			fill="#000"
+			fill-rule="evenodd"
+			d="M14.247 0H9.753c-.715 0-1.327.647-1.327 1.402V4.8c0 .755.612 1.402 1.327 1.402h1.736v2.034c-1.599.242-2.857 1.601-3.04 3.306h-1.3v-1.295c0-.755-.613-1.402-1.328-1.402H1.328C.613 8.845 0 9.492 0 10.247v3.398c0 .755.613 1.402 1.328 1.402H5.82c.715 0 1.328-.647 1.328-1.402V12.62h1.329c.262 1.602 1.48 2.859 3.011 3.09v2.088H9.753c-.715 0-1.327.647-1.327 1.402v3.398c0 .755.612 1.402 1.327 1.402h4.494c.715 0 1.328-.647 1.328-1.402V19.2c0-.809-.613-1.402-1.328-1.402H12.51V15.71c1.53-.231 2.75-1.488 3.011-3.09h1.329v1.025c0 .755.613 1.402 1.328 1.402h4.493c.715 0 1.328-.647 1.328-1.402v-3.398c0-.755-.613-1.402-1.328-1.402H18.18c-.715 0-1.328.647-1.328 1.402v1.295h-1.3c-.183-1.705-1.441-3.064-3.04-3.306V6.202h1.736c.715 0 1.328-.647 1.328-1.402V1.402C15.575.593 14.962 0 14.247 0Zm.306 4.746c0 .162-.153.324-.306.324H9.753c-.153 0-.306-.162-.306-.324V1.402c0-.162.153-.323.306-.323h4.494c.153 0 .306.108.306.323v3.344ZM12 9.276c-1.41 0-2.553 1.208-2.553 2.697 0 1.49 1.143 2.697 2.553 2.697s2.553-1.208 2.553-2.697c0-1.49-1.143-2.697-2.553-2.697Zm10.979 4.369c0 .162-.153.324-.307.324H18.18c-.153 0-.307-.162-.307-.324v-3.398c0-.162.154-.323.307-.323h4.493c.154 0 .307.161.307.323v3.398Zm-17.158.324c.153 0 .307-.162.307-.324v-3.398c0-.162-.154-.323-.307-.323H1.328c-.154 0-.307.161-.307.323v3.398c0 .162.153.324.307.324H5.82Zm8.426 8.898c.153 0 .306-.161.306-.323v-3.398c0-.162-.153-.323-.306-.323H9.753c-.153 0-.306.161-.306.323v3.398c0 .162.153.323.306.323h4.494Z"
+			clip-rule="evenodd"
+		/>
+	</SVG>
+);
+
+export default MultisiteSharedBlockIcon;

src/blocks/shared-block/icon.js

@@ -3,10 +3,9 @@ import { registerBlockType } from '@wordpress/blocks';
 import './style.scss';
 
 import Edit from './edit';
+import { default as BlockIcon } from './icon';
 
 registerBlockType( 'multisite-shared-blocks/shared-block', {
-	/**
-	 * @see ./edit.js
-	 */
+	icon: BlockIcon,
 	edit: Edit,
 } );

src/blocks/shared-block/index.js

@@ -9,7 +9,6 @@ import { isEmpty } from 'lodash';
 import { createHigherOrderComponent } from '@wordpress/compose';
 import { InspectorControls } from '@wordpress/block-editor';
 import { PanelBody, TextControl, ToggleControl } from '@wordpress/components';
-import { share } from '@wordpress/icons';
 import { count } from '@wordpress/wordcount';
 import { __, sprintf } from '@wordpress/i18n';
 import { createInterpolateElement } from '@wordpress/element';
@@ -18,6 +17,7 @@ import { createInterpolateElement } from '@wordpress/element';
  * Internal dependencies
  */
 import { blockSupportSharing } from './helper';
+import { default as BlockIcon } from '../blocks/shared-block/icon';
 
 /**
  * Custom wrapper component use to render the UI for sharing a block.
@@ -69,7 +69,7 @@ const sharedBlockIdControls = createHigherOrderComponent( ( BlockEdit ) => {
 							'Multisite sharing options',
 							'multisite-shared-blocks'
 						) }
-						icon={ share }
+						icon={ BlockIcon }
 					>
 						<ToggleControl
 							label={ __(