如何将社交媒体图标添加到反应组件？

Question

我使用.jsx文件创建了Card 组件并加载到.js文件中。它正在发挥作用。这里我想知道，如何在卡片上添加社交媒体图标？

这是一个新的React项目，希望运行mongodb。我尝试过使用这个

npm install -g bower
bower install bootstrap-social.

但没有成功。

const Card = props=>{
    return(

      <div className="card text-center shadow">
          <div className="overflow">
              <img src={props.imgsrc} alt='image 1' className="card-img-top" />
          </div>
          <div className="card-body text-dark">
              <h4 className="card-title">{props.title} </h4>
              <p className="card-text text-secondary">
                  Lorem ipsum dolor sit amet consectetur, 
              </p>
              **<a href="#" className="btn btn-outline-success">Go Anywhere</a>**
          </div>
      </div>  
    );

};

我希望将上面的“Go Anywhere”按钮更改为 Twitter 按钮。并将 Facebook、Instagram 等其他按钮放在同一行。

Answer 1

你可以使用 React Icons 它由一堆来自很棒的字体、材料设计等的图标组成

npm install react-icons

       OR

yarn add react-icons

然后导入您最喜欢的图标，例如

import {FaTwitter} from 'react-icons/fa'

您可以在以下位置浏览一堆多个图标：

https://react-icons.github.io/react-icons/