add toggle control for inline

src/index.js

@@ -3,9 +3,15 @@ import './editor.scss';
 
 import { registerBlockType } from '@wordpress/blocks';
 
-import { Fragment } from '@wordpress/element';
+import { RawHTML, Fragment } from '@wordpress/element';
 import { InspectorControls } from '@wordpress/editor';
-import { TextControl, Panel, PanelRow } from '@wordpress/components';
+import {
+	Button,
+	TextControl,
+	ToggleControl,
+	Panel,
+	PanelRow,
+} from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
 registerBlockType('room-vw/iconify', {
@@ -21,15 +27,25 @@ registerBlockType('room-vw/iconify', {
 	attributes: {
 		prefix: {
 			type: 'string',
+			source: 'attribute',
+			selector: 'data-prefix',
 			default: 'noto-v1',
 		},
 		name: {
 			type: 'string',
+			source: 'attribute',
+			selector: 'data-name',
 			default: 'unicorn',
 		},
 		inline: {
 			type: 'boolean',
-			default: true,
+			default: false,
+		},
+		svg: {
+			type: 'string',
+			source: 'html',
+			selector: '.icon',
+			default: '<span>Select an icon</span>',
 		},
 	},
 
@@ -54,27 +70,53 @@ registerBlockType('room-vw/iconify', {
 								}}
 							/>
 						</PanelRow>
+						<PanelRow>
+							<ToggleControl
+								label="Is inline"
+								checked={attributes.inline}
+								onChange={(state) => {
+									setAttributes({ inline: state });
+								}}
+							/>
+							<Button
+								isBusy={false}
+								disabled={false}
+								isSecondary
+								onClick={() => {
+									setAttributes({
+										svg: Iconify.getSVG(
+											`${attributes.prefix}:${attributes.name}`
+										),
+									});
+								}}
+							>
+								Get Icon
+							</Button>
+						</PanelRow>
 					</Panel>
 				</InspectorControls>
-				<div>
-					<span
-						className={className + ' iconify icon'}
-						data-icon={attributes.prefix + ':' + attributes.name}
-						data-inline={attributes.inline}
-					></span>
-					<span>{attributes.prefix + ':' + attributes.name}</span>
-				</div>
+				<RawHTML
+					className={
+						className +
+						(attributes.inline ? ' is-inline icon' : ' icon')
+					}
+				>
+					{attributes.svg}
+				</RawHTML>
 			</Fragment>
 		);
 	},
 
-	save({ className, attributes }) {
+	save({ attributes }) {
 		return (
-			<span
-				className={className + ' iconify icon'}
-				data-icon={attributes.prefix + ':' + attributes.name}
-				data-inline={attributes.inline}
-			></span>
+			<RawHTML
+				className={attributes.inline ? ' is-inline icon' : ' icon'}
+				dataPrefix={attributes.prefix}
+				dataName={attributes.name}
+				dataInline={attributes.inline}
+			>
+				{attributes.svg}
+			</RawHTML>
 		);
 	},
 });