字体很棒6在React中使用它的正确方法是什么

发布于 2025-02-07 04:48:56 字数 861 浏览 1 评论 0原文

依赖关系

    "@fortawesome/fontawesome-svg-core": "^6.1.1",
    "@fortawesome/free-solid-svg-icons": "^6.1.1",
    "@fortawesome/react-fontawesome": "^0.1.18",
    "next": "12.1.6",
    "react": "18.1.0",
    "react-dom": "18.1.0",
    "styled-components": "^5.3.5"

问题

我正在尝试创建一个自定义按钮，该按钮可以选择一个font Awesome FA-Solid图标的道具。 docs for react for React for React说，我应该能够做以下

<FontAwesomeIcon icon="fa-solid fa-camera-web" />

内容返回错误：

Could not find icon { prefix: 'fas', iconName: 'camera-web' }

如果我做一些简单的事情，

<FontAwesomeIcon icon={"camera" as IconProp} /> // I'm using typescript

那就可以了，但这不是我要使用的图标，而只是通用的图标。

原文

Dependencies

    "@fortawesome/fontawesome-svg-core": "^6.1.1",
    "@fortawesome/free-solid-svg-icons": "^6.1.1",
    "@fortawesome/react-fontawesome": "^0.1.18",
    "next": "12.1.6",
    "react": "18.1.0",
    "react-dom": "18.1.0",
    "styled-components": "^5.3.5"

Problem

I'm trying to create a custom button that takes props selecting a font awesome fa-solid icon. The docs for React say I should be able to just do the following

<FontAwesomeIcon icon="fa-solid fa-camera-web" />

This however returns an error:

Could not find icon { prefix: 'fas', iconName: 'camera-web' }

If I do something simple like

<FontAwesomeIcon icon={"camera" as IconProp} /> // I'm using typescript

Then it works, but it's not the icon I'm trying to use, just a generic one.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

苦妄 2025-02-14 04:48:56

对我来说，有效的方法（尽管有时却没有？）：

我在父文件中有一个，app.js -

import { library } from "@fortawesome/fontawesome-svg-core";

import { faBatteryHalf, faBatteryFull, faPrint } from "@fortawesome/free-solid-svg-icons";

library.add(faBatteryHalf, faBatteryFull, faPrint);

然后，我在哪里使用其中一个 -

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
.
.
.
return (
  <button
   className="print-report-btn"
   onClick={() => print()}
  >
   <FontAwesomeIcon icon="print" size="1x" /> 
   Print Report
  </button>
)

For me, what has worked (although sometimes it doesn't?):

I've got this in my parent file, App.js -

import { library } from "@fortawesome/fontawesome-svg-core";

import { faBatteryHalf, faBatteryFull, faPrint } from "@fortawesome/free-solid-svg-icons";

library.add(faBatteryHalf, faBatteryFull, faPrint);

Then, where I use one of them -

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
.
.
.
return (
  <button
   className="print-report-btn"
   onClick={() => print()}
  >
   <FontAwesomeIcon icon="print" size="1x" /> 
   Print Report
  </button>
)

回复收藏 0 原文

~没有更多了~