Fontawesome 风格的图标在 vite.js 中不起作用

Question

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

Answer 1

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

\n

npm i @fortawesome/react-fontawesome\n

\n

选择您想要的图标、实体、品牌等...：

\n

npm i @fortawesome/free-solid-svg-icons\nnpm i @fortawesome/free-brands-svg-icons\n

\n

\xc2\xa0则：

\n

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";\nimport { faUserSecret } from "@fortawesome/free-solid-svg-icons";\nimport { faGithub } from "@fortawesome/free-brands-svg-icons";\n\n...\n <FontAwesomeIcon icon={faUserSecret} />\n <FontAwesomeIcon icon={faGithub} />\n...\n

\n

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

\n

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

\n

Answer 2

npm install --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"