Reactで、FontAwesomeIconが表示されない

Question

前提・実現したいこと

Next.jsのポートフォリオを作っており、オブジェクトの要素をmapメソッドを使って、FontAwesomeIconを表示したい

発生している問題・エラーメッセージ

オブジェクトの要素をmapメソッドを使って、「Skill」という部分で、FontAwesomeIconや文字などを表示しようとしています。
他の要素は表示できたんですが、FontAwesomeIconだけうまく表示されません。
色々解決をしようとしたんですが、上手くいきませんでした。
小さなミスで申し訳ないですが、よろしくお願いします。

github
https://github.com/takoyan33/nextjs-portfolio
表示（下にスクロールして頂けると、SKill部分のFontAwesomeIconが表示されていません。）
https://nextjs-portfolio-puce.vercel.app/

該当のソースコード

//main.js
import Link from 'next/link';
import Image from 'next/image';
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faHtml5, faCss3, faReact, faJs, faWordpress  } from "@fortawesome/free-brands-svg-icons";
import { faGem } from "@fortawesome/free-regular-svg-icons";
import { faCamera} from "@fortawesome/free-solid-svg-icons";
import Portfolio from "./Portfolio.js"
import Skill from "./Skill.js

export default function Main() {

 const skills = [
    {
      skill_name: 'HTML',
      skill_rank: '★★★★',
      skill_tag: '経験年数：1年半',
      skill_icon: 'faHtml5'
    },
    {
      skill_name: 'CSS(SCSS)',
      skill_rank: '★★★★',
      skill_tag: '経験年数：1年半',
      skill_icon: 'faCss3'
    },
    {
      skill_name: 'JavaScript(jQuery)',
      skill_rank: '★★★',
      skill_tag: '経験年数：1年',
      skill_icon: 'faJs'
    },
    {
      skill_name: 'Ruby on Rails',
      skill_rank: '★★',
      skill_tag: '経験年数：4ヶ月',
      skill_icon: 'faGem'
    },
    {
      skill_name: 'React/Next.js',
      skill_rank: '★★★',
      skill_tag: '経験年数：6ヶ月',
      skill_icon: 'faReact'
    },
    {
      skill_name: 'WordPress',
      skill_rank: '★★★',
      skill_tag: '経験年数：1年',
      skill_icon: 'faWordpress'
    },
    {
      skill_name: 'PhotoShop/Illustrator',
      skill_rank: '★★★',
      skill_tag: '経験年数：1年半',
      skill_icon: 'faCamera'
    },
  ]

  return (

    { skills.map((skill,index) => 
<Skill 
 key={index}
  skill_name={skill.skill_name}
  skill_date={skill.skill_rank}
  skill_tag={skill.skill_tag}
  skill_icon={skill.skill_icon}
/>
))}

//Skill.js
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faHtml5, faCss3, faReact, faJs, faWordpress  } from "@fortawesome/free-brands-svg-icons";
import { faGem } from "@fortawesome/free-regular-svg-icons";
import { faCamera} from "@fortawesome/free-solid-svg-icons";

export default function Skill({skill_name, skill_rank, skill_tag, skill_icon}) {

return (
  <div className="flx_el">
  <p className="tac">
    <FontAwesomeIcon icon={{skill_icon}} className="size" />
  </p>
<p className="code_title">{skill_name} </p>
<p className="code_title">{skill_rank }</p>
<p className="code_title">{skill_tag}</p>        

</div>

)

補足情報（FW/ツールのバージョンなど）

{
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.36",
    "@fortawesome/free-brands-svg-icons": "^5.15.4",
    "@fortawesome/free-regular-svg-icons": "^5.15.4",
    "@fortawesome/free-solid-svg-icons": "^5.15.4",
    "@fortawesome/react-fontawesome": "^0.1.16",
    "date-fns": "^2.11.1",
    "gray-matter": "^4.0.2",
    "next": "latest",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "remark": "^14.0.1",
    "remark-html": "^15.0.0"
  }
}

Answer 1

icon={{skill_icon}} と書くと、{skill_icon: アイコン名}という形のオブジェクトを渡す意味になってしまいます。

中括弧を一重にしてみましょう。

Comments

[takoyan]

回答ありがとうございます。
今githubとvercelを更新したんですが、中括弧を一重にしても表示されません。

skill_iconの文字は表示できるんですが、上手くできないという感じです。

[maisumakun]

アイコンを名前指定する場合、「faFooBar」形式ではなく、「foo-bar」とするのが正しいようです。

https://fontawesome.com/v5.15/how-to-use/on-the-web/using-with/react

それか、文字列ではなくimportしたオブジェクトそのものを渡すほうが適当、ということも考えられます。

[takoyan]

回答ありがとうございます。
文字列ではなくimportしたオブジェクトそのものを渡すというのはどのような手順で行えば良いでしょうか。よろしくお願いします。

[maisumakun]

skill_iconに文字列でなく、faJsのような変数をそのまま書いてください。

[takoyan]

返信して頂きありがとうございます。

変数のような書き方をしたら解決できました。
とても勉強になりました。ありがとうございます。