Удобная возможность выбора значка из большого набора значков

Question

У меня есть веб-приложение, в котором пользователь может добавить новую категорию. Категория будет добавлена ​​в базу данных с помощью формы.

В этой категории должен быть значок (значки начальной загрузки https://icons.getbootstrap.com/), который Пользователь должен иметь возможность выбрать.

Я использую для разработки фреймворк 5.1.3 начальной загрузки.

Я не могу найти удобную для пользователя возможность выбрать товар из 1500.

Я проверил, используя элемент выбора с параметрами в форме. Проблема здесь в том, что пользователь сможет видеть только имя значка, но не изображение значка. Bootstrap не поддерживает добавление изображения к параметрам.

Кто-нибудь знает, как реализовать удобную для пользователя возможность выбора значка из большого набора значков, где пользователь может видеть значок перед его выбором?

Он должен иметь возможность сохранить имя выбранного значка в базе данных.

Было бы неплохо, если бы мне кто-нибудь помог :).

Всем огромное спасибо :)

Answer 1

Я полагаю, вы могли бы показать модальное окно со значками, отображаемыми с их именами, и добавить свойство onClick, чтобы получить значок, выбранный пользователем. Вы также можете добавить окно поиска вверху, чтобы фильтровать значки по тексту. Типа этого: https://react-icons.github.io/react-icons/icons?name=bs