Використання FontAwesome з Rails через JS-активи

У цій статті ви дізнаєтесь, як додати tree-shaken версію FontAwesomePro до вашого Rails додатку.

1. Додайте наступні пакети. Існує більше ніж 2 типи стилів для svg-ікон, тому якщо ви шукаєте певні, додавайте їх також. (Посилання на всі стилі)

npm install --save @fortawesome/fontawesome-svg-core  
npm install --save @fortawesome/pro-light-svg-icons  
npm install --save @fortawesome/pro-solid-svg-icons

1. У вашому js/ts файлі ви можете вибирати, які саме іконки вам потрібні. Ось приклад мого коду:

import { dom, library } from "@fortawesome/fontawesome-svg-core";  
// Tree shaking imports  
import {  
 faArrowsRotate as falArrowsRotate,  
 faListUl as falListUl,  
 faLocationDot as falLocationDot,  
 faMessageLines as falMessageLines,  
 faNote as falNote,  
} from "@fortawesome/pro-light-svg-icons";  

// Deep import alternative  
import { iconIWant as RenamedIconIWant } from "@fortawesome/pro-light-svg-icons";  

export function setupIconLibrary() {  
// Додаємо імпорти до бібліотеки  
// Якщо імпорт не додано сюди, він не буде замінений  
 library.add(  
 falNote,  
 falArrowsRotate,  
 falLocationDot,  
 falMessageLines,  
 falListUl,  
 );  
// Спостерігаємо за DOM і замінюємо  відповідними SVG  
 dom.watch();  
}

Для довідки ось html.erb з іконками:

<%= header %>
   ->     
<%= @data[:recurrence] %>
   ->        
<%= @data[:address] %>
    <% if customer[:phone] && customer[:email] %>    
    ->        <% if customer[:phone] %>    
<%= customer[:phone] %>
    <% end %>    <% if customer[:email] %>    
<%= customer[:email] %>
    <% end %>    
    <% end %>   ->    

Що це робить? Я розіб’ю це на кілька частин, щоб ви зрозуміли, що і чому я зробив таким чином.

Tree shaking та Deep imports
Коли імпортується, як у наведеному коді, починається процес tree-shaking, і замість того, щоб викликати файл на 12 МБ, ми викликаємо лише кілька сотень байтів, вибираючи саме те, що потрібно. (Документація)
Якщо у вас немає можливості використовувати tree-shaking, можна скористатися методом deep-import. Дивіться нижче:

 // Tree shaking  
 import { iconIWant as RenamedIconIWant } from "@fortawesome/pro-light-svg-icons/faIdealIcon";   
 // Deep import  
 import { iconIWant as RenamedIconIWant } from "@fortawesome/pro-light-svg-icons"; 

Додавання іконок до бібліотеки
Як ви можете побачити з коду вище, я викликаю library.add(…) з усіма імпортованими іконками. Що відбувається: коли FontAwesome шукає іконки в DOM (HTML), він буде знати, як замінити іконки на SVG, коли знайде іконку з певним класом. (Документація)
Наприклад, якщо ви хочете відобразити falArrowsRotate, то потрібно додати наступне в ваш HTML:

# /your-page.html    

і переконатися, що ви включили falArrowsRotate в library.add, як ось:

 // application.ts  
 library.add(  
    falArrowsRotate,  
    ...otherImportedIcons  
 ) 

Відображення іконок
Тепер, коли іконки імпортовані та додані до бібліотеки, все, що потрібно зробити, це викликати dom.watch();. Це знайде всі іконки, замінить їх на SVG, а потім спостерігатиме, чи з’являться нові елементи <i> в HTML і змінить їх, якщо знайде. (Документація)

Сподіваюся, це допоможе вам! Якщо щось не зрозуміло, дайте знати!

Перекладено з: Using FontAwesome with Rails via JS Assets