Готовая продукция NextJS React с потрясающими значками
Как мне уменьшить размер пакетов? Мы добавили fortawesome/fontawesome, но используются только некоторые значки, около 20. Правда ли, что в пакете содержатся все значки из наборов значков Fontawesome?
Частичное содержимое package.json:
"@fortawesome/fontawesome-svg-core": "6.5.1",
"@fortawesome/free-solid-svg-icons": "6.5.1",
"@fortawesome/react-fontawesome": "0.2.0",
Я вижу в выводе всякий раз, когда создаю проект:
[BABEL] Note: The code generator has deoptimised the styling of node_modules\@fortawesome\free-solid-svg-icons\index.mjs as it exceeds the max of 500KB.
[BABEL] Note: The code generator has deoptimised the styling of node_modules\lodash\lodash.js as it exceeds the max of 500KB.
[BABEL] Note: The code generator has deoptimised the styling of node_modules\@fortawesome\free-solid-svg-icons\index.mjs as it exceeds the max of 500KB.
[BABEL] Note: The code generator has deoptimised the styling of node_modules\lodash\lodash.js as it exceeds the max of 500KB.
Могу ли я что-нибудь сделать, чтобы уменьшить размер?
Ответы 1
Да, вы можете уменьшить размер пакета, импортируя только те значки, которые вам нужны, вместо того, чтобы импортировать весь пакет @fortawesome/free-solid-svg-icons:
// icons.js
import { library } from '@fortawesome/fontawesome-svg-core';
// import only icons you need
import { faCoffee, faCheckCircle, faTimesCircle } from '@fortawesome/free-solid-svg-icons';
// Add icons to the library
library.add(faCoffee, faCheckCircle, faTimesCircle);
Затем вы можете использовать импортированные значки следующим образом:
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
const Component = () => (
<div>
<FontAwesomeIcon icon = "fa-coffee" />
<FontAwesomeIcon icon = "fa-check-circle" />
<FontAwesomeIcon icon = "fa-times-circle" />
</div>
);
Это потому, что 2-го числа вы используете "check-circle" вместо faCheckCircle?
@ZoltanHernyak корреляция между двумя фрагментами кода заключается в том, что в первом фрагменте вы импортируете только нужные вам значки, а во втором вы используете его, не импортируя значки напрямую, а просто ссылаясь на имя значка. Вот объяснение из документации — docs.fontawesome.com/web/use-with/react/add-icons
@ZoltanHernyak Я только что обновил ответ, добавил к значкам префиксы «fa-».
Кажется очень интересным, но какова связь между этими двумя кодами? В настоящее время я использую второй, но не вижу использования
library, определенного в первом.