Ошибка «Не удалось декодировать шрифт из ...» при использовании response-web-vector-icons в Gatsby

Question

Попытка использовать библиотеку реагировать-веб-вектор-иконки на сайте Гэтсби. Я следовал всем документам, чтобы правильно устанавливать, импортировать и запрашивать их во всех нужных местах, но у меня все еще есть окно, чтобы показать, где должен быть значок.

В моем файле index.js: require('react-web-vector-icons/fonts');

В моем файле index.html внутри тега head: <style> @font-face{font-family:MaterialCommunityIcons;font-style:normal;font-weight:400;src:url(fonts/MaterialCommunityIcons.ttf) format('truetype')}</style>

В моем компоненте, который используетicon:

import Icon, { MaterialCommunityIcons } from "react-web-vector-icons";

...

<MaterialCommunityIcons
    name='cart-outline'
    color='black'
    size={60}
/>

<Icon
    name='cart-outline'
    font='MaterialCommunityIcons'
    color='black'
    size={30}
/>

Я даже пытался использовать плагин реагирующий шлем, думая, что проблема заключалась в том, что тег стиля удалялся из файла html при каждой сборке. Для этой части я установил плагин и добавил следующее в мои файлы:

В моем index.js:

import { Helmet } from "react-helmet";

...

//created a class component to render the helmet...

render() {
    return(
        <div className="application">
            <Helmet>
                <style> @font-face{font-family:MaterialCommunityIcons;font-style:normal;font-weight:400;src:url(fonts/MaterialCommunityIcons.ttf) format('truetype')}</style>
            </Helmet>

...

И добавил плагин в файл gatsby-config.js:plugins: [`gatsby-plugin-react-helmet`]

Я попытался добавить плагин к объекту module.exports в этом файле и пробовал его снаружи. Ничего не работает

Answer 1

Нашел обходной путь ... Я использовал

npm install react-icons

, затем в компоненте я хотел использовать значок I

import { IconName } from 'react-icons/fa'

тогда, когда я хотел использовать значок, я просто назвал его напрямую

<IconName />

, и это сработало: -)