use div for block type icons and span for inline format SVGs

block-editor/src/index.css

@@ -52,7 +52,7 @@ button:disabled .fa-icon-modifier-control {
   height: 200px;
 }
 
-.fa-icon-modifier-preview span {
+.fa-icon-modifier-preview div {
   display: flex;
   margin: auto;
   transform: scale(10);
@@ -81,3 +81,7 @@ button:disabled .fa-icon-modifier-control {
   stroke-width: 5px;
   stroke-dasharray: 5, 5;
 }
+
+.wp-block-font-awesome-icon {
+  display: inline-block;
+}

block-editor/src/inlineSvgFormatType.js

@@ -18,6 +18,9 @@ import { faBrandIcon } from './icons';
 import { GLOBAL_KEY } from "../../admin/src/constants";
 import { normalizeIconDefinition } from './iconDefinitions'
 import createCustomEvent from './createCustomEvent'
+
+export const INLINE_SVG_FORMAT_WRAPPER_TAG_NAME = 'span'
+
 const { IconChooserModal } = get(window, [
   GLOBAL_KEY,
   "iconChooser",
@@ -178,7 +181,7 @@ const mainSettings = {
   name,
   title,
   keywords: [__("icon"), __("awesome")],
-  tagName: "span",
+  tagName: INLINE_SVG_FORMAT_WRAPPER_TAG_NAME,
   className: "fa-icon-format",
   edit: Edit,
 };

block-editor/src/rendering.js

@@ -21,7 +21,7 @@ export function renderIcon(attributes, extraProps = {}) {
   const {wrapperProps, classNamesByLayer} = extraProps
 
   return (
-    <span {...(wrapperProps || {})}>
+    <div {...(wrapperProps || {})}>
       {attributes.iconLayers.map((layer, index) => {
         const { iconDefinition, rotation: initialRotation, ...rest } = layer;
         let className = (classNamesByLayer || [])[index]
@@ -46,6 +46,6 @@ export function renderIcon(attributes, extraProps = {}) {
           />
         );
       })}
-    </span>
+    </div>
   );
 }

static/svgMutationObserver.js

@@ -1,5 +1,6 @@
 const REBUILD_SVG_VISITED_ATTR = "data-repaint-visited";
 const ICON_FORMAT_CLASS = 'fa-icon-format';
+const INLINE_SVG_FORMAT_WRAPPER_TAG_NAME = 'SPAN'
 
 function maybeRebuildElement(el) {
   if (!el.getAttribute(REBUILD_SVG_VISITED_ATTR)) {
@@ -21,8 +22,11 @@ function setupObserver() {
       for (const child of mutation.addedNodes) {
         if (
           child.tagName &&
-          ("SVG" == child.tagName.toUpperCase() &&
-            child.parentElement.classList.contains(ICON_FORMAT_CLASS))
+          (
+            (INLINE_SVG_FORMAT_WRAPPER_TAG_NAME.toUpperCase() === child.tagName.toUpperCase() && child.classList.contains(ICON_FORMAT_CLASS))
+            ||
+            ("SVG" == child.tagName.toUpperCase() && child.parentElement.classList.contains(ICON_FORMAT_CLASS))
+          )
         ) {
           maybeRebuildElement(child);
         }