reactjs 字体风格的图标在vite.js中不起作用

tkqqtvp1 于 2023-02-22 发布在 React

关注(0)|答案(2)|浏览(131)

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

reactjs

来源：https://stackoverflow.com/questions/74809718/fontawesome-styled-icons-doesent-work-in-vite-js

2条答案

按热度按时间

fcg9iug31#

npm安装--开发vite插件babel宏
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"

赞(0）回复(0）举报 2023-02-22

q35jwt9p2#

据我所知，您使用的是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} />
...

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

观察结果：检查哪些样式是你需要的图标，如果它们是在“固体”，然后添加自由固体svg-icons包，如果它们是在品牌，然后添加自由品牌svg-icons包...你实际上可以做一个搜索，找到最适合你的，干杯。*

赞(0）回复(0）举报 2023-02-22

我来回答

reactjs 字体风格的图标在vite.js中不起作用

2条答案

相关问题

热门标签

最新问答