将 fontawesome 与包管理器一起使用不起作用？

Question

我正在努力尝试让 fontawesome 图标在使用 yarn 或 npm 安装时显示。我已经尝试了很多东西，但现在在控制台中没有错误。我有专业版许可证，正在使用 v.6，并且在 npm and/or yarn /webpack 安装后似乎所有 imports/calls 都在正确的位置。如有任何建议，我们将不胜感激。

这是我的 package.json 文件...

  "name": "group-visits",
  "private": true,
  "dependencies": {
    "@fortawesome/fontawesome-pro": "^6.1.1",
    "@fortawesome/fontawesome-svg-core": "^6.1.1",
    "@fortawesome/pro-duotone-svg-icons": "^6.1.1",
    "@fortawesome/pro-light-svg-icons": "^6.1.1",
    "@fortawesome/pro-regular-svg-icons": "^6.1.1",
    "@fortawesome/pro-solid-svg-icons": "^6.1.1",
    "@rails/actioncable": "^6.0.0",
    "@rails/activestorage": "^6.0.0",
    "@rails/ujs": "^6.0.0",
    "@rails/webpacker": "5.4.3",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat",
    "turbolinks": "^5.2.0",
    "webpack": "^4.46.0",
    "webpack-cli": "^3.3.12"
  },
  "version": "0.1.0",
  "devDependencies": {
    "autoprefixer": "9",
    "postcss": "7",
    "webpack-dev-server": "^3"
  }
}

我的 application.js 文件，（我们在 rails 上使用带有 ruby 的 webpacker）...

// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.

// import Rails from "@rails/ujs"
// import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"

import '@fortawesome/fontawesome-svg-core';
// import ('./application.css')
// import ('../stylesheets/style.css')


// Rails.start()
// Turbolinks.start()

ActiveStorage.start()


console.log("Hi from application.js from all")

我这样称呼图标...

        <div class="mx-auto mt-4">
          <%= link_to "Home", root_path %>
        </div>
      </header>
      <aside>
        <%= link_to 'Group Visits', group_visits_path %>
        <%= link_to 'Frequent Flyers', address_books_path %>
        <%= link_to 'tests', calendar_path %>
        <div class="bg-yellow-300 w-1/2 rounded-lg p-5">
          fontawesome icon check: <i class="fa-thin fa-arrow-right-to-city"></i>
          solid set: <i class="fa-solid fa-timer"></i>
        </div>
      </aside>
    </div>```


I also have an .npmrc file with my pro token in it with the correct code since we're using environment variables with font awesome in my bash file.

@fortawesome:registry=https://npm.fontawesome.com/
//npm.fontawesome.com/:_authToken=${FONTAWESOME_NPM_AUTH_TOKEN}

We are also using Rails 6. Don't know if this is causing any problems or not.

Answer 1

我们能够让 Font Awesome 版本 6 使用 yarn 和文件修改来处理以下更改...

在我们的 application.js 中，我们添加了行...

import '@fortawesome/fontawesome-pro/js/all';

我们还必须添加功能... import { dom } from '@fortawesome/fontawesome-svg-core';

然后调用 dom.watch();

替换任何现有标签并设置 MutationObserver 以随着 DOM 的变化继续这样做。这似乎是一个更轻量级的实现，您还可以将函数范围限定为仅实现某些图标以加速您的应用程序。

这些变化可能非常针对我们的环境，Rails6、Ruby3.1.1、webpack、yarn 等。 Heroku 上的 compiling/deployment 仍然很慢，但它对我们有用:)！

我们将这些安装保留在 package.json ...

"@fortawesome/fontawesome-pro": "^6.1.1",
"@fortawesome/fontawesome-svg-core": "^6.1.1",
"@fortawesome/pro-duotone-svg-icons": "^6.1.1",
"@fortawesome/pro-light-svg-icons": "^6.1.1",
"@fortawesome/pro-regular-svg-icons": "^6.1.1",
"@fortawesome/pro-solid-svg-icons": "^6.1.1",
"@fortawesome/pro-thin-svg-icons": "^6.1.1",

我还用 yarn 卸载并重新安装了上面的 svg 图标集，因为我不认为简单地将它们复制并发布到新项目中会自动使它们可用。

这些更改以及来自 Font Awesome 支持的一些指导完成了对大多数人来说看似简单的安装几天？

我希望这能帮助一些孤独的前端找到一些平静。

此外，来自 Font Awesome 的这封非常详细的电子邮件可以帮助加快您的 Font Awesome 捆绑包的速度！

嗨，

我们通常建议使用 svg/js 方法，除非您真的想使用 css 或避免使用 javascript。它在基本方法上非常相似，但如果你完全使用 javascript api，你可以使用库功能只导入你想要的图标。 https://fontawesome.com/docs/apis/javascript/icon-library

目前您使用的方法工作正常，但会导入所有图标，因此与使用 api 提供的更手术方法相比，捆绑包更大。 @fortawesome/fontawesome-pro/ 包包含我们所有的东西，因此您开箱即可获得所需的一切。如果您想通过将 javascript api 与库和/或 tree-shaking.

一起使用来获得更小的包，则其他文件都是必需的

出于这个原因，如果你走图书馆路线，你会不想使用 import '@fortawesome/fontawesome-pro/js/all' 方法，因为它包含额外的东西，可能会在你尝试时引起冲突缩小捆绑包的范围。您将需要使用所有其他文件，并且需要设置库并导入您要使用的所有图标。

回顾一下：如果您可以接受更大的捆绑包，那么您现在正在做的事情就可以正常工作，因为它会比您需要的更多。这是实现内容的最简单方法，但不一定会像您想要的那样高效。

如果您需要更好的 performance/smaller 包大小，您将希望沿用 javascript api 的路线并使用 library/tree-shaking 等功能来仅导入您在网站上实际使用的图标。这可以提高性能并减小捆绑包大小，但它更复杂，并且每当您想向站点添加图标时都必须做一些额外的工作。

因此权衡是易用性和性能。我通常建议人们使用更简单的方法，除非他们在他们的站点上看到性能问题，尤其是当不止一个人在从事该项目时。即使使用更大的捆绑包，我们设计的东西也具有开箱即用的性能，因此大多数人可以放心地坚持使用简单的方法。但是，每个站点都不同，因此您的实施可能需要比现成的解决方案更高效的解决方案，因此您可以利用 api 获得一些改进。

将 fontawesome 与包管理器一起使用不起作用？

using fontawesome with package managers not working?

ruby-on-rails

npm

font-awesome

webpack

yarnpkg