Ошибка импорта при использовании response-icons

Question

Я попытался установить значки реакции, в моем приложении я выполнил команду npm:

sudo npm install react-icons --save

Я не получил никаких ошибок, кроме некоторых необязательных зависимостей, которые были пропущены

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 
(node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for 
fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: 
{"os":"linux","arch":"x64"})

Всякий раз, когда я пытаюсь импортировать некоторые значки, я получаю сообщение об ошибке

./src/components/SkiDaysCount.js
Module not found: Can't resolve 'react-icons/lib/md' in ' 
'/home/kristoffer/ReactApps/navbar/src/components'

вот мой импорт:

import {Terrain} from 'react-icons/lib/md'
import {SnowFlake} from 'react-icons/lib/ti'
import {Calender} from 'react-icons/lib/fa'

Почему я получаю эту ошибку?

РЕДАКТИРОВАТЬ:

я также попытался использовать старый синтаксис для импорта, с той же проблемой, как таковой:

import Calender from 'react-icons/lib/fa/calender'

Answer 1

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

Значки также имеют имя библиотеки значков в качестве префикса для экспорта.

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

Answer 2

После просмотра каталогов значков реакции-icons/[fa,ti,md] и поиска в файле index.dt.ts новых названий значков, я пришел к вашему ответу.

import { MdTerrain } from "react-icons/md";
import { TiWeatherSnow } from "react-icons/ti";
import { FaCalendarAlt } from "react-icons/fa";

Чтобы использовать значки в вашем компоненте, используйте теги:

<FaCalendarAlt />
<TiWeatherSnow />
<MdTerrain />

Для объяснения смотрите Миграция от версии 2-> 3 на странице значка реакции. https://www.npmjs.com/package/react-icons

Answer 3

Не все fa иконки бесплатные. Я получал эту ошибку, когда пытался импортировать оплаченную иконку карандаша, как показано ниже.

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

Если вы видите здесь все значки fa, вы можете увидеть, что pencil нужна профессиональная лицензия.

Поскольку у меня не было профессиональной лицензии, я получал ошибку. Но мы всегда можем использовать бесплатные версии карандаша, и нам просто нужно импортировать их, как показано ниже.

import { FaPencilAlt } from 'react-icons/fa'
<button><FaPencilAlt /></button>

Вы также должны проверить реализацию вашей версии отсюда.

Answer 4

Если вы установили 3.0-версию ответных значков, попробуйте:

Для карандаша (Правка):

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

Для мусорного ведра (Удалить):

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

Answer 5

Возможно , вам нужно обновить пакет "react-icons". команда: npm update response-icons

Answer 6

import {FaHiking, FaRightAlign,...} from 'react-icons/fa'

из библиотеки значков реакции v3 '/libname' является обязательным.

libname как 'fa'-> fontawesome, 'fi'-> фериконы. для получения дополнительной информации посетите

https://react-icons.netlify.com/

Answer 7

импортировать { FaCalendar } из 'react-icons/fa';

импортировать { MdTerrain } из " react-icons/md ";

Answer 8

Это также может быть вызвано опечаткой. сказать

import {Haiking) from 'react-icons/fa'

вместо того

import {Hiking) from 'react-icons/fa'

Answer 9

возможно, вы находитесь в режиме пряжи и вам нужно использовать yarn add вместо того npm install установить пакет.

Answer 10

В конце концов, мое было таким простым решением. Все, что мне было нужно, это полное имя импорта значка, даже если только один значок всегда помещал фигурный {}, и это было исправлено! Сколько раз я удаляю модули узлов, устанавливаю @latest, а затем понимаю, что это кудряшки! :-)

      import {GoMail} from "react-icons/go";