Это история любви между FontAwesome’s Pro icon pack (v5) и проектом Ionic (v4) с использованием Angular (v7).
Во-первых, немного предыстории.
Работая в консалтинговой компании по разработке программного обеспечения, создающей продукты для других людей, выбрать технический стек сложнее, чем просто то, что мы хотим использовать. Существует множество факторов, влияющих на выбор технологий в проектах.
Рассмотрение: Клиент
Во-первых, есть несколько общих вопросов о существующих технологиях, которые клиент использует внутри компании:
- Что, если вообще что, использует их команда в настоящее время?
- Что они хотят использовать?
- Какие у них есть возможности для обучения или найма, если мы выберем технологию, незнакомую их нынешней команде?
Рассмотрение: Пейзаж
В случае, если у команды клиента нет отдела разработки или это новый проект, и мы можем выбрать стек, который будем использовать, мы задаем разные вопросы:
- Каков текущий ландшафт доступных технологий? (Какие есть возможности, доступные функции, интеграции и т. д.)
- Насколько стабильна технология, которая бросается в глаза? (Как давно она отсутствует, сколько PR и проблем было сообщено и т. д.)
- Как выглядит сообщество для конкретного инструмента / фреймворка / библиотеки? (Насколько активно сообщество работает над ним, использует его, обсуждает и т. д.)
- Как выглядит документация? (Насколько она читабельна, удобна для навигации, исчерпывающая и т. д.)
- Какие компании поддерживают этот инструмент / фреймворк / библиотеку? (Это говорит о долговечности и инвестициях в достижение долгосрочного успеха)
Рассмотрение: команда разработчиков
Затем, как команда, ответственная за создание продукта, мы должны задать себе несколько важных вопросов:
- В каких технологиях мы сильны и работаем наиболее эффективно?
- Над чем мы хотим работать?
Иногда, в конце концов, выбор сводится к работе с технологиями, с которыми мы не так хорошо знакомы, но это лучший выбор для клиента и его команды. Так было в недавнем проекте, который я начал, и вот что я узнал для одной небольшой функции.
Требования к проекту
- Ионный 4
- Угловой 7
- FontAwesome Pro
После того, как я запустил проект с помощью Ionic's CLI, моей первой легкой победой с точки зрения пользовательского интерфейса было построение нескольких маршрутов и получение хороших ох и ахх от FontAwesome. красивые иконки * pro в проект.
Я не нашел быстрого и простого пошагового руководства со всем, что мне было нужно, поэтому я сделал это так.
Звучит довольно просто, правда? Возможно, вы думаете просто выполнить быстрый поиск в Интернете и найти десяток различных способов сделать это. Здорово! Я не нашел быстрого и простого пошагового руководства со всем, что мне было нужно, поэтому я сделал это так.
Получить FontAwesome Pro
Для использования FontAwesome Pro вам понадобится лицензия. Если он у вас есть, отлично, продолжайте! Если нет, сделайте домашнее задание и посмотрите, подходит ли это вам, вашему клиенту или вашей компании.
Войдите в свою учетную запись FontAwesome и перейдите на страницу Настройка диспетчера пакетов.
Суть, которую вы там поймете, такова:
- Создайте файл .npmrc в корне вашего проекта.
- Включите в этот файл фрагмент кода, который предоставляет вам FontAwesome (который для удобства включает ваш токен Pro).
3. Установите последнюю версию FontAwesome Pro (npm или yarn).
4. Выберите и установите пакеты значков, которые вам нужны.
Добавьте FontAwesome в свой проект
Я нашел эту ссылку на Github, которая проведет вас через несколько простых шагов, чтобы добавить FontAwesome в ваш проект Angular.
Однако мы не просто использовали Angular, мы использовали Ionic с Angular. Итак, вместо шагов, которые они выделяют, вот модификации, которые я использовал:
Откройте модуль вашего приложения:
app.module.ts
Импортировать FontAwesome:
Включите нужные значки из библиотеки, которую вы собираетесь использовать (в нашем случае мы собирались использовать пакет стиля Regular Pro):
Затем в свой экспорт включите свои значки:
Итак, ваш файл app.module.ts будет выглядеть примерно так:
Знаю, знаю…
Некоторые из вас могут заметить, что для использования FontAwesome в своем проекте вам потребуется импортировать FontAwesomeModule из строки 3 везде, где вы хотите использовать значки.
После того, как вы убедились, что у вас все настроено и работает, я предлагаю один (из многих, которые придут при создании вашего продукта) небольшой рефакторинг для создания общего компонента, который импортирует такие вещи, как FontAwesome (и другие глобально используемые элементы).
в действии
Теперь мы можем протестировать одну из наших симпатичных иконок в шаблоне. Обратите особое внимание на синтаксис, который нам здесь нужно использовать - мы определяем стиль «дальний» для пакета значков Обычный, и мы не включаем «fa» FontAwesome в название значка:
И это все! Для меня это было немного похоже на погоню за тем, как это сделать, и я провел несколько рефакторингов, когда проект начал расти, так что ваш опыт может варьироваться. Сообщите мне в комментариях, было ли это полезно для вас!
* Для справки: нет, мне не платят ни в службу поддержки FontAwesome Pro, ни за какие-либо технологии, ссылки на которые приведены здесь. Мне справедливо нравятся значки Pro за широту доступной библиотеки значков, варианты стилей библиотеки, которые вы получаете с Pro, и их простую в использовании настройку и обслуживание.
