Как вы используете FontAwsome Icons в Hyperstack? - PullRequest
Новая
       36

Как вы используете FontAwsome Icons в Hyperstack?

1 голос
/ 11 апреля 2019

Как лучше всего использовать FontAwsome Иконки в проекте Hyperstack с Rails и ReactJS, используя Yarn для включения только нужных вам иконок?

1 Ответ

1 голос
/ 11 апреля 2019

Это лучший подход:

Добавьте модули с пряжей: 

yarn add @fortawesome/fontawesome-svg-core
yarn add @fortawesome/free-solid-svg-icons
yarn add @fortawesome/react-fontawesome

Импортируйте их в один из ваших пакетов Webpacker: 

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { library } from '@fortawesome/fontawesome-svg-core';
import { faAngleDown, faAngleUp, faCoffee } from '@fortawesome/free-solid-svg-icons';

library.add(faAngleDown, faAngleUp, faCoffee);
global.Fa = FontAwesomeIcon;

Затем используйте их в своих компонентах: 

H1 { Fa(icon: 'coffee') } # to inherit your H1 style
Fa(icon: 'angle-down', size: 'xs) 
Fa(icon: 'angle-up', className: 'special')

Если вы часто используете определенные значки, вы можете добавить вспомогательный метод в класс HyperComponent: 

class HyperComponent
  include Hyperstack::Component
  include Hyperstack::State::Observable

  def icon_check
    Fa(icon: 'check', className: 'green-color', size: 'lg')
  end
end

Это действительно так просто!

...