CODEWITHSUNDEEP
ruby-on-railsrubyreactjsisomorphichyperstack
BarrieH
BarrieH

Reputation: 373

How do you use FontAwsome Icons in Hyperstack?

What is the best way to use FontAwsome Icons in a Hyperstack project with Rails and ReactJS, using Yarn to include just the icons you need?

Upvotes: 1

Views: 69

Answers (1)

BarrieH
BarrieH

Reputation: 373

This is the best approach:

Add the modules with Yarn:

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

Import them into one of your Webpacker packs:

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;

Then use them in your components:

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

If there are certain icons you are using often, you can add a helper method to your HyperComponent class:

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

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

It really is that simple!

Upvotes: 1

Related Questions