包含谷歌材料设计图标的语法是正确的？

Posted 2023-02-22

【中文标题】包含谷歌材料设计图标的语法是正确的？

【英文标题】：Which syntax is correct for including google material design icons?

【发布时间】：2021-03-15 07:43:12

【问题描述】：

我正在尝试在我的一个反应组件中添加谷歌材料设计图标。

以下是sn-p的代码

const socialMedia = (
    <div className="columns is-centered footer-colmns sub-footer">
      <div className="column is-one-quarter">
        
        <h1>Wir sind auf diesen Kanälen vertreten</h1>
        
        <span>
          "Youtube Icon",
          /MenuIcon,
          " | "
        </span>
          
        
        <span>
          "Facebook Icon",
          " | "
        </span>
        
        <span>
        <span>
          "XING Icon",
          " | "
        </span>
        </span>
      </div>
      </div>
  );

【参考方案1】：

图标不用写成卷曲的..写成标签就好了

<YouTube/>
<Facebook/>
<XING/>

祝你好运..

注意：请不要忘记安装和导入素材 UI 图标库

【参考方案2】：

尝试安装以下软件包：

// with npm
npm install @material-ui/icons

// with yarn
yarn add @material-ui/icons

然后导入图标：

import  Facebook, YouTube  from '@material-ui/icons';

接下来，替换以下代码行

    <span>
      "Youtube Icon",
      /MenuIcon,
      " | "
    </span>

与

    <span>
      <YouTube/>,
      ... //rest of the icons
    </span>

以类似的方式替换其余部分