Редактор блоков WordPress. 4 часть - несколько способов добавить свою SVG иконку
Во 2-й части я пообещал рассказать - как можно добавить свою иконку в разрабатываемый блок. В этом руководстве я покажу ещё 2 способа как это можно сделать.
Во 2-й части был назван самый простой, но самый ограниченный способ по добавлению иконки.
icon: 'universal-access-alt' - из вордпресс набора dashicons. Иконок и вправду там очень мало и они уже "приелись".
Там вы просто указываете имя иконки:
dashicons-welcome-learn-more без приставки dashicons-
Описание свойства вы найдёте в справочнике Gutenberg.
Итак - первый способ вставить иконку с dashicons мы рассмотрели.
Далее мы будем работать с svg. Скачиваем нужную нам иконку формата svg и открываем её в текстовом редакторе. Нам потребуется её содержимое.
1 способ: Добавим svg как HTML
Можно использовать компонент:
wp.element.RawHTMLон позволяет передать строку в виде html:
const ico = wp.element.RawHTML( {
children: '<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0V0z" /><path d="M19 13H5v-2h14v2z" /></svg>'
} );
//
wp.blocks.registerBlockType( 'otfm-html/block-hr', {
icon: ico, // svg
// и далее всё остальное- на второй строке в компонент передаём svg "как есть". И указываем её в нужном месте функции как иконку (6-я строка)
Это наиболее простой метод указать svg-иконку.
2 способ: Создадим svg-элемент
Этот способ несколько сложней, на как по мне - не содержит мусора обязательных атрибутов svg. Их Gutenberg создает самостоятельно.
Рассмотрим нашу svg-иконку:
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0V0z" /><path d="M19 13H5v-2h14v2z" /></svg>Для наглядности - рассмотрим её в виде вложенной структуры:
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path fill="none" d="M0 0h24v24H0V0z" />
<path d="M19 13H5v-2h14v2z" />
</svg>В теге svg у нас размеры блока viewBox="0 0 24 24" - ширина и высота в 24 пикселя - стандарт иконки при регистрации WordPress блока.
Далее у нас идут 2 тега "пути" path и они содержат атрибуты: fill и d - координаты описывающие кривые.
По ним мы и создадим элемент.
Вот как это выглядит:
const iconLine = wp.element.createElement('svg', {
width: 24,
height: 24
},
wp.element.createElement('path', {
fill: "none",
d: "M0 0h24v24H0V0z"
}),
wp.element.createElement('path', {
d: "M19 13H5v-2h14v2z"
})
);
wp.blocks.registerBlockType('otfm-html/block-hr', {
icon: iconLine, // svg
// остальное- на 1-й строке мы создаём svg-элемент и вложенностью создаем еще 2 path (5, 9 - строки) тега. Внутри svg задаем атрибуты ширины и высоты иконки, а внутри path указываем fill и d атрибуты.
Мы дальше можем передать нашу переменную в функцию (15 строка)
Отличия 1-го способа с svg и второго
Первый способ передает html как есть. т.е. что пришло - то и будет на выходе. В руководстве на это обращают внимание - неэкранированный html. На простых данных думаю проблем не будет.
А вот второй способ предпочтительней - дело в том что ядро блоков WordPress, svg дополняет элементами доступности: добавляет атрибуты aria-hidden, role, и focusable. т.е. делает всё по стандартам.
Выделение цветом иконок
Вы можете передать бекграунд или цвет для иконки:
icon: {
// добавление бекграунка
background: '#7e70af',
// добавление цвета иконки
foreground: '#fff',
// dashicon иконка
src: 'book-alt',
} ,Вот такие способы добавления иконок к вашим блокам вам доступны. Надеюсь данный материал был вам полезен.
Если знаете ещё варианты - поделитесь в комментариях.
