reactjs - @material-ui/icons 中图标的替代方案

Question

我正在做一个React Js组合网站。在那里，我利用 'material-ui' 库来设置样式和图标。

在下面的代码中，我从 material-ui-icons 导入了 Facebook、GitHub 和 LinkedIn 图标。最初我认为 material-ui 是一个很好的库并开始使用它。现在我才知道该库没有“堆栈溢出”和“Hackerrank”图标。

我对 ReactJs 也很陌生。因此现在我陷入了这个水平，不知道如何导入Stack Overflow和Hackerrank的图标。有谁知道最好和最简单的方法来做到这一点？ (同时从material-ui-icons导入Facebook、GitHub和LinkedIn图标，并以其他方式导入其他两个图标以使用它们。

以下是我迄今为止开发的代码。 (我在那里导入并使用了来自 material-ui-icons 的图标)

import React from 'react';
import {makeStyles} from "@material-ui/styles";
import {BottomNavigation, BottomNavigationAction} from "@material-ui/core";
import LinkedIn from "@material-ui/icons/LinkedIn";
import GitHub from "@material-ui/icons/GitHub";
import Facebook from "@material-ui/icons/Facebook";

const useStyles = makeStyles({
    root: {
        "& .MuiBottomNavigationAction-root": {
            minWdith: 0,
            maxWidth: 250
        }
    }
})

const Footer = () => {

    const classes = useStyles();

    return (
        <BottomNavigation
            width="auto"
            style={{background: "#222"}}
            >
            <BottomNavigationAction
                className={classes.root}
                style={{padding:0}}
                icon={<LinkedIn/>}>
            </BottomNavigationAction>
            <BottomNavigationAction
                className={classes.root}
                style={{padding:0}}
                icon={<GitHub/>}>
            </BottomNavigationAction>
            <BottomNavigationAction
                className={classes.root}
                style={{padding:0}}
                icon={<Facebook/>}>
            </BottomNavigationAction>
        </BottomNavigation>
    )
}

export default Footer;

非常感谢!

Answer 1

您还可以使用 <SvgIcon> 定义自定义图标来自@material-ui核心

import SvgIcon from "@material-ui/core/SvgIcon";

const StackOverflowIcon = (
  <SvgIcon fontSize="small">
    <path d="M15 21h-10v-2h10v2zm6-11.665l-1.621-9.335-1.993.346 1.62 9.335 1.994-.346zm-5.964 6.937l-9.746-.975-.186 2.016 9.755.879.177-1.92zm.538-2.587l-9.276-2.608-.526 1.954 9.306 2.5.496-1.846zm1.204-2.413l-8.297-4.864-1.029 1.743 8.298 4.865 1.028-1.744zm1.866-1.467l-5.339-7.829-1.672 1.14 5.339 7.829 1.672-1.14zm-2.644 4.195v8h-12v-8h-2v10h16v-10h-2z" />
  </SvgIcon>
);

const HackerRankIcon = (
  <SvgIcon>
    <path d="M12 0c1.285 0 9.75 4.886 10.392 6 .645 1.115.645 10.885 0 12S13.287 24 12 24s-9.75-4.885-10.395-6c-.641-1.115-.641-10.885 0-12C2.25 4.886 10.715 0 12 0zm2.295 6.799c-.141 0-.258.115-.258.258v3.875H9.963V6.908h.701c.141 0 .254-.115.254-.258 0-.094-.049-.176-.123-.221L9.223 4.92c-.049-.063-.141-.109-.226-.109-.084 0-.16.045-.207.107L7.11 6.43c-.072.045-.12.126-.12.218 0 .143.113.258.255.258h.704l.008 10.035c0 .145.111.258.254.258h1.492c.142 0 .259-.115.259-.256v-4.004h4.073v4.152h-.699c-.143 0-.256.115-.256.258 0 .092.048.174.119.219l1.579 1.51c.044.061.141.109.225.109.085 0 .159-.045.208-.109l1.679-1.51c.072-.045.12-.127.12-.219 0-.143-.115-.258-.255-.258h-.704l-.007-10.034c0-.145-.114-.26-.255-.26h-1.494v.002z" />
  </SvgIcon>
);


//Usage can be 

<BottomNavigationAction
        className={classes.root}
        style={{padding: 0}}
        icon={StackOverflowIcon}
></BottomNavigationAction>
<BottomNavigationAction
        className={classes.root}
        style={{padding: 0}}
        icon={HackerRankIcon}
></BottomNavigationAction>