所以,这可能是我缺乏理解。当我离开这一行时,我遇到了一个错误(见下文)。
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { solid } from '@fortawesome/fontawesome-svg-core/import.macro' <<<<===== THIS LINE IS CAUSING ERROR BELOW
错误是:-
./node_modules/@fortawesome/fontawesome-svg-core/import。404 Not Found Not Found无法解析“C:\Dropbox\Trusted\Modern React BootCamp\12中的“@babel/helper-module-imports”。练习- Yahtzee\node_modules@fortawesome\fontawesome-svg-core'
包裹里。我安装了json:-
{
"name": "yahtzee",
"version": "0.1.0",
"private": true,
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^6.2.0",
"@fortawesome/free-regular-svg-icons": "^6.2.0",
"@fortawesome/free-solid-svg-icons": "^6.2.0",
"@fortawesome/react-fontawesome": "^0.2.0",
"react": "^16.4.1",
"react-dom": "^16.4.1",
"react-scripts": "1.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"devDependencies": {
"enzyme": "^3.8.0",
"enzyme-adapter-react-16": "^1.7.1",
"enzyme-to-json": "^3.3.5"
}
}
只是想让这条线工作。
<FontAwesomeIcon icon={solid('user-secret')} />
因此,我可以在React中重新编写这段代码(如果我慷慨的话,我的react是一个正在进行的工作)。
<FontAwesomeIcon
className="fa-1x"
icon={
val === 1 ? faDice1 :
val === 2 ? faDice2 :
val === 3 ? faDice3 :
val === 4 ? faDice4 :
val === 5 ? faDice5 :
val === 6 ? faDice6 :
null}
/>;
大致变成这样:-
<FontAwesomeIcon icon={solid(`faDice${val}`)} />
我已经努力了,我真的应该离开它,但它是一个燃烧的痒:)
编辑:所以,安装说明来自FontAwesome。我还在根目录下创建了这两个配置文件。
// Babel-plugin-macros.config.js
module.exports = {
'fontawesome-svg-core': {
'license': 'free'
}
}
和
// babel.config.js
module.exports = function (api) {
return {
plugins: ['macros'],
}
}
我试过密码了
<FontAwesomeIcon icon="fa-solid fa-dice-one" />
然而,它并没有向svg呈现以下行游戏我。
<FontAwesomeIcon icon=faDiceOne />
2条答案
按热度按时间rryofs0p1#
背景
我在这个Sandbox中复制了这个问题
我得到了这个错误。
/src/App.js:@fortawesome/fontawesome-svg-core/import。macro:config许可证必须是'free'或'pro'了解更多:https://www.npmjs.com/package/@fortawesome/fontawesome-svg-core
错误与
free
或pro
计划有关。我们正在使用一个免费的计划,正如我所看到的,你是按照教程;它也可能是一个免费计划。(在线教程在课程中使用free
版本)我们可以访问solid()函数,但是模块中没有solid函数。
简单地说,solid函数定义(typescript定义)被导出,但函数没有(主要是因为这个函数在最新版本中被删除了)。
查看官方源代码。在文件导入中键入exported。macro.d.ts但是模块中缺少solid函数。(查看左侧的浏览器)
为了支持这个。代码中有一条注解说
//与旧样式名称对应的宏:纯色()、普通色()、浅色()、薄型()、双色调()、品牌()。
在官方源代码导入中检查此。macro.js
上述问题可能是由于您和讲师之间Fontawesome版本的差异而发生的(这是一个常见问题,因为每次发布的新版本都无法重新录制视频。)
解决方案
这就是如何在Font-Awesome React中实现骰子
要将icon作为变量传递,可以这样做
cigdeys32#
运行npm install --保存@babel/helper-module-imports
这对我很有效。.