Этап
Готова
Тип
Задача
Приоритет
Обычный
Трудоемкость
Обычная
Создана
Дата создания
2 года назад
Назначена
Обновлена
2 года назад

Сейчас мы продолжаем использовать font-awesome, и кое где потихоньку вводим новые SVG-спрайты Tabler icons, в будущем мы наверняка еще и нарисуем свои. Проблема в том, что мы не очень понимаем как их подключать.

  • <img src={{ icon(spriteName.svg) }}> - включая как фал картинки как делаем сейчас, но этот способ не позволяет их стилизовать. например перекрасить для темного фона
  • <svg ...><path ...<M0> ... </svg> - напрямую включая на страницу. Так делает Tabler везде в документации
  • <svg width="24" height="24"><use xlink:href="path/to/tabler-sprite.svg#tabler-activity" /></svg> - еще один способ из документации, еще не пробовали

При продумывании способа надо учесть, как их сохранять в project.icon, как передавать в ViewModel, например MenuItem.icon

Соответственно этому надо переделать ImageExtension->icon()

Панель управления

Комментарии могут оставлять только авторизованные пользователи
 demius 2 года назад

Да вроде бы все ок. Работает как часы.

 demius 2 года назад

Ну, что, метода сработала. Я даже почти нарисовал свою первую svg-иконку

 demius 2 года назад

Кстати, если открыть и изучить имеющий файл tabler-sprite.svg то в отличие от шрифтов, есть неиллюзорный шанс сделать такой же из собственных кастомных иконок

 demius 2 года назад

Вариант 3 работает хорошо, думаю можно убирать отдельные икноки

 demius 2 года назад

Не думаю, что мы целиком уйдем от font-awesome, все же есть там, что, чего нет в tabler. пусть оно пока параллельно работает

 demius 2 года назад

В итоге пока делали иконки для flashmessages попробовали третий путь и он сработал. Переделали на него остальные tabler-иконки и пока все хорошо, они и стиллизуются и хранятся в одном месте, а не копируются по шаблонам. Так что если не напоремся на какие-то проблемы, эта задача выглядит решенной.

 demius 2 года назад

Кстати, если мы выберем вариант 2, и будем рисовать иконки по месту, мы потеряем возможность ими централизовано управлять. Например нарисуй мы иконку добавления задачи, нам придется везде её заменять.

 demius 2 года назад

Как вариант второго способа иметь собственный map - имя иконки, - её код, на беке работать с именем, а twig-функция будет трансформировать её в <svg>. Но так мы должны следить за соответствияем этой карты с пакетов TablerIcons, который будет пополняться.

 demius 2 года назад

Интересно, что новый способ подключения font-awesome с помощью js превращает классы fa fa-iconName в как раз таки встроенный svg (правда у меня почему-то это приводит к ошибкам), так что может и нам стоит рассматривать именно второй способ.

 demius 2 года назад

Сейчас у project.icon varchar(100), второй способ скорее всего будет в него не влезать.

 demius 2 года назад

Какой бы способ не был выбран, надо чтобы в настройках проекта было удобно найти и выбрать иконку. (а может загрузить или нарисовать свою)