FontAwesome SCSS Tree-Shaking

используя метод, описанный на странице https://fontawesome.com/how-to-use/on-the-web/using-with/sass Думаю, в итоге я соберу почти 2,8 МБ веб-шрифтов в папке src моего проекта React. Мне нужно использовать CSS для добавления значков в стиль календаря, но не повлияет ли это на встряхивание дерева? Другими словами, не будет ли у меня огромный размер пакета только для использования одного значка?


reactjs sass font-awesome font-awesome-5 tree-shaking
person Sammy    schedule 01.10.2019    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Представленный @Mike Poole метод является наиболее правильным для встряхивания деревьев. Если вы используете метод веб-шрифта, у вас нет другого выбора, кроме как загрузить весь набор. Но если вам нужно использовать всего несколько значков и по какой-то причине вы не можете загрузить их через js, вы можете просто получить нужные вам файлы svg и добавить их напрямую в виде тегов <img> или фоновых изображений.

person Henrique Erzinger    schedule 03.10.2019

arrow_upward
0
arrow_downward

Встряхивание дерева с помощью FontAwesome — это просто. Если вы используете только один значок, вам нужно только импортировать этот значок (и, конечно, не нужно использовать для этого SASS).

Вот пример, который FontAwesome использует, если вы хотите использовать только сплошную иконку fa-coffee:

import { faCoffee } from '@fortawesome/free-solid-svg-icons'
person Mike Poole    schedule 02.10.2019
comment
Спасибо. Но в моем случае мне нужно использовать CSS, поэтому я не могу использовать этот метод. - person Sammy; 03.10.2019