Web Awesome 来了，它是最大的、最好的开源 Web 组件库。

带有 Turbolinks 的 Rails

Font Awesome 与 Rails 和 Turbolinks 很好地集成，特别是如果您使用 Web 字体。但如果您使用的是 SVG + JS，则需要进行一些调整。

我们将介绍在遇到由 MutationObserver 引起的视觉故障时该怎么做，以及如何安装 Font Awesome，无论您是使用工具包还是自行托管 Font Awesome，等等！

挑战是什么？

在您安装了带有 JS 版本的 Font Awesome 的 SVG 并加载了 Rails 应用程序中的第一个页面之后，会发生几件事。

Font Awesome 将搜索所有 <i> 元素并将其替换为 <svg> 元素。
它将创建一个 MutationObserver，监控页面的更改以进行将来的替换。

当 Turbolinks 在导航发生后用新内容替换页面的 <body> 时，Font Awesome 会自动将此 MutationObserver 重新连接到新内容。

问题就在这里：图标在快速出现之前会短暂消失。 这看起来很糟糕，但我们可以轻松修复它。

将 mutateApproach 配置设置为 sync（在 5.8.0 版或更高版本中可用），提供了一种方法，通过在 Turbolinks 收到新内容后立即呈现图标，来跳过此图标短暂消失的现象。

操作方法

我们先假设您已经安装了 Turbolinks 并将其配置到您的 Rails 应用程序中。

使用应用程序配置

最好的方法是直接在 application.js 文件中进行配置

// This is a manifest file that'll be compiled into application.js,
// which will include all the files listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts,
// or any plugin's vendor/assets/javascripts directory can be referenced here
// using a relative path.
//
//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require fontawesome/all
//= require_tree .

FontAwesome.config.mutateApproach = 'sync'

使用工具包或您自己的外部托管

如果您通过修改 Rails 布局安装了 Font Awesome，您可能已经包含了一个 <script> 标签。

添加 data-mutate-approach="sync"。

<!DOCTYPE html>
<html>
  <head>
    <title>My app</title>
    <%= csrf_meta_tags %> <%= csp_meta_tag %> <%= stylesheet_link_tag
    'application', media: 'all', 'data-turbolinks-track': 'reload' %> <%=
    javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
    <script src="<your-kit-code>" data-mutate-approach="sync"></script>
  </head>

  <body>
    <%= yield %>
  </body>
</html>

使用资产管道

安装 Font Awesome 的另一种常见方法是将源文件放在 vendors/assets/javascripts 目录中，然后修改 app/assets/javascripts/application.js 以包含 //= require fontawesome/all。Font Awesome 随后将被包含在 Rails 布局已经包含的 application 包中。

您可以在布局中添加一个 <script> 标签来更改配置。

<!DOCTYPE html>
<html>
  <head>
    <title>My app</title>
    <%= csrf_meta_tags %> <%= csp_meta_tag %>

    <script>
      FontAwesomeConfig = {
        mutateApproach: 'sync'
      }
    </script>

    <%= stylesheet_link_tag 'application', media: 'all',
    'data-turbolinks-track': 'reload' %> <%= javascript_include_tag
    'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>

使用 Webpacker 和 `@fortawesome/fontawesome-svg-core`

如果您使用 Webpacker 和 NPM 安装 Font Awesome，您可以使用树状抖动来子集图标。

您的安装可能如下所示，在这种情况下，我们只需使用 API 更改配置即可。

  import { config, library, dom } from '@fortawesome/fontawesome-svg-core'

# Change the config to fix the flicker

config.mutateApproach = 'sync'

# An example icon

import {
faGithub
} from '@fortawesome/free-brands-svg-icons'

library.add(
faGithub
)

dom.watch()