Updated icon SVG location inside of registerBlockType.

[lewisself64]

Updated icon SVG location inside of registerBlockType to updated location.

Why?

Current documentation is out of date and not working when adding custom SVG via instructions.

How?

Updated code inside of documentation to allow custom icon for gutenberg block.

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: lewisself64 <selfdesigns@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[github-actions]

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @lewisself64! In case you missed it, we'd love to have you join us in our Slack community.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

[Mamaduka]

Thanks for contributing, @lewisself64!

Can you share an example of your icon or how to reproduce this problem you're describing?

The documentation isn't outdated. The icon property supports both string and object values. The current example is just a shorthand. See API documentation - https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/#icon-optional.

[lewisself64]

Thanks for this. When following the tutorial I used the following snippet similar to the one shown on the documentation.

/**
 * Registers a new block provided a unique name and an object defining its behavior.
 *
 * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/
 */
import { registerBlockType } from '@wordpress/blocks';

/**
 * Internal dependencies
 */
import Edit from './edit';
import metadata from './block.json';

const calendarIcon = (
	<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"	aria-hidden="true" focusable="false">
		<path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm.5 16c0 .3-.2.5-.5.5H5c-.3 0-.5-.2-.5-.5V7h15v12zM9 10H7v2h2v-2zm0 4H7v2h2v-2zm4-4h-2v2h2v-2zm4 0h-2v2h2v-2zm-4 4h-2v2h2v-2zm4 0h-2v2h2v-2z"></path>
	</svg>
);

/**
 * Every block starts by registering a new block type definition.
 *
 * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/
 */
registerBlockType( metadata.name, {
	icon: calendarIcon,
	edit: Edit,
} );

With the code above I was not getting the desired output and it was showing the block default icon for me. However, I have finished the tutorial and changing the code back seems to work fine now. It's possible I was not compiling or something which would make sense why it's working now but wasn't before. So you can disregard this! Apologies.

[Mamaduka]

Thanks for the update, @lewisself64!