ImportMap-railsを具体的にどのように使用すればいいのかよくわからない方向けの手順説明です。
- (FontAwesome) Kitを作成
- (FontAwesome) KitのURLを config/importmap.rb に追加
- application.js で import
1. (FontAwesome) Kitを作成
FontAwesome 6はKitを使って読み込むのが簡単です。
作成したKitを使うためのscriptタグが生成されるのでURLを控えておきます。
2. (FontAwesome) KitのURLを config/importmap.rb に追加
config/importmap.rb
pin 'fontawesome', to: 'https://kit.fontawesome.com/a11e0d1760.js', preload: true
3. application.js で import
app/javascript/application.js
// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
import 'fontawesome';
生成されるHTML
app/views/layouts/application.html.erb
<!DOCTYPE html>
<html>
<head>
<%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
<%= javascript_importmap_tags %>
</head>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/assets/application-fe440406e54bdd95ec9046fd7f7b3f6803f9748857226012c8213a74c8350ae1.css" data-turbo-track="reload" />
<script type="importmap" data-turbo-track="reload">{
"imports": {
"application": "/assets/application-a8204edc4f5143ce4d5485d25f0f0dd2824346251aa3267ebf25fa6acf952fdc.js",
"fontawesome": "https://kit.fontawesome.com/a11e0d1760.js"
}
}</script>
<link rel="modulepreload" href="/assets/application-a8204edc4f5143ce4d5485d25f0f0dd2824346251aa3267ebf25fa6acf952fdc.js">
<link rel="modulepreload" href="https://kit.fontawesome.com/a11e0d1760.js">
<script src="/assets/es-module-shims.min-d89e73202ec09dede55fb74115af9c5f9f2bb965433de1c2446e1faa6dac2470.js" async="async" data-turbo-track="reload"></script>
<script type="module">import "application"</script>
</head>
Discussion