如何在 Hyperstack 中使用 FontAwsome Icons？

Question

在带有 Rails 和 ReactJS 的Hyperstack项目中使用FontAwsome Icons 的最佳方法是什么，使用 Yarn 只包含您需要的图标？

Answer 1

这是最好的方法：

使用 Yarn 添加模块：

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

真的就是这么简单！