How to stack, layer, mask icons?

[scottsawyer]

I can't figure out how to make stacks, layers, and masks. In the block editor, I see:

<!-- wp:font-awesome/icon {"iconLayers":[{"iconDefinition":{"iconName":"book","prefix":"fas","icon":[448,512,null,null,"M96 0C43 0 0 43 0 96L0 416c0 53 43 96 96 96l288 0 32 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l0-64c17.7 0 32-14.3 32-32l0-320c0-17.7-14.3-32-32-32L384 0 96 0zm0 384l256 0 0 64L96 448c-17.7 0-32-14.3-32-32s14.3-32 32-32zm32-240c0-8.8 7.2-16 16-16l192 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-192 0c-8.8 0-16-7.2-16-16zm16 48l192 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-192 0c-8.8 0-16-7.2-16-16s7.2-16 16-16z"]},"spin":false,"transform":null}]} -->
<div class="wp-block-font-awesome-icon wp-font-awesome-icon"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="book" class="svg-inline--fa fa-book " role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M96 0C43 0 0 43 0 96L0 416c0 53 43 96 96 96l288 0 32 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l0-64c17.7 0 32-14.3 32-32l0-320c0-17.7-14.3-32-32-32L384 0 96 0zm0 384l256 0 0 64L96 448c-17.7 0-32-14.3-32-32s14.3-32 32-32zm32-240c0-8.8 7.2-16 16-16l192 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-192 0c-8.8 0-16-7.2-16-16zm16 48l192 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-192 0c-8.8 0-16-7.2-16-16s7.2-16 16-16z"></path></svg></div>
<!-- /wp:font-awesome/icon -->

The top level in the JSON is "iconLayers", which is an array. I actually tried hard coding a second icon, which sort of works, but it is not something an editor would be able to do.

Are these features that aren't implemented?

[mlwilkerson]

@scottsawyer Indeed, those are features that are not yet implemented. They were implemented in a prototype, but we backed off because it was a lot to add all at once.

Knowing that you're looking for this feature helps to bump up it's priority, so thanks for the feedback!

In the meantime, you can still use all of those features using <i> or <span> tags directly with the SVG/JS tech. That means, you'd have to add raw HTML, and you'd have to be loading an SVG/JS kit. So you wouldn't get the WYSIWYG block editor experience (until we get that part implemented). You can see more about that in our usage docs, such as here.