SVG Icon block

arrow-left.js

import { SVG, Path } from '@wordpress/components';

const arrowLeft = (
	<SVG fill="none" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
		<Path
			d="m1.333 14.389 9.466-9.466c.872-.872 2.326-.872 3.198 0s.872 2.326 0 3.198l-5.589 5.621h20.677c1.26 0 2.262 1.002 2.262 2.261s-1.002 2.262-2.262 2.262h-20.677l5.589 5.589c.872.872.872 2.326 0 3.198-.452.452-1.034.678-1.615.678s-1.163-.226-1.615-.678l-9.434-9.434c-.42-.42-.678-1.002-.678-1.615s.226-1.195.678-1.615z"
			fill="currentColor"
		/>
	</SVG>
);
export default arrowLeft;

block.json

{
    "apiVersion": 2,
    "name": "acmecorp/svg-icon-block",
    "title": "SVG Icon block",
    "category": "acmecorp",
    "icon": "format-status",
    "description": "SVG icon block",
    "supports": {
        "color": {
            "gradients": false,
            "background": false,
            "text": true
        }
    },
    "textdomain": "acmecorp",
    "editorScript": "acmecorp-svg-icon-block-editor-script",
    "style": "acmecorp-svg-icon-block-style",
    "attributes" : {
        "width": {
            "type": "number",
            "default": "24"
        },
        "selectedIcon": {
            "type": "string",
            "source": "html",
            "selector": "svg"
        }
    }
}

edit.js

/**
 * External dependencies
 */
import classnames from 'classnames';

/**
 * WordPress dependencies
 */
import { useRef } from '@wordpress/element';
import {
	InspectorControls,
	useBlockProps,
} from '@wordpress/block-editor';
import { RangeControl } from '@wordpress/components';
import { __ } from '@wordpress/i18n';

/* Internal dependencies */
import * as IconList from '../../components/icons';

const Edit = ( props ) => {
	const {
		attributes,
		setAttributes,
	} = props;

	const {
		selectedIcon,
		width,
	} = attributes;

	const ref = useRef();
	const blockProps = useBlockProps( { ref } );

	const SelectableIconList = () => {
		const iconArray = Object.entries( IconList );

		return (
			<ul>
				{	iconArray.map( ( element, i ) => {
					return (
						<li
							key={ i }
						>
							<button
								key={ i }
								onClick={ () => setAttributes( { 'selectedIcon' : element[ 1 ], 'selectedIconName' : element[ 0 ] } ) }
							>	<span className={ element[ 0 ] }>{ element[ 1 ] }</span>
							</button>
						</li>
					);
				} ) }
			</ul>
		);
	};

	return (
		<>
			<InspectorControls>
				<div id="svg-icon-block-controls">
					<fieldset>
						<legend className="svg-icon-blocks-base-control">
							{ __( 'Icons' ) }
						</legend>
						<SelectableIconList />
					</fieldset>
					<fieldset>
						<legend className="svg-icon-blocks-base-control">
							{ __( 'Icon Size' ) }
						</legend>

						<RangeControl
							value={ width }
							onChange={ ( newIconSize ) => setAttributes( { width : newIconSize } ) }
							min={ 14 }
							max={ 100 }
						/>

					</fieldset>
				</div>
			</InspectorControls>

			{ selectedIcon !== '' &&
				<div
					{ ...blockProps }
					className={ classnames( blockProps.className ) }
				>
					<div
						className={ classnames(
							'wp-block-acmecorp-svg',
						) }
						style={ {
							width : `${ attributes.width }px`, // stylelint-disable-line
						} }
					>
						{ attributes.selectedIcon }
					</div>
				</div>
			}
		</>
	);
};
export default Edit;

index.js

export { default as ArrowLeftIcon } from './library/arrow-left';
export { default as ArrowRightIcon } from './library/arrow-right';
export { default as CheckmarkIcon } from './library/checkmark';
export { default as ChevronDownIcon } from './library/chevron-down';
export { default as ChevronLeftIcon } from './library/chevron-left';
export { default as ChevronRightIcon } from './library/chevron-right';
export { default as ChevronUpIcon } from './library/chevron-up';
export { default as CloseIcon } from './library/close';
export { default as LanguageIcon } from './library/language';
export { default as PlayIcon } from './library/play';
export { default as QuoteIcon } from './library/quote';
export { default as SearchIcon } from './library/search';
export { default as SocialFacebookIcon } from './library/social-facebook';
export { default as SocialLinkedinIcon } from './library/social-linkedin';
export { default as SocialTwitterIcon } from './library/social-twitter';

save.js

/**
 * External dependencies
 */
import classnames from 'classnames';

/**
 * WordPress dependencies
 */
import {
	useBlockProps,
} from '@wordpress/block-editor';

const Save = ( props ) => {
	const { attributes } = props;
	const blockProps = useBlockProps.save();

	return (
		<div
			{ ...blockProps }
			className={ classnames( blockProps.className ) }
		>
			<div
				className={ classnames(
					'wp-block-acmecorp-svg',
				) }
				style={ {
					width : `${ attributes.width }px`, // stylelint-disable-line
				} }
			>
				{ attributes.selectedIcon }
			</div>
		</div>
	);
};

export default Save;