Шрифт Awesome 6 (бета-версия) и динамическое имя значка в следующем JS

#next.js #font-awesome

Вопрос:

Я разрабатываю веб-сайт с помощью Next JS. Я впервые использую этот язык, и мне еще многому предстоит научиться.

Теперь у меня есть профессиональная подписка на Font Awesome, и я хочу использовать их компонент непосредственно в своем проекте, как описано в их руководствах.

https://fontawesome.com/v6.0/docs/web/use-with/react/

https://fontawesome.com/v6.0/docs/web/use-with/react/add-icons

В принципе, просто используйте такой компонент, как этот:

 <FontAwesomeIcon icon={brands("google")} />

Это работает.

Проблема, которую я не могу решить, заключается в том, как динамически установить значение «google» в ранее инициализированной переменной. Мне это нужно, потому что эти значения динамически поступают из базы данных.

Если я попытаюсь:

 var example = "google";
<FontAwesomeIcon icon={brands(example)} />

Затем я получаю эту ошибку: «При ссылках на значки поддерживаются только строковые литералы (вместо этого используйте строку здесь)».

У кого — нибудь есть какие-нибудь идеи?

Ответ №1:

Способ импорта значков использует макрос babel. Это означает, что указанный значок должен быть известен во время сборки. Это просто не сработает, потому что Babel не может понять, какой значок следует импортировать, это можно сделать только во время выполнения. Вот почему он сообщает вам, что поддерживаются только строковые литералы.

Поэтому вам нужно использовать второй метод, описанный в документах. У вас должно быть какое-то сопоставление между значком и значением из БД, а затем возьмите соответствующий значок. Что-то вроде этого:

 // not sure about exact import
import { faGoogle } from '@fortawesome/free-brand-svg-icons';

// you'd put all valid values that can come from the backend here
const myIcons = {
  google: faGoogle
}

// ...

const example = 'google';
<FontAwesomeIcon icon={myIcons[example]} />

Другой вариант-использовать library.add , объясненный здесь, а затем сделать то же самое, что и выше, но вместо импортированного значка используйте строку, например google: 'fa-brands fa-google' (опять же, не уверен в точном значении здесь).

Ответ №2:

Сработает ли следующее?

 var example = ['fab', 'google'];

<FontAwesomeIcon icon={example} />

P.S. Рекомендуется использовать let const ключевые слова или с ES6.