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

发布于 2025-01-13 08:23:56 字数 2209 浏览 2 评论 0原文

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

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

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

原文

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

since the pinning resulted in:

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

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

雨巷深深 2025-01-20 08:23:56

我写了一个我的博客上有关于此的较长文章，但要点已复制到此处。

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

首先，您需要通过运行以下命令来固定 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)

如果您不需要其中一个库，您可以跳过它们，但跳过最后两个导入或将每个图标包添加到图书馆使它无法工作。

I wrote a longer piece about this on my blog, but the gist is copied here.

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/[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"

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.

回复收藏 0 原文

乖乖 2025-01-20 08:23:56

# 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-to-your-project。

您的布局中必须有 javascript_importmap_tags 才能正常工作。

Pin 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 分别。

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

# 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";

Based on documentation, we need to load js/all.js from fontawesome package to load all icons https://fontawesome.com/docs/web/setup/host-yourself/svg-js#add-font-awesome-files-to-your-project.

You must have javascript_importmap_tags in your layout for this to work.

Pin fontawesome:

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

That command doesn't pin the correct file, so we need to change it:

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

Import it in application.js:

// app/javascript/application.js

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

Everything should work now.

Alternatively, import pinned module in the layout instead of application.js:

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

To load only certain styles, we need to load solid.js, brands.js, and fontawesome.js separately.

Pin fontawesome and don't change it:

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

Pin 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

Pinned name is a bit verbose, so we could rename it:

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

Import it in 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

Do the same for brands.js if needed.

You should end up with something like this in your rendered layout:

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

回复收藏 0 原文