te')); return $arr; } /* 遍历用户所有主题 * @param $uid 用户ID * @param int $page 页数 * @param int $pagesize 每页记录条数 * @param bool $desc 排序方式 TRUE降序 FALSE升序 * @param string $key 返回的数组用那一列的值作为 key * @param array $col 查询哪些列 */ function thread_tid_find_by_uid($uid, $page = 1, $pagesize = 1000, $desc = TRUE, $key = 'tid', $col = array()) { if (empty($uid)) return array(); $orderby = TRUE == $desc ? -1 : 1; $arr = thread_tid__find($cond = array('uid' => $uid), array('tid' => $orderby), $page, $pagesize, $key, $col); return $arr; } // 遍历栏目下tid 支持数组 $fid = array(1,2,3) function thread_tid_find_by_fid($fid, $page = 1, $pagesize = 1000, $desc = TRUE) { if (empty($fid)) return array(); $orderby = TRUE == $desc ? -1 : 1; $arr = thread_tid__find($cond = array('fid' => $fid), array('tid' => $orderby), $page, $pagesize, 'tid', array('tid', 'verify_date')); return $arr; } function thread_tid_delete($tid) { if (empty($tid)) return FALSE; $r = thread_tid__delete(array('tid' => $tid)); return $r; } function thread_tid_count() { $n = thread_tid__count(); return $n; } // 统计用户主题数 大数量下严谨使用非主键统计 function thread_uid_count($uid) { $n = thread_tid__count(array('uid' => $uid)); return $n; } // 统计栏目主题数 大数量下严谨使用非主键统计 function thread_fid_count($fid) { $n = thread_tid__count(array('fid' => $fid)); return $n; } ?>javascript - Font Awesome 5 icons not working with React ("Could not find icon" error) - Stack Overflow

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

    最新消息：雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客
    你的位置： 首页>programmer>javascript - Font Awesome 5 icons not working with React ("Could not find icon" error) - Stack Overflow

    javascript - Font Awesome 5 icons not working with React ("Could not find icon" error) - Stack Overflow

    programmeradmin3浏览0评论

    I'm trying to use Font Awesome 5 Pro (I have a license) in my React project, and I've followed the instructions in the API to the best of my ability, but I'm still having issues.

    In my project, I used npm to install fontawesome, fontawesome-mon-types, fontawesome-pro-light, fontawesome-pro-regular, fontawesome-pro-solid, and react-fontawesome. All those folders are in my node_modules/@fortawesome/ directory

    In my App.js, I have these imports (this isn't the whole file, just the relevant snippets):

    import fontawesome from '@fortawesome/fontawesome';
import FontAwesomeIcon from '@fortawesome/react-fontawesome';
import {faSpinnerThird, faCircle} from '@fortawesome/fontawesome-pro-regular/';

fontawesome.library.add(faSpinnerThird, faCircle);

    Then I have another ponent, Spinner.js, with this code:

    import React from 'react';
import FontAwesomeIcon from '@fortawesome/react-fontawesome';

const spinner = () => (
    <div className="fa-layers fa-fw">
        <FontAwesomeIcon icon="circle" color="#ddd" />
        <FontAwesomeIcon icon="spinner-third" color="#aaa" spin />
    </div>
);

export default spinner;

    In another ponent, I'm importing the Spinner ponent and rendering it conditionally, but when it gets rendered, I get these errors in my browser console:

    Could not find icon
Object { prefix: "fas", iconName: "circle" }

Could not find icon
Object { prefix: "fas", iconName: "spinner-third" }

    I'm pretty new to React, but I think I've followed the instructions in FontAwesome's React API correctly. Any idea where I might be going wrong?

    I'm trying to use Font Awesome 5 Pro (I have a license) in my React project, and I've followed the instructions in the API to the best of my ability, but I'm still having issues.

    In my project, I used npm to install fontawesome, fontawesome-mon-types, fontawesome-pro-light, fontawesome-pro-regular, fontawesome-pro-solid, and react-fontawesome. All those folders are in my node_modules/@fortawesome/ directory

    In my App.js, I have these imports (this isn't the whole file, just the relevant snippets):

    import fontawesome from '@fortawesome/fontawesome';
import FontAwesomeIcon from '@fortawesome/react-fontawesome';
import {faSpinnerThird, faCircle} from '@fortawesome/fontawesome-pro-regular/';

fontawesome.library.add(faSpinnerThird, faCircle);

    Then I have another ponent, Spinner.js, with this code:

    import React from 'react';
import FontAwesomeIcon from '@fortawesome/react-fontawesome';

const spinner = () => (
    <div className="fa-layers fa-fw">
        <FontAwesomeIcon icon="circle" color="#ddd" />
        <FontAwesomeIcon icon="spinner-third" color="#aaa" spin />
    </div>
);

export default spinner;

    In another ponent, I'm importing the Spinner ponent and rendering it conditionally, but when it gets rendered, I get these errors in my browser console:

    Could not find icon
Object { prefix: "fas", iconName: "circle" }

Could not find icon
Object { prefix: "fas", iconName: "spinner-third" }

    I'm pretty new to React, but I think I've followed the instructions in FontAwesome's React API correctly. Any idea where I might be going wrong?

    • javascript
    • reactjs
    • font-awesome
    Share Improve this question asked Apr 30, 2018 at 19:51 dannymcgeedannymcgee 6732 gold badges10 silver badges16 bronze badges
    Add a ment  | 

    3 Answers 3

    Reset to default 8

    I think the problem is becuase by default the prefix is fas (Font Awesome Solid) so in the case of:

    <FontAwesomeIcon icon="circle" color="#ddd" />

    it is looking for the circle icon in the fas, however, you want to use the faCircle from fontawesome-pro-regular 

    import {faSpinnerThird, faCircle} from '@fortawesome/fontawesome-pro-regular/';

    So I think you want to write something like 

    <FontAwesomeIcon icon={["far", "circle"]} color="#ddd" />

    Also if you dont know what the prefix of is of the library you can do

    fontawesome.icon(faPlus).abstract

    which will give you an object like: 

    [{
"tag": "svg",
"attributes": {
  "data-prefix": "fa",
  "data-icon": "user",
  "class": "svg-inline--fa fa-user fa-w-16",
  "role": "img",
  "xmlns": "http://www.w3/2000/svg",
  "viewBox": "0 0 512 512"
},
"children": [
  {
    "tag": "path",
    "attributes": {
      "fill": "currentColor",
      "d": "M96…112z"
    }
  }
]
}]

    https://fontawesome./how-to-use/font-awesome-api

    I figured it out!

    By default the FontAwesomeIcon ponent uses the "fas" prefix (for Font Awesome Solid). You can see that in the error code I posted above. However, I was trying to load the Regular weight, from the /font-awesome-pro-regular/ directory.

    I changed the FontAwesomeIcon ponents to use the correct prefix, like this:

    <FontAwesomeIcon icon={["far", "circle"]} color="#ddd" />

    And now it works as expected.

    Change your App.js to include each icon individually, I believe you might be deconstructing the Icon object.

    import fontawesome from '@fortawesome/fontawesome';
import FontAwesomeIcon from '@fortawesome/react-fontawesome';
import faSpinnerThird from '@fortawesome/fontawesome-pro-regular/faSpinnerThird';
import faCircle from '@fortawesome/fontawesome-pro-regular/faCircle';

fontawesome.library.add(faSpinnerThird, faCircle);

    This is per the API suggestion here: https://www.npmjs./package/@fortawesome/react-fontawesome#build-a-library-to-reference-icons-throughout-your-app-more-conveniently

    与本文相关的文章

    发布评论

    评论列表(0)

    1. 暂无评论