我为图标使用 mdi-react 包但是当它与 scss 结合时 "font-size" 属性 不起作用

Question

我正在使用 mdi-react 包并将其与 scss 结合来定义一些样式，但 font-size 属性不起作用。 其他一切（如颜色 属性）都正常。

我在网上搜索了很多，但找不到解决方案，所以最后决定把我的第一个问题写在 Whosebug 上。

而且我知道我可以在图标组件本身中使用 size="8rem" 但由于某些原因我不想这样做。

这是我的 Home.js 文件：

import React from 'react';
import { Helmet } from 'react-helmet';
import CubeOutlineIcon from 'mdi-react/CubeOutlineIcon';
import { Link } from 'react-router-dom';

const home = () => (
    <>
        <Helmet><title>Quiz App - Home</title></Helmet>
        <div id="home">
            <section>
                <div>
                    <CubeOutlineIcon className="cube" />
                </div>
                <h1>Quiz App</h1>
                <div className="play-button-container">
                    <ul>
                        <li><Link to="/play/instructions">Play</Link></li>
                    </ul>
                </div>
                <div className="auth-container">
                    <Link to="/login">Login</Link>
                    <Link to="/register">Register</Link>
                </div>
            </section>
        </div>
    </>
);


export default home;

这是我的 home.scss 文件：

#home {
background-image: url('../../assets/img/bg1.jpg');
background-size: cover;
background-position: center;
display: flex;
justify-content: space-around;
height: 100vh;

section {
    background-color: rgba($color: #000000, $alpha: 0.7);
    padding: $normal $md;
    height: 80%;
    width: 35%;
}

.cube {
    font-size: 8rem;  //Not working
    color: $orange;
}
}

Answer 1

根据文档，要更改图标的大小，您应该使用大小 属性。

检查以下内容link：

https://github.com/levrik/mdi-react#usage

Answer 2

那是因为 .cube 实际上分配给了 SVG 元素，这将需要您使用高度和宽度来更改它的大小。因此字体无法正常工作。

（我假设您认为它是一个字体图标，因为 color 属性 已应用于它，但它确实如此，因为 fill 是设置为 currentColor，它使用当前的文本颜色。）