Can Font Awesome be used with importmaps in Rails 7?

rubyonrails-talk
1

I’m new to Rails 7’s importmap and the documentation says you can pin a JavaScript module and then import it:

./bin/importmap pin react react-dom

import React from "react"
import ReactDOM from "react-dom"

How would that work with Font Awesome? Font Awesome’s documentation says you should install the package:

npm install --save @fortawesome/fontawesome-free

but then, when it comes to using it, it says:

<script defer src="/your-path-to-fontawesome/js/brands.js"></script>
<script defer src="/your-path-to-fontawesome/js/solid.js"></script>
<script defer src="/your-path-to-fontawesome/js/fontawesome.js"></script>

I’m not entirely clear how to translate that to importmap. I tried:

<script defer src="https://ga.jspm.io/npm:@fortawesome/fontawesome-free@6.0.0/js/brands.js"></script>
<script defer src="https://ga.jspm.io/npm:@fortawesome/fontawesome-free@6.0.0/js/solid.js"></script>
<script defer src="https://ga.jspm.io/npm:@fortawesome/fontawesome-free@6.0.0/js/fontawesome.js"></script>

since the pinning resulted in:

pin "@fortawesome/fontawesome-free", to: "https://ga.jspm.io/npm:@fortawesome/fontawesome-free@6.0.0/js/fontawesome.js"

but that doesn’t work. It fails with this error in the console in the browser:

enter image description here

2

I tried this myself without success, ended up taking this route instead.

3

I just made it work but I’m not entirely sure why it works so I would appreciate any insight or improvements on this solution. In the meantime, I’m happy to share with the world:

First, you need to pin the Font Awesome Javascript packages by running:

./bin/importmap pin @fortawesome/fontawesome-free @fortawesome/fontawesome-svg-core @fortawesome/free-brands-svg-icons @fortawesome/free-regular-svg-icons @fortawesome/free-solid-svg-icons

which adds:

pin "@fortawesome/fontawesome-free", to: "https://ga.jspm.io/npm:@fortawesome/fontawesome-free@6.0.0/js/fontawesome.js"
pin "@fortawesome/fontawesome-svg-core", to: "https://ga.jspm.io/npm:@fortawesome/fontawesome-svg-core@1.3.0/index.es.js"
pin "@fortawesome/free-brands-svg-icons", to: "https://ga.jspm.io/npm:@fortawesome/free-brands-svg-icons@6.0.0/index.es.js"
pin "@fortawesome/free-regular-svg-icons", to: "https://ga.jspm.io/npm:@fortawesome/free-regular-svg-icons@6.0.0/index.es.js"
pin "@fortawesome/free-solid-svg-icons", to: "https://ga.jspm.io/npm:@fortawesome/free-solid-svg-icons@6.0.0/index.es.js"

to your importmap.rb.

Then in your app/javascript/application.js you need to add:

import {far} from "@fortawesome/free-regular-svg-icons"
import {fas} from "@fortawesome/free-solid-svg-icons"
import {fab} from "@fortawesome/free-brands-svg-icons"
import {library} from "@fortawesome/fontawesome-svg-core"
import "@fortawesome/fontawesome-free"
library.add(far, fas, fab)

If you don’t need one of the libraries you can skip them, but skipping the last two imports or adding each icon package to the library makes it not work.

3 Likes
4

suggest you don’t to use importmap

5

Was having the same issue. I had to change the default pin to load ‘/js/all.js’ and everything worked:

# config/importmap.rb
pin '@fortawesome/fontawesome-free', to: 'https://ga.jspm.io/npm:@fortawesome/fontawesome-free@6.1.1/js/all.js'

# app/javascript/application.js
import "@fortawesome/fontawesome-free"

To load separately:

# config/importmap.rb
pin '@fontawesome', to: 'https://ga.jspm.io/npm:@fortawesome/fontawesome-free@6.1.1/js/fontawesome.js'
pin '@fontawesome/brands', to: 'https://ga.jspm.io/npm:@fortawesome/fontawesome-free@6.1.1/js/brands.js'

# app/javascript/application.js
import "@fontawesome/brands"
import "@fontawesome"

Or with a script tag, add type=module (https://github.com/WICG/import-maps#remapping-doesnt-work-for-script):

<script type="module" src="https://ga.jspm.io/npm:@fortawesome/fontawesome-free@6.1.1/js/all.js"></script>
1 Like
6

In my experience, the icons show up with a slight delay, when I use the npm package.

When I put gem "font-awesome-sass", "~> 6.1.1" in my Gemfile (link to gem) and do bundle install, all icons loads fast. (And you don’t need to use SCSS, you can call the icons with the standard HTML tag.)