Font Awesome 风格的图标在 vite.js 中不起作用答案

【问题标题】：Fontawesome styled icons doesen't work in vite.jsFont Awesome 风格的图标在 vite.js 中不起作用
【发布时间】：2023-02-16 03:31:13
【问题描述】：

Fontawesome 风格的图标在 vite.js 中不起作用。您可以简单地创建一个 vite 应用程序，然后向其中添加 fontawesome，然后您就会注意到它。

错误：

Uncaught ReferenceError: process is not defined
    at node_modules/path-parse/index.js (index.js:3:17)
    at __require2 (chunk-S5KM4IGW.js?v=f1e39289:18:50)
    at node_modules/resolve/lib/node-modules-paths.js (node-modules-paths.js:2:27)
    at __require2 (chunk-S5KM4IGW.js?v=f1e39289:18:50)
    at node_modules/resolve/lib/async.js (async.js:5:24)
    at __require2 (chunk-S5KM4IGW.js?v=f1e39289:18:50)
    at node_modules/resolve/index.js (index.js:1:13)
    at __require2 (chunk-S5KM4IGW.js?v=f1e39289:18:50)
    at node_modules/babel-plugin-macros/dist/index.js (index.js:5:17)
    at __require2 (chunk-S5KM4IGW.js?v=f1e39289:18:50)

应用程序.jsx：

import "./App.css";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
  solid,
  regular,
  brands,
  icon,
} from "@fortawesome/fontawesome-svg-core/import.macro";

function App() {
  return (
    <div className="App">
      <FontAwesomeIcon icon={solid("user-secret")} />
      <FontAwesomeIcon icon={regular("coffee")} />
      <FontAwesomeIcon icon={icon({ name: "coffee", style: "solid" })} />
      <FontAwesomeIcon ic on={brands("twitter")} />
    </div>
  );
}

export default App;

关于这个主题的 Fontawesome 文档：https://fontawesome.com/docs/web/use-with/react/add-icons

【问题讨论】：

Vite 没有暴露process，并且还有针对babel macros in Vite 的特殊插件。
我安装了它。现在它说：babel-plugin-macros.config.js 被视为 ES 模块文件，因为它是一个 .js 文件，其最近的父 package.json 包含“type”：“module”，它声明了该包中的所有 .js 文件作用域为 ES 模块。相反，重命名 babel-plugin-macros.config.js 以 .cjs 结尾，更改需要的代码以使用在所有 CommonJS 模块中可用的动态 import()，或将 "type": "module" 更改为 "type": " commonjs" 在 C:\Users\mrkil\OneDrive\Desktop\test\package.json 中将所有 .js 文件视为 CommonJS（改为对所有 ES 模块使用 .mjs）。
babel-plugin-macros.config.js 中的代码：module.exports = { "fontawesome-svg-core": { license: "free", }, };

标签： reactjs font-awesome vite

【解决方案1】：

npm 安装 --dev vite-plugin-babel-macros

vite.config.js：

...
import macrosPlugin from "vite-plugin-babel-macros"
...
export default defineConfig({
 plugins: [react(), macrosPlugin()],
})

在 babel-plugin-macros.config.js 中

module.exports = {
  'fontawesome-svg-core': {
    'license': 'free'
  }
}

缺少的链接是 package.json 将类型“module”替换为“commonjs”

 -- "type": "module"
 ++ "type": "commonjs"

【讨论】：

【解决方案2】：

据我所见，您正在使用 React，因此您实际上可以：

npm i @fortawesome/react-fontawesome

然后选择你想要的图标，纯色，品牌等...：

npm i @fortawesome/free-solid-svg-icons
npm i @fortawesome/free-brands-svg-icons


import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faUserSecret } from "@fortawesome/free-solid-svg-icons";
import { faGithub } from "@fortawesome/free-brands-svg-icons";

...
 <FontAwesomeIcon icon={faUserSecret} />
 <FontAwesomeIcon icon={faGithub} />
...

除了像我上面那样安装和使用软件包之外，您不需要做任何其他事情。

观察：检查哪些样式是您需要的图标，如果它们是“solid”，则添加 free-solid-svg-icons 包，如果它们是品牌，则添加 free-brands-svg-icons 包...您实际上可以进行搜索并找到最适合您的东西，干杯。

【讨论】：