Reaction-Fontawesome импортирует все иконки - PullRequest
Новая
       12

Reaction-Fontawesome импортирует все иконки

0 голосов
/ 03 октября 2018

Я пытаюсь импортировать только те замечательные иконки, которые мне нужны, поскольку полная библиотека составляет 3 МБ.Я переключился на компонент fontawesome-react, чтобы включить это, но мне не очень повезло.

Вот мой тестовый пример:

Пакет включает в себя: 

"@fortawesome/fontawesome-svg-core": "^1.2.4",
"@fortawesome/pro-regular-svg-icons": "^5.3.1",
"@fortawesome/react-fontawesome": "^0.1.3",

Компонент: 

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faThumbsUp } from '@fortawesome/pro-regular-svg-icons';

// In Render:
<FontAwesomeIcon
    icon={ faThumbsUp }
/>

В результате включается размер 1 МБ. Это ожидаемое поведение?

Кажется, что оно следует явной методологии импорта - https://github.com/FortAwesome/react-fontawesome#user-content-explicit-import

Visualizer Result

Ответы [ 3 ]

0 голосов
/ 05 октября 2018

Обсудили это с командой реаги-фа, и они посоветовали импортировать значки в явном виде с полными путями: 

import { faThumbsUp } from '@fortawesome/pro-regular-svg-icons/faThumbsUp';

Это означает, что оставшиеся элементы будут удалены во время «встряхивания дерева»процесс по Webpack.Там нет упоминания об этом, поэтому я высказал предположение, что это должно быть упомянуто в явном разделе импорта документов.

Anyhoo - теперь все работает, так что спасибо этим ребятам из FA.

0 голосов
/ 22 мая 2019

Если вы хотите использовать любой значок с самой простой настройкой через новую библиотеку Fontawesome React, вот как вы можете это сделать: 

import { library } from '@fortawesome/fontawesome-svg-core';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import * as Icons from '@fortawesome/free-solid-svg-icons';

const iconList = Object
  .keys(Icons)
  .filter(key => key !== "fas" && key !== "prefix" )
  .map(icon => Icons[icon])

library.add(...iconList)

(Советы: (...iconList) - этоиспользуется здесь для добавления каждого объекта, который у нас есть, в виде массива в качестве параметров функции)

Затем добавьте в свой код, где хотите 

<FontAwesomeIcon icon="check" />

Теперь вы можете использовать все значки без необходимостиимпортировать их все 101

0 голосов
/ 03 октября 2018

В нашем проекте мы используем эту технику scss (font-awesome@4.7.0): 

@import '~font-awesome/scss/font-awesome';

@mixin fa-icon($type) {
  @extend .fa;
  @extend .fa-#{$type};
}

i {
  @include fa-icon('star');
  margin-right: 0.2rem;
}

В результате у нас есть только нужные нам иконки в наших пакетах CSS.

ОБНОВЛЕНИЕ : Используя компоненты реагирования с babel-plugin-Reaction-css-modules , мы можем повторно использовать и применять любые стили значков из font-awesome lib непосредственно к нашим собственным классам: 

.button {
  i {
    @include fa-icon('star');
  }
}
...