Использование значков материалов Google в приложении preact/ реакции

Question

Я создаю приложение preact. Где я использую материал-компоненты-сеть. Если я сделаю значок, как это

<i class="material-icons" aria-hidden="true">home</i>

Он отлично работает и отображает домашний значок.

Но есть какая-то причина, которую я хочу поставить home как переменная, что-то вроде этого:

let homeIcon = 'home';
<i class="material-icons" aria-hidden="true">{homeIcon}</i>

Есть ли способ сделать это?

Спасибо,

Answer 1

Вы можете использовать иконки материалов, используя любой из этих вариантов:<i class="material-icons">face</i>а также<i class="material-icons">&#xE87C;</i>

Я думаю, что ваша переменная не переносится в лигатуры, показывая home как есть. Попробуйте сделать что-то вроде const iconHome = <i class="material-icons" aria-hidden="true">home</i>; или используйте числовую ссылку на символ.

В этом примере используется типографская функция, называемая лигатурой, которая позволяет визуализировать глиф значка, просто используя его текстовое имя. Замена выполняется автоматически веб-браузером и предоставляет более читаемый код, чем эквивалентная цифровая ссылка на символ. Кроме того, вы хотите проверить специальную тонкую обертку поверх компонентов материала для preact: preact-material

Для справки: значки материалов

Answer 2

Вы также можете попробовать использовать шаблонный литерал

<i class="material-icons" aria-hidden="true">{`${homeIcon}`}</i>