Vue 3 иконки от Font Awesome

Содержимое статьи:

• Подключение через main.js
• Подключение через публичный индекс-файл
• Оптимальный подход с использованием пакета npm

Для облегчения работы с огромным количеством иконок от Font Awesome в приложении Vue 3 существует несколько подходов.

Подключение через main.js

// main.js

import { library } from "@fortawesome/fontawesome-svg-core";

import { faUser, faHeart, faComment, ... } from "@fortawesome/free-solid-svg-icons";

library.add(faUser, faHeart, faComment, ...); // перечислить все необходимые иконки

Подключение через публичный индекс-файл

<!-- public/index.html -->

<link href="https://use.fontawesome.com/releases/v6.1.1/css/all.css" rel="stylesheet">

Примечание: Использование link не рекомендуется, так как это приведет к замедлению работы страницы из-за загрузки всех иконок.

Оптимальный подход с использованием пакета npm

1. Установите пакет npm:
   

   npm install --save @fortawesome/vue-fontawesome

2. Импортируйте пакет в main.js:
   

   // main.js
   
   import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";

3. Зарегистрируйте компонент в приложении:
   

   // main.js
   
   Vue.component("font-awesome-icon", FontAwesomeIcon);

4. Используйте компонент для отображения иконок:
   

   <font-awesome-icon :icon="['fas', 'user']" />