React TS - 如何映射 FontAwesome 图标并显示它们

Question

I'm trying to create a reusable component that allows me to pass in the href , target , rel attributes along with the type of FontAwesome Icon I would like to use. I'd like to be able to pass as many icons as I would like into this list and it would map through them, using the Social component as a template.

I would like the map to happen within the Social.tsx file, then I can simply just add the component anywhere in my project and then pass the props to it.

Something like this:

<Social
  icons={[
    { icon: "facebook", href: "", target: "", rel: "" },
    { icon: "twitter", href: "", target: "", rel: "" },
    { icon: "discord", href: "", target: "", rel: "" }
  ]}
/>

I currently have my component:

Social.tsx

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import * as React from "react";

interface ISocial {
  href?: string
  target?: string
  rel?: string
}

const Social: React.FC<ISocial> = (props) => {
  return (
    <div>
      <a href={props.href} target={props.target} rel={props.rel}>
        {/* I don't want to hardcode the icon, but dynamically pass it as a prop */}
        <FontAwesomeIcon icon={["fab", "discord"]} />
      </a>
    </div>
  );
};

export default Social;

App.tsx

import * as React from "react";
import "./styles.css";
import Social from "./components/Social";

export default function App() {
  // I'd like to be able to pass in a list of different icons
  // followed by the href, target, rel, etc for each item.
  // The Social component would be able to map through them
  // and display them.
  return <Social />;

How can I adapt this to do what I described above?

Here's a CodeSandBox

Thanks for any help in advance!

Answer 1

So, I think the problem is with structuring the props that you want to pass.

For instance, we will pass an array of type IconProp then you can easily map over it.

Now you can make your own interface and pass props of this type

interface myType {
  href?: string;
  target?: string;
  rel?: string;
  icon: IconProp;
}
const dummyProp: myType[] = [
  { icon: ["fab", "discord"] },
  { icon: ["fab", "discord"] },
  { icon: ["fab", "discord"] },
  { icon: ["fab", "discord"] }
];

const Social: React.FC<ISocial> = props => {
  return (
    <div>
      {dummyProp.map(p => (
        <a href={p.href} target={p.target} rel={p.rel}>
          <FontAwesomeIcon icon={p.icon} />
        </a>
      ))}
    </div>
  );

Answer 2

Have a list of strings with icon names and use map if required to have list.

export default function App() {
  return (
    <Social
      icons={[
        { icon: "facebook", href: "", target: "", rel: "" },
        { icon: "twitter", href: "", target: "", rel: "" },
        { icon: "discord", href: "", target: "", rel: "" }
      ]}
    />
  );
}

Changes to Social Component. Just add new prop like name

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import * as React from "react";
import { IconName } from "@fortawesome/fontawesome-svg-core";

interface ISocial {
  href?: string;
  target?: string;
  rel?: string;
  icon: IconName;
}

interface ISocialList {
  icons: Array<ISocial>;
}

const Social: React.FC<ISocialList> = props => {
  const { icons } = props;
  return (
    <div>
      {icons.map(item => {
        return (
          <a href={item.href} target={item.target} rel={item.rel}>
            <FontAwesomeIcon icon={["fab", item.icon]} />
          </a>
        );
      })}
    </div>
  );
};

export default Social;

Code changes to your sandbox https://codesandbox.io/s/headless-bush-br14l

Answer 3

 //App.tsx import * as React from "react"; import "./styles.css"; import Social from "./components/Social"; export default function App() { // I'd like to be able to pass in a list of different icons // followed by the href, target, rel, etc for each one. // The Social component would be able to map through them // and display them. const iconList = [ { name: "twitter", href: "https://www.google.com", target: "_blank" }, { name: "discord", href: "https://www.google.com", target: "_blank" } ]; return ( <div> {iconList.map(ico => { return <Social icon={ico.name} href={ico.href} />; })} </div> ); } //Social.tsx import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import * as React from "react"; interface ISocial { href?: string; target?: string; rel?: string; icon: String; } const Social: React.FC<ISocial> = props => { return ( <div> <a href={props.href} target={props.target} rel={props.rel}> <FontAwesomeIcon icon={["fab", props.icon]} /> </a> </div> ); }; export default Social;