Font Awesome 可以与 Rails 7 中的导入映射一起使用吗？

Question

我是 Rails 7 的 importmap 的新手，文档说您可以固定 JavaScript 模块，然后导入它：

./bin/importmap pin react react-dom

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

与 Font Awesome 一起使用会如何？Font Awesome 的文档说你应该安装这个包：

npm install --save @fortawesome/fontawesome-free

但是，当谈到使用它时，它说：

npm install --save @fortawesome/fontawesome-free

我不完全清楚如何将其转换为 importmap。我试过：

<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>

因为固定导致：

<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>

但这行不通。它失败并在浏览器的控制台中出现以下错误：

Answer 1

我在我的博客上写了一篇更长的文章，但要点复制在这里。

我刚刚使它工作，但我不完全确定它为什么工作，所以我将不胜感激对此解决方案的任何见解或改进。与此同时，我很高兴与世界分享：

首先，您需要通过运行以下命令来固定 Font Awesome Javascript 包：

./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

其中补充道：

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"

给你的importmap.rb.

然后在你的中app/javascript/application.js你需要添加：

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)

如果您不需要其中一个库，您可以跳过它们，但是跳过最后两次导入或将每个图标包添加到库中会使其不起作用。

Answer 2

# TLDR

# config/importmap.rb
# NOTE: rename `fontawesome.js` to `all.js`
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";

根据文档，我们需要js/all.js从 fontawesome 包加载以加载所有图标https://fontawesome.com/docs/web/setup/host-yourself/svg-js#add-font-awesome-files-to-your-project。

您必须javascript_importmap_tags在布局中包含此内容才能正常工作。

别针fontawesome：

$ bin/importmap pin @fortawesome/fontawesome-free
Pinning "@fortawesome/fontawesome-free" to https://ga.jspm.io/npm:@fortawesome/fontawesome-free@6.1.1/js/fontawesome.js

该命令没有固定正确的文件，因此我们需要更改它：

$ bin/importmap pin @fortawesome/fontawesome-free
Pinning "@fortawesome/fontawesome-free" to https://ga.jspm.io/npm:@fortawesome/fontawesome-free@6.1.1/js/fontawesome.js

将其导入application.js：

# config/importmap.rb

# NOTE: change `fontawesome.js` to `all.js`
pin "@fortawesome/fontawesome-free",
  to: "https://ga.jspm.io/npm:@fortawesome/fontawesome-free@6.1.1/js/all.js"

现在一切都应该正常了。

或者，在布局中导入固定模块而不是application.js：

// app/javascript/application.js

import "@fortawesome/fontawesome-free"; // => https://ga.jspm.io/npm:@fortawesome/fontawesome-free@6.1.1/js/all.js

要仅加载某些样式，我们需要分别加载solid.js、brands.js和fontawesome.js。

固定fontawesome并且不要更改它：

$ bin/importmap pin @fortawesome/fontawesome-free
Pinning "@fortawesome/fontawesome-free" to https://ga.jspm.io/npm:@fortawesome/fontawesome-free@6.1.1/js/fontawesome.js

固定solid.js：

$ bin/importmap pin @fortawesome/fontawesome-free/js/solid.js
Pinning "@fortawesome/fontawesome-free/js/solid.js" to https://ga.jspm.io/npm:@fortawesome/fontawesome-free@6.1.1/js/solid.js

固定名称有点冗长，因此我们可以重命名它：

<%= javascript_import_module_tag "@fortawesome/fontawesome-free" %>

将其导入application.js：

$ bin/importmap pin @fortawesome/fontawesome-free
Pinning "@fortawesome/fontawesome-free" to https://ga.jspm.io/npm:@fortawesome/fontawesome-free@6.1.1/js/fontawesome.js

如果需要，对Brands.js执行相同的操作。

您最终应该在渲染的布局中得到类似这样的结果：

$ bin/importmap pin @fortawesome/fontawesome-free/js/solid.js
Pinning "@fortawesome/fontawesome-free/js/solid.js" to https://ga.jspm.io/npm:@fortawesome/fontawesome-free@6.1.1/js/solid.js