已下载fontawesome-pro-5.7.2,如何在React项目中使用其专业版图标?
React项目使用已下载的Font Awesome Pro 5.7.2 操作步骤
- 第一步:定位核心依赖目录
你解压后的安装包中,仅需要/js-packages目录下的文件即可完成React项目接入,其他web字体、css目录属于静态引用场景使用,无需关注。 - 第二步:本地安装依赖包
进入你的React项目根目录,执行安装命令,将你需要用到的依赖包从本地解压路径安装:npm install 【svg-core包路径】 【react-fontawesome包路径】 【对应风格图标包路径】
示例(把路径替换为你本地实际的文件绝对路径即可):npm install /Users/xxx/Downloads/fontawesome-pro-5.7.2/js-packages/fortawesome__fontawesome-svg-core /Users/xxx/Downloads/fontawesome-pro-5.7.2/js-packages/fortawesome__react-fontawesome /Users/xxx/Downloads/fontawesome-pro-5.7.2/js-packages/fortawesome__pro-regular-svg-icons /Users/xxx/Downloads/fontawesome-pro-5.7.2/js-packages/fortawesome__pro-light-svg-icons
如果安装时报版本冲突错误,可在命令末尾加--force参数强制安装。 - 第三步:项目内调用图标
在需要使用图标的组件或者全局入口文件中引入相关依赖即可使用,示例代码:
// 引入基础组件 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' // 引入你需要的具体图标 import { faUser } from '@fortawesome/pro-regular-svg-icons' function DemoComponent() { return ( // 组件内直接调用 <FontAwesomeIcon icon={faUser} size="lg" /> ) }
小提示:如果项目内图标使用量大,可以通过library全局注册所有需要的图标,后续组件调用时直接传图标名字符串即可,无需反复引入单个图标
内容的提问来源于stack exchange,提问作者Argha Shipan Sarker
相关产品推荐
相关产品推荐

