Как добавить свою иконку

Не самый простой способ, но подходит для тех, кто хочет добавить SVG иконку именно в массив в плагин по аналогии с существующими иконками.

YouTube

Подходит для однотонных простых иконок, например 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;
} );

После этого иконка появляется в конце списка иконок и может использоваться как обычная иконка в плагине.