Не самый простой способ, но подходит для тех, кто хочет добавить SVG иконку именно в массив в плагин по аналогии с существующими иконками.
Подходит для однотонных простых иконок, например FontAwesome.
Для этого в плагине предусмотрен фильтр, с его помощью можно добавить новую или изменить существующую иконку.
Установите и активируйте плагин ProFunctions. В него мы будем добавлять код для добавления иконок.
Пример кода, с одной добавленной иконкой:
/**
* Добавить иконку в WPRemark
*/
add_filter( 'wpremark_icons', function( $icons ) {
$icons['my_icon'] = [
'width' => '448',
'height' => '512',
'path' => 'M439.39...64z',
'keywords' => [ 'my', 'icon', 'моя иконка' ],
];
return $icons;
} );Это фильтр, который получает массив $icons, в этот массив мы добавляем новый элемент с ключем my_bootstrap_bell. Это тоже массив с несколькими параметрами:
width — ширина viewBox
height — высота viewBox
path — координаты самой иконки
keywords — ключевые слова для поиска (не обязательно)
Пример пустого массива для добавления своей иконки:
$icons['my_icon'] = [
'width' => '',
'height' => '',
'path' => '',
'keywords' => [ '' ],
];Шаг 1.
Скачайте любую иконку, которую собираетесь добавить в массив и откройте ее в любом текстовом редакторе. Вы увидите примерно следующее:
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="ambulance" class="svg-inline--fa fa-ambulance fa-w-20" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path fill="currentColor" d="M624 352h-16V243....9V256z"></path></svg>Здесь нас интересуют 2 вещи: viewBox="0 0 640 512" и <path ... d="...">.
Шаг 2.
Открываем в редакторе файл profunctions.php и добавляем код:
/**
* Добавить иконку в WPRemark
*/
add_filter( 'wpremark_icons', function( $icons ) {
$icons['my_icon'] = [
'width' => '',
'height' => '',
'path' => '',
'keywords' => [ '' ],
];
return $icons;
} );Шаг 3.
Переносим данные из иконки в массив.
Первым делом мы меняем название my_icon на что-то свое. Обязательно оставьте в начале my_ или любой другой префикс, чтобы не конфликтовать с уже существующими иконками. Мы меняем на my_ambulance.
Из кода иконки viewBox="0 0 640 512" мы берем ширину и высоту. Третье и четвертое значение — это ширина width и высота height соответственно. Это не итоговая ширина и высота иконки, это размеры области иконки к которым привязаны координаты ниже. Просто переносим как есть.
Из кода иконки <path ... d="..."> мы берем все, что находится в атрибуте d=” … “. Все что внутри кавычек мы переносим в path.
keywords заполняем по желанию, это ключевые слова, по которым можно найти иконку.
В итоге.
Мы получаем примерно следующий код:
/**
* Добавить иконку в WPRemark
*/
add_filter( 'wpremark_icons', function( $icons ) {
$icons['my_ambulance'] = [
'width' => '640',
'height' => '512',
'path' => 'M624 352h-16V243....9V256z',
'keywords' => [ 'ambulance', 'medicine', 'скорая помощь', 'медицина' ],
];
return $icons;
} );После этого иконка появляется в конце списка иконок и может использоваться как обычная иконка в плагине.