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)

App.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，所以您实际上可以：

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 包，如果它们是 Brands，则添加 free-brand-svg-图标包...您实际上可以进行搜索并找到最适合您的，干杯。

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"

Answer 3

FontAwesome 宏是 Babel 宏，所以 Vite 需要一个插件来识别和运行它们。

1 安装

vite-plugin-babel-macros

插件：

npm install --save-dev vite-plugin-babel-macros

2 转到

vite.config.js

并添加以下内容：

import macrosPlugin from "vite-plugin-babel-macros";
...

export default defineConfig({
 ...
 plugins: [..., macrosPlugin()],
 ...
})

3 添加 babel 宏配置文件：

创建一个

.babel-plugin-macrosrc

文件，内容如下：

{
  "fontawesome-svg-core": {
    "license": "free"
  }
}

重要

Vite项目是在

"type": "module"

中使用选项

package.json

创建的，这使得

babel-plugin-macros.config.js

无法使用

module.exports

。

因此，不要使用

js

配置文件，而是使用

rc

或

json

文件。 如果您将

package.json

中的项目类型更改为

commonjs

只是为了使此插件正常工作，请恢复更改；它造成的弊大于利。

您可以在

docs

中阅读有关 babel-plugin-macros 配置文件的更多信息，并选择除

.config.js

以外您喜欢的任何选项。