Включить @fortawesome/fontawesome в проект angular-cli

Question

Я пытаюсь включить шрифт awesome 5 в мой проект angular-cli (1.6.0) под управлением Angular >5.0.0.

Я использовал (как описано):

yarn config set @fortawesome:registry https://npm.fontawesome.com/xxxxx-xxxx-xxx-xxx-xxxxxxx
yarn add @fortawesome/fontawesome
yarn add @fortawesome/fontawesome-pro-light

Он получает пакеты успешно. Теперь я хочу включить пакет в мой angular-cli. В моем app.component.ts Я пытался сделать (как описано по адресу: https://www.npmjs.com/package/@fortawesome/fontawesome):

import  fontawesome  from '@fortawesome/fontawesome'
import { faUser } from '@fortawesome/fontawesome-pro-light'

Но машинопись бросает и ошибку:

ERROR in src/app/app.component.ts(2,9): error TS1192: Module '"xxx/node_modules/@fortawesome/fontawesome/index"' has no default export.

С Font Awesome 4 я просто включил файл.css в массив "styles". Но Font Awesome 5 не имеет файла CSS, который имеет все CSS. Это просто набор файлов.js.

Как правильно включить Font Awesome 5 в мой проект Angular CLI? (Я хочу иметь возможность использовать, например, <i class="fal fal-user"></i> в моей разметке)

Answer 1

В Font Awesome 5 вы можете использовать иконки на основе шрифта, как в FA4, или вы можете использовать новые иконки на основе SVG. Я все еще изучаю настройку SVG с помощью angular-cli, но для шрифтов вы можете:

Добавьте FontAwesome к вашему.angular-cli.json:

Включите стили FA как CSS или SCSS:

  "styles": [
    "styles.scss"
    "../node_modules/@fortawesome/fontawesome-free-webfonts/css/fontawesome.css",
    "../node_modules/@fortawesome/fontawesome-free-webfonts/css/fa-solid.css",
    "../node_modules/@fortawesome/fontawesome-free-webfonts/css/fa-regular.css",
    "../node_modules/@fortawesome/fontawesome-free-webfonts/css/fa-brands.css",
  ],

или добавьте FontAwesome к вашим стилям напрямую:

Включите стили в styles.css или styles.scss:

$fa-font-path: "../node_modules/@fortawesome/fontawesome-free-webfonts/webfonts";
@import "../node_modules/@fortawesome/fontawesome-free-webfonts/scss/fontawesome.scss";
@import "../node_modules/@fortawesome/fontawesome-free-webfonts/scss/fa-solid.scss";

или добавьте FontAwesome как CSS к вашим стилям напрямую:

@import "../node_modules/@fortawesome/fontawesome-free-webfonts/css/fontawesome.css";
@import "../node_modules/@fortawesome/fontawesome-free-webfonts/css/fa-solid.css";

Если вам не нужно изменять / улучшать FA SCSS, то, вероятно, проще всего использовать первый метод. Это просто становится частью вашей конфигурации.

Что касается SVG

Я подозреваю, что для этого необходимо включить файлы javascript FA, но я еще не углубился в это. После этого это, вероятно, очень похоже на вышесказанное.

---

SVG Redux

(отредактировано, чтобы добавить больше деталей о SVG)

Это намного проще, чем я ожидал. Если у вас установлены правильные модули:

... вы можете просто добавить два необходимых скрипта в ваш.angular-cli.json. Вам нужен базовый замечательный скрипт, а затем тот пакет, который вам нужен (или все три):

  "scripts": [
    "../node_modules/@fortawesome/fontawesome/index.js",
    "../node_modules/@fortawesome/fontawesome-free-solid/index.js"
  ],

Эти сценарии найдут ваши обычные классы FA и заменят элементы полными SVG-версиями значков FA.