MUI有Tiktok图标吗？

Question

我正在尝试添加社交媒体图标到我的反应网站，我已经找到了Facebook，Instagram，Youtube和Twitter的图标。但我不能添加TikTok的标志。

MUI反应的物质图标目录(请参阅这里)似乎没有TikTok图标，但是这个网站似乎引用了其中的一个。

但是，当试图导入图标时，它表示它不存在。下面是我的代码示例：

import { Instagram, TiktokIcon, Facebook, YouTube, Twitter } from "@mui/icons-material"


    export const socialMediaLinks = [
    {
        platform: 'Instagram',
        link: '',
        icon: <Instagram/>
    },
    {
        platform: 'Tiktok',
        link: '',
        icon: <TiktokIcon/>
    },
    {
        platform: 'Facebook',
        link: '',
        icon: <Facebook/>
    },
    {
        platform: 'Youtube',
        link: '',
        icon: <YouTube/>
    },
    {
        platform: 'Twitter',
        link: '',
        icon: <Twitter/>
    }
]

{socialMediaLinks.map((social) => (
                <a href={social.link}>
                  <Icon>
                    {social.icon}
                  </Icon>
                </a>
              ))}

在这段代码中，除了TikTok图标之外，所有其他图标都会出现。

是否有一种方法可以直接从MUI图标进行此操作，还是必须从其他地方导入TikTok图标？我并不特别想这样做，因为这会使格式保持一致变得更加困难。

Answer 1

MUI目前不包括TikTok标志。但你可以从外部创造。

创建TiktokIcon组件

 const TikTokIcon = ({ color = "#000000" }) => {
  return (
    <svg
      fill={color}
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 50 50"
      width="100%"
      height="100%"
    >
      <path d="M41,4H9C6.243,4,4,6.243,4,9v32c0,2.757,2.243,5,5,5h32c2.757,0,5-2.243,5-5V9C46,6.243,43.757,4,41,4z M37.006,22.323 c-0.227,0.021-0.457,0.035-0.69,0.035c-2.623,0-4.928-1.349-6.269-3.388c0,5.349,0,11.435,0,11.537c0,4.709-3.818,8.527-8.527,8.527 s-8.527-3.818-8.527-8.527s3.818-8.527,8.527-8.527c0.178,0,0.352,0.016,0.527,0.027v4.202c-0.175-0.021-0.347-0.053-0.527-0.053 c-2.404,0-4.352,1.948-4.352,4.352s1.948,4.352,4.352,4.352s4.527-1.894,4.527-4.298c0-0.095,0.042-19.594,0.042-19.594h4.016 c0.378,3.591,3.277,6.425,6.901,6.685V22.323z" />
    </svg>
  );
};

将其添加到项目中

const App = () => {
  return (
    <div>
      <div style={{ width: "40px" }}>
        <TikTokIcon />
      </div>
      <div style={{ width: "80px" }}>
        <TikTokIcon color="red" />
      </div>
      <div style={{ width: "120px" }}>
        <TikTokIcon color="blue" />
      </div>
    </div>
  );
};

你可以试试这。

Answer 2

不幸的是，与其他社交媒体应用程序一样，tiktok应用程序的图标在MUI中不可用。