在具有 Rails 和 ReactJS 的Hyperstack项目中使用FontAwsome图标的最佳方法是什么,使用 Yarn 仅包含您需要的图标?
问问题
60 次
1 回答
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
真的就是这么简单!
于 2019-04-11T05:10:54.897 回答