找不到图标react-fontawesome

2023-12-28

我有一个关于 React 的项目,我需要将 FontAwesome 集成到其中。我找到官方的library https://github.com/FortAwesome/react-fontawesome并按照自述文件中的说明安装它

$ npm i --save @fortawesome/fontawesome
$ npm i --save @fortawesome/react-fontawesome

当我尝试在我的代码中使用它时,如下所示:

<FontAwesomeIcon icon='plus'/>
<FontAwesomeIcon icon={['fa', 'coffee']}/>

我在控制台上收到此错误:

Could not find icon {prefix: "fas", iconName: "plus"}
Could not find icon {prefix: "fa", iconName: "coffee"}

我尝试将 FontAwesome css 链接包含到 head 但没有帮助。我在用npm v4.6.1; node v8.9.1; react v16.2.


您需要将您想要使用的任何图标添加到“库”中以方便参考。

import React from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import fontawesome from '@fortawesome/fontawesome'
import FontAwesomeIcon from '@fortawesome/react-fontawesome';
import { faCheckSquare, faCoffee } from '@fortawesome/fontawesome-free-solid'

const styles = {
  fontFamily: 'sans-serif',
  textAlign: 'center',
};

fontawesome.library.add(faCheckSquare, faCoffee);

const App = () => (
  <div style={styles}>
    <FontAwesomeIcon icon="check-square" /><br /><br />
    <FontAwesomeIcon icon="coffee" />
  </div>
);

render(<App />, document.getElementById('root'));

在这里查看工作代码:https://codesandbox.io/s/8y251kv448 https://codesandbox.io/s/8y251kv448

另外,请阅读以下内容:https://www.npmjs.com/package/@fortawesome/react-fontawesome#build-a-library-to-reference-icons-throughout-your-app-more-conveniently https://www.npmjs.com/package/@fortawesome/react-fontawesome#build-a-library-to-reference-icons-throughout-your-app-more-conveniently

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

找不到图标react-fontawesome 的相关文章

  • 如何缓存 API 响应并稍后在 React 和 Redux 中使用它?

    在我的基于 React 的应用程序中 有一个 REST API 调用 它一次性获取整个页面所需的所有数据 响应中包含的数据也可用于下拉菜单中 但我不确定如何实现这一目标 目前 每当选择下拉值时 我都会发出新请求 请建议我如何有效地实施它 而
  • 如何给antd Select设置自定义样式?

    我要定制antdSelect 当用户点击Select蚂蚁金服Option应该显示在 antd 上Select而不是显示在Select antd Select https ant design components select https
  • 使用 React Router v6 保护路由 [重复]

    这个问题在这里已经有答案了 使用新版本 6 的 React router 编写 ProtectedRoute 的正确方法是什么 我写了这个 但这不是一条路线 const PrivateRoute component Component pr
  • 在react中使用Fetch,需要用户名密码才能访问数据库

    我已经对此进行了数小时的研究 但找不到我需要的答案 很抱歉 如果有人问这个问题 而我的研究很糟糕 如果是这样 只需链接有用的堆栈溢出页面 我就会继续我的快乐之路 这是我的问题的摘要 我在CS4班 我们正在设计自己的网页 必须使用我们学校的服
  • 无法读取未定义的属性“mockResolvedValue”

    我在模拟 api 调用时遇到错误 TypeError Cannot read property mockResolvedValue of undefined 并且不明白为什么 我正在利用 jest 来测试我的 api 获取调用函数 这是我要
  • Firestore - 简单的全文搜索解决方案

    我知道 firestore 不支持全文搜索 它为我们提供了使用第三方服务的解决方案 不过我找到了一个简单的解决方案simple 全文搜索 我认为这可能会帮助那些像我一样不想使用第三方服务来完成如此简单任务的人 我正在尝试搜索保存在 fire
  • 无法解析 {path} 中的“@material-ui/lab/Slider”

    我导入了滑块 import Slider from material ui lab Slider 并已返回渲染中 该代码未编译并抛出错误 找不到模块 错误 Can t resolve material ui lab Slider in pa
  • CSS动画从右到左动态

    我面临的问题是 我有一个从右到左的动画文本 该文本根据语言集而变化 是什么导致文本的总宽度也发生变化 在这张图中 我想要的效果工作正常 因为一些属性是固定的 现在 当我更改更长的文本时 问题就出现了 所以 这就是我现在所拥有的 这就是我想要
  • “string”类型的参数不可分配给“${string}”类型的参数 | `${string}.${string}` | `${string}.${number}`'

    我已经迁移了react hook forms从第 6 节到第 7 节 更改后register方法 正如在迁移指南 https react hook form com migrate v6 to v7 出现以下错误 string 类型的参数不
  • 使用小屏幕时强制在按钮文本内换行

    我有一个响应式网络应用程序 其中包含一些对于小移动屏幕来说太大的按钮 它们包含太多文字 因此最终会从屏幕上消失 我目前正在使用a通过给它们引导类来标记为按钮 所以目前的代码是这样的 a Here I have a button with l
  • ReactJS材质UI图标按钮上传文件

    我想知道如何使用 IconButton 打开目录来上传文件
  • 在reactjs中从父组件调用子组件方法

    我需要从父组件调用子组件方法 在reactjs中 我尝试过使用 refs 但无法做到 任何人都可以建议任何解决方案 谢谢 如果使用 React Hooks 您可以使用 useRef 和 useImperativeHandle 钩子 在子组件
  • Jest moduleNameMapper 查找文件:“resolver”:未定义

    我有一个文本文件 除其他外 component路径下的文件夹 src components text 但是 当 webpack 别名为 Jest 时 Jest 找不到这个文件import Text from components text
  • 'TypeError [ERR_INVALID_ARG_TYPE]:“path”参数必须是字符串类型。收到的类型未定义'

    我正在做一个 React 项目 遇到了一个让我困惑的问题 每当我跑步时yarn start我收到此错误 类型错误 ERR INVALID ARG TYPE 路径 参数必须是类型 细绳 收到的类型未定义 我不知道为什么会发生这种情况 要解决此
  • 在 React 组件中动态创建元素

    我创建了一个辅助函数 当我单击按钮时 它可以在组件中动态创建元素 但是它没有显示我尝试附加到父 div 的 html 的一半 它正确地将标签添加为 html 但其余部分只是纯文本 谁能明白为什么吗 用于动态创建内容的函数 function
  • 如何将 props 传递给模态

    我有一个购物应用程序 我可以在其中映射一些产品并将它们呈现在屏幕上 用户可以增加 减少数量 当数量达到 1 并且用户点击减少时 一些中间件会介入并询问他们是否确定要将其从购物篮中删除 如果他们单击 否 则会关闭模式并将其留在购物篮中 如果他
  • 如何获取站点地图 Gatsby 静态文件的更新/lastmod 值

    我一直在使用 Gatsby 并一直在尝试创建一个sitemap with lastmod静态页面的值 src pages 我看到一个随机代码片段 其中有人在他的代码中运行了下面的查询gatsby config js并能够获得他上次修改它们的
  • 如何使用 Python 验证 ReCaptcha 响应服务器端?

    我想检查使用生成的客户端响应react google recaptcha在我的注册表单中 不幸的是 我不知道如何使用 Python 在服务器端验证它 I tried recaptcha client https pypi python or
  • React 和 ES6 继承

    Note 这篇文章是在 React 不支持 ES6 v12 时发布的 我有一个 ES6 课程 class BaseClass getInitialState return message Hello render return div di
  • 反应:无效的挂钩调用。钩子只能在函数组件体内调用

    我花了两天时间试图了解错误在哪里 知道吗 App js import React useState useEffect from react import Menu from components Menu function App ret

随机推荐

  • Java 和 Spring。事务注释@Transactional

    我想从 DAO 类中删除开始和提交事务 并且我需要使用事务注释 应该怎么做呢 现在 例外是 org hibernate HibernateException createQuery 在没有活动事务的情况下无效 课程DAO java publ
  • Reacts/Flux 的存储应该是 GUI 整个状态的快照吗?

    简短的问题 看起来应用程序的状态可以从 React Flux 存储中完全序列化 我已经在输入值和其他内容中看到过这种情况 但是动画或悬停效果又是什么呢 我应该使用经典吗 hover用于悬停效果的 CSS 选择器 还是应该使用 mouseen
  • db4o 客户端/服务器似乎一次只能处理一个查询?

    我们正在评估 db4o 来自http www db4o com http www db4o com 我们针对客户端 服务器模式进行了性能测试 其中我们启动服务器 然后同时使用多个客户端对其进行测试 看起来服务器一次只能处理一个客户端的查询
  • Spark 节点在 Shuffle 期间如何通信?

    我见过从这个问题 https stackoverflow com questions 38084293 spark how does it distribute data around the nodesSpark 节点有效地 直接通信 但
  • 在 MySQL 中使用列组作为唯一键

    我有一张桌子叫requests列所在的位置id placeId songId userId id是表的主索引 其余列只是无符号整数 并且没有定义其他唯一键 I want placeId songId对是唯一的 即 如果一行有placeId
  • 带条件的累积平均值

    我的 df 的小代表 PTS TeamHome lt c 101 87 94 110 95 PTS TeamAway lt c 95 89 105 111 121 TeamHome lt c LAL HOU SAS MIA LAL Team
  • Android:当电池处于定义的水平时执行某些操作

    我在这里遇到了一个小问题 我希望我的应用程序执行某些操作 但仅限于电池电量为 10 时 我的应用程序不会持续监视电池电量 它只是等待 LOW BATTERY 意图 如果我不指定级别 它会起作用 但它会起作用 3 次 15 10 和 5 我只
  • cap部署symfony2项目时出现问题,找不到app/bootstrap.php.cache

    我正在尝试 第一次 使用 capifony 从我的 github 存储库部署我的网站 它一直运行到设置阶段并出现以下错误 out example me PHP Warning require once var www example pro
  • Google Chrome 中选项页面和后台页面之间的通信

    我正在尝试一个简单的 Google Chrome 扩展 其中我需要在选项页面和后台页面之间进行通信以获取 设置选项 我尝试过 chrome extension sendRequest 和 chrome extension onRequest
  • Rails Engine:如何根据每个请求自动重新加载类?

    我正在开发一个 Rails 引擎 它允许实现者将类放入app snippets 从引擎内部 我想指示主机 Rails 应用程序自动重新加载类app snippets根据每个请求 以便实施者在进行更改时不必重新启动服务器 我明白有一个conf
  • 使用 elm 并选择

    我尝试通过自定义示例来了解 elm 的工作原理 durationOption duration option value toString duration text toString duration view Model gt Html
  • 字符串到 HtmlDocument

    我使用 URL 通过 URL 获取 html 文档WebClient DownloadString url 但很难找到我正在寻找的元素内容 在阅读周围我发现HtmlDocument它有一些巧妙的东西 例如GetElementById 我怎样
  • Python 和 Apache mod_wsgi 中的全局变量

    我知道存在框架 但我尝试直接使用 wsgi 来提高我自己的理解 我有我的 wsgi 处理程序 在顶部我声明了一个变量i 0 In my application environ start response 函数 我声明global i 然后
  • 使用 Parse.com 中的云代码自动更新数据

    我正在寻找一种使用云代码自动更新数据的方法 假设我有课Table 在它里面 我有三列 firstname lastname and fullname 目前 我只有firstname and lastname仅数据 柱子fullname仍然是
  • XmlSerializer。跳过xml未知节点

    我的 xml 文件反序列化时遇到问题 让我们假设 我们有一个 xml 文件和一个用于反序列化的类 例如 xml
  • 如何检测.NET中的跨线程访问(强制线程关联)?

    我正在编写一种特殊的数据结构 该数据结构将在 NET 库中可用 该数据结构的特点之一是 如果只有一个线程向其写入数据 并且只有一个线程从中读取数据 那么它将是线程安全的它 读取器线程和写入器线程可以不同 问题是如何强制所有读取操作都由同一线
  • 如何使用 gradle kotlin-dsl 添加新的源集

    我想添加一个源集src gen java 对于groovy 这相当简单并且已经在https discuss gradle org t how to use gradle with generated sources 9401 5 https
  • C++11 随机分布由什么组成?

    我正在尝试实现以下课程 typedef std mt19937 Engine class Interval public double upperBoundary double lowerBoundary double generateUn
  • QLabel 不显示在 QWidget 中

    我的 Qt 应用程序中有以下层次结构 QMainWindow gt QWidget centralWidget gt QWidget 子类 gt QLabel 我的 QMainWindow 代码中的初始化代码 centralWidget n
  • 找不到图标react-fontawesome

    我有一个关于 React 的项目 我需要将 FontAwesome 集成到其中 我找到官方的library https github com FortAwesome react fontawesome并按照自述文件中的说明安装它 npm i