Добавляем Ionicons в Angular 6 приложение

В последнее время мне пришлось работать над множеством Angular приложений, и я дико устал от Font Awesome. Поэтому я решил использовать Ionicons от популярного фреймворка Ionic. В этой статье я расскажу пошагово как установить Angular 6 и подключить к нему Ionicons.

Итак что мы будем делать:

  • Установим Angular CLI v6
  • Создадим новое приложение Angular v6 
  • Установим Ionicons
  • Настроим Ionicons для использование с нашим приложением

Установка Angular CLI v6

Здесь всё предельно просто, вводим комунду в терминале:

npm install -g @angular/cli@latest

После этого вы запускаете

ng -- version

для того чтобы проверить версию Angular, которую вы установили. Удостоверьтесь, что Angular CLI 6.0.0 и выше.

Добавляем Ionicons в Angular 6 приложение

Создаём приложение Angular v6

Итак у нас есть установленный Angular. Теперь создадим новое приложение. Для этого выполним команду:

ng new my-ionicons-angular-app --style=scss

По завершению мы перейдем к вновь созданному приложению:

cd my-ionicons-angular-app

И запускаем сервер разработки:

ng serve

Должны получить примерно такой ответ:

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

Если откроете в браузере URL http://localhost:4200/ вы увидите следующее:

Добавляем Ionicons в Angular 6 приложение

Установка и настройка Ionicons

Как и в предудущих шагах для установки вводим в терминале:

npm install ionicons

После установки, нам нужно указать angular, где и как его загружать ionicons. Лучший способ сделать это в файле styles.scss, добавив следующие строки:

$ionicons-font-path: "~ionicons/dist/fonts";
@import "~ionicons/dist/scss/ionicons.scss";

Поздравляю всё подключено и настроено, теперь вам остаётся только в файле app.component.html в нужных вам местах вставить соответствующие иконки, они имеют примерно такое html представление <i class="icon ion-md-heart"></i> . Вы можете посмотреть все иконки Ionicons и как они обозначаются на сайте. Ниже посмотрите как в заголовок я добавил сердце:

Добавляем Ionicons в Angular 6 приложение

Так файл app.component.html выглядит в html:

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Welcome to {{ title }} <i class="icon ion-md-heart"></i>!
  </h1>
  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<h2>Here are some links to help you start: </h2>
<ul>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
  </li>
</ul>

Вот и всё, да это очень простоPretty easy.

Перевод статьи автора Adedoja Adedamola: How to add Ionicons to your Angular 6 apps

Добавляем Ionicons в Angular 6 приложение

Гик, хакинтошник, линуксоид, считаю что немного умею в вебдизайн и сайтостроение

Чтобы не пропустить новые статьи, оставь свой Email

Поздравляем вы подписаны на новости ТехноДжем!

TВо время отправки данных произошла ошибка. Попробуйте ещё раз

Оставляя свою почту