Все получилось, спасибо)
Если кто-то тоже в поисках как это сделать, вот небольшая инструкция:
Создаем в папке плагина папку "formwidgets" и наполняем ее как на скриншоте:
в главном классе плагина Plugin.php регистрируем виджет, добавляем:
public function registerFormWidgets()
{
return [
'\{Имя автора}\{Имя плагина}\FormWidgets\Icon' => 'volos_icons',
];
}
Код в Icon.php:
<?php namespace Volos\Main\FormWidgets;
use Backend\Classes\FormWidgetBase;
/**
* Icon Form Widget
*/
class Icon extends FormWidgetBase
{
public function render()
{
$this->vars['id'] = $this->getId();
$this->vars['name'] = $this->getFieldName();
$this->vars['placeholder'] = $this->placeholder;
$this->vars['value'] = $this->getLoadValue();
$this->vars['icons'] = $this->getIcons();
return $this->makePartial('icon');
}
private function getIcons()
{
$icon_array = [];
$dir = getcwd().'/themes/volos/assets/svg/icons/';
$files_end = '.svg';
$files = scandir($dir);
foreach($files as $file) {
if(strpos($file, $files_end)){
$icon_array[str_replace($files_end, '', $file)] = $file;
}
}
return $icon_array;
}
public function loadAssets()
{
$this->addJs('js/main.js');
}
}
Тут я сделал топорно, чтобы выводились все svg файлы из папки /themes/volos/assets/svg/icons/
код _icon.htm:
<select
<?php if($this->previewMode) echo "readonly"; ?>
class = "form-control custom-select volos-icons"
id="<?= $id; ?>"
name="<?= $name; ?>"
>
<?php if($placeholder): ?>
<option value=""><?= e(trans($placeholder)) ?></option>
<?php endif ?>
<?php foreach ($icons as $k => $icon): ?>
<option data-icon="<?php echo $icon ?>" <? if($value == $icon) echo "selected" ?> value="<?php echo $icon ?>">
<?php echo $k ?>
</option>
<?php endforeach; ?>
</select>
код main.js:
$(document).on('render', function() {
function volosFormat(state) {
return '<img class="flag" style="margin-right:5px" src="/themes/volos/assets/svg/icons/' + $(state.element).data('icon') + '" width="20"/> ' + state.text ;
}
$(".volos-icons").select2({
templateResult: volosFormat,
templateSelection: volosFormat,
escapeMarkup: function(m) { return m; }
});
});
Теперь можно использовать свой виджет где угодно =)
icon:
label: Выберите иконку
type: volos_icons
placeholder: '-- Please Select --'
