Я использую пакет mdi-react для значков, но при объединении его с s css свойство "font-size" не работает.

Question

Я использую пакет mdi-react и комбинирую его с s css для определения некоторых стилей, но свойство font-size не работает. Все остальное (например, свойство цвета) работает.

Я искал его по всему inte rnet, но не нашел решения, поэтому, наконец, решил написать свой первый вопрос о stackoverflow.

И я знаю, что могу просто использовать size = "8rem" в самом компоненте значка, но я не хочу этого делать по некоторым причинам.

Вот мой Home. js file:

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;

Вот мой дом. S css файл:

#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

Это потому, что .cube фактически назначен элементу SVG, и для изменения его размера вам потребуется использовать высоту и ширину. Таким образом, шрифт не будет работать.

(Я предполагаю, что вы считали его значком шрифта или около того, поскольку к нему было применено свойство color, но так оно и было, потому что fill устанавливается как currentColor, который использует текущий цвет текста.)

Answer 2

Согласно документам, чтобы изменить размер значка, вы должны использовать свойство size.

Проверьте следующую ссылку:

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