FontIcon Extension

Thanks to the FontIcon extension, you can place an icon from the FontAwesome resources. After clicking on the icon, a modal window will appear with the possibility of selecting and searching for the icon of interest. As a result, the class name of the given icon from FontAwesome will be stored.

Example of use

Editor.vue

<template>
    <FontIcon v-model="block.data.icon"></FontIcon>
</template>

<script setup>
    const { defineProps, inject } = require('vue');
    const props = defineProps(['block']);
    const block = inject('structure').block(props.block);
    const extensions = inject('extensions.registry');

    const FontIcon = extensions.editor('FontIcon');
</script>

Render.vue

<template>
    <span :class="block.data.icon"></span>
</template>

It is enough to display the value from the block property in the class attribute of the element that is to have the icon.