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

Question

我是 Rails 7 导入映射的新手，文档说 你可以固定一个 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

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

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

我不完全清楚如何将其翻译成 importmap。我试过：

<script defer src="https://ga.jspm.io/npm:@fortawesome/[email protected]/js/brands.js"></script>
<script defer src="https://ga.jspm.io/npm:@fortawesome/[email protected]/js/solid.js"></script>
<script defer src="https://ga.jspm.io/npm:@fortawesome/[email protected]/js/fontawesome.js"></script>

因为固定导致：

pin "@fortawesome/fontawesome-free", to: "https://ga.jspm.io/npm:@fortawesome/[email protected]/js/fontawesome.js"

但这不起作用。它在浏览器的控制台中失败并出现此错误：

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/[email protected]/js/fontawesome.js"
pin "@fortawesome/fontawesome-svg-core", to: "https://ga.jspm.io/npm:@fortawesome/[email protected]/index.es.js"
pin "@fortawesome/free-brands-svg-icons", to: "https://ga.jspm.io/npm:@fortawesome/[email protected]/index.es.js"
pin "@fortawesome/free-regular-svg-icons", to: "https://ga.jspm.io/npm:@fortawesome/[email protected]/index.es.js"
pin "@fortawesome/free-solid-svg-icons", to: "https://ga.jspm.io/npm:@fortawesome/[email protected]/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/[email protected]/js/all.js"

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

---

根据文档，我们需要从fontawesome包加载

js/all.js

来加载所有图标https://fontawesome.com/docs/web/setup/host-yourself/svg-js#add-font-awesome-files -到你的项目.

你的布局中必须有

javascript_importmap_tags

才能工作。

销

fontawesome

：

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

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

# config/importmap.rb

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

在application.js中导入它：

// app/javascript/application.js

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

现在一切都应该工作了。

---

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

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

---

要仅加载某些样式，我们需要分别加载

solid.js

、

brands.js

和

fontawesome.js

。

Pin

fontawesome

并且不要更改它：

$ bin/importmap pin @fortawesome/fontawesome-free
Pinning "@fortawesome/fontawesome-free" to https://ga.jspm.io/npm:@fortawesome/[email protected]/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/[email protected]/js/solid.js

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

pin "@fortawesome/fontawesome-free/solid", to: "https://ga.jspm.io/npm:@fortawesome/[email protected]/js/solid.js"

在application.js中导入它：

// app/javascript/application.js

import "@fortawesome/fontawesome-free/solid";  // => https://ga.jspm.io/npm:@fortawesome/[email protected]/js/solid.js
import "@fortawesome/fontawesome-free";        // => https://ga.jspm.io/npm:@fortawesome/[email protected]/js/fontawesome.js

如果需要，对 brands.js 做同样的事情。

你应该在你的渲染布局中得到这样的东西：

<script type="importmap" data-turbo-track="reload">{
  "imports": {
    "application": "/assets/application-66ce7505c61e3e4910ff16e7c220e1fbfb39251cd82e4bab8d325b3aae987cf9.js",
    "@fortawesome/fontawesome-free": "https://ga.jspm.io/npm:@fortawesome/[email protected]/js/fontawesome.js",
    "@fortawesome/fontawesome-free/solid": "https://ga.jspm.io/npm:@fortawesome/[email protected]/js/solid.js",
}</script>

<script type="module">import "application"</script>

Answer 3

我最终使用了官方的 FontAwesome Ruby gem，它似乎运行良好