Font Awesome Webpack Импорт без рендеринга иконок - PullRequest
Новая
       20

Font Awesome Webpack Импорт без рендеринга иконок

0 голосов
/ 06 ноября 2018

Я пытался следовать документации по Font Awesome. У меня есть профессиональная версия и я настроил для нее NPM. Я использую веб-пакет для компиляции, но у меня возникают проблемы с его рендерингом. Что я делаю не так?

Вот мой app.js 

import { library } from '@fortawesome/fontawesome-svg-core'
import { fas } from '@fortawesome/pro-solid-svg-icons'
import { far } from '@fortawesome/pro-regular-svg-icons'
import { fal } from '@fortawesome/pro-light-svg-icons'
import { fab } from '@fortawesome/free-brands-svg-icons'

library.add(fas, far, fal, fab);

Я только что добавил следующие значки FA в мой индексный файл 

<i class="fas fa-question-circle"></i> <!-- solid style of the question circle icon -->
<i class="far fa-question-circle"></i> <!-- regular style of the question circle icon -->
<i class="fal fa-question-circle"></i> <!-- light style of the question circle icon -->

<i class="fab fa-facebook"></i>        <!-- facebook brand icon-->
<i class="fab fa-facebook-f"></i>      <!-- facebook "f" brand icon-->

Кажется, что ничего не работает с иконками, и у меня нет ошибок компиляции. Что я делаю не так?

Ответы [ 2 ]

0 голосов
/ 07 ноября 2018

Я понял, что проблема в загрузке svg-core. Ожидаемое поведение было для тегов, которые будут автоматически заменены. Поскольку я загружал svg-core, autoReplaceSvg был отключен.

  • Использование пакета @ fortawesome / fontawesome-svg-core по умолчанию отключает autoReplaceSvg и наблюдаем мутации.

Font Awesome API -> Конфигурация

0 голосов
/ 06 ноября 2018

Я ни в коем случае не эксперт Webpack, но есть немного больше настроек, чем просто импорт, чтобы заставить работать Font Awesome.

Теперь это может измениться с FA 5, но я надеюсь, что этот метод все еще действителен.

В этом посте она довольно хорошо подытоживает и в значительной степени идентична моей текущей конфигурации:

Импорт Webpack 2 и Font-Awesome Icon *

В статье есть следующее (если ссылка не работает):

Вам понадобятся несколько обязательных предметов: 

npm install webpack file-loader css-loader sass-loader node-sass

- копи-DEV

И FA, который у вас, вероятно, уже есть: 

npm install font-awesome --save

** Примечание: ваш путь может отличаться от моего **

В моих правилах модуля Webpack я настраиваю удаление ресурсов FA в каталог шрифтов: 

module: {
    rules: [{
            test: /\.(eot|ttf|otf)(\?.*)?$/,
            loader: 'file-loader',
            options: {
                limit: 10000,
                name: '[name].[ext]',
                outputPath: '/fonts/',    // where the fonts will go
                publicPath: '/assets'       // override the default path
            }
        }]

После того, как вы настроили все конфигурации, вам нужно импортировать FA в основную таблицу стилей: 

$fa-font-path: "~font-awesome/fonts";
@import '~font-awesome/scss/font-awesome.scss';

После этого вы должны увидеть ресурсы, загружаемые при запуске сборки Webpack.

...