MUI 有 Tiktok 图标吗？

Question

我正在尝试动态地将社交媒体图标添加到我的 React 网站，并且我找到了 Facebook、Instagram、Youtube 和 Twitter 的图标。但我无法添加 TikTok 徽标。

MUI React Material 图标目录（请参阅此处）似乎没有 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>
  );
};

你可以试试这个。