@material-ui/icons 中图标的替代品答案

【问题标题】：Alternatives for Icons in @material-ui/icons@material-ui/icons 中图标的替代品
【发布时间】：2021-05-09 09:12:27
【问题描述】：

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

在以下代码中，我从material-ui-icons 导入了 Facebook、GitHub 和 LinkedIn 图标。最初我认为material-ui 是一个很好的库并开始使用它。现在只有我知道该库没有 'Stack overflow' 和 '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;

非常感谢！

【问题讨论】：

你可以在 React 中使用Font Awesome Icons。 Stackoverflow, Hackerrank 图标有很棒的字体。

标签： reactjs material-ui icons

【解决方案1】：

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

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>

【讨论】：

【解决方案2】：

你可以使用 fontawesome 图标首先安装 NPM 包 @fortawesome/react-fontawesome

对于品牌图标，您需要安装 @fortawesome/free-brands-svg-icons 软件包

您可以使用的其他免费图标包：

@fortawesome/free-regular-svg-icons
@fortawesome/fontawesome-svg-core
@fortawesome/free-solid-svg-icons

如何在 React 项目中使用字体： https://fontawesome.com/how-to-use/on-the-web/using-with/react

找到你的图标： https://fontawesome.com/icons?d=gallery&p=2&m=free

【讨论】：