尽管 css 相同，但 Reactjs SVG 图标大小不同

Question

这是我第一次使用reactjs构建网站。 我一直在使用 React 图标库中的 ReactJS 图标。当这些图标在网站的同一部分重复时，其大小会有所不同。附上照片供您参考'。 我使用检查进行了检查。表明 对于较小的图标，它的路径为 9.97x9.97，但对于正常显示的图标，它的路径为 14x14。不确定路径意味着什么，我也不清楚为什么图标大小不同

JSX 代码是（示例）

import React from 'react'
import './exp.css'
import { AiOutlineCheckCircle } from 'react-icons/ai'

const Exp = () => {
  return (
    <section id='exp'>
      <h5>Skills & Qualifications</h5>
      <h2>My Experience</h2>
      <div className="container exp__container">
        <div className="exp_english">
          <h3>English Literature</h3>
          <div className="exp__content">
            <article className='exp__details'><AiOutlineCheckCircle className='exp__details-icons'/>
              <div>
                <h4>Shakespearian Literature</h4>
              <small className='text-light'>Mastered</small>
              </div>
            </article>
            <article className='exp__details'><AiOutlineCheckCircle className='exp__details-icons'/>
              <div>
              <h4>American Literature</h4>
              <small className='text-light'>Mastered</small>
              </div>
            </article>
            <article className='exp__details'><AiOutlineCheckCircle className='exp__details-icons'/>
              <div>
              <h4>Oxford Grammer</h4>
              <small className='text-light'>Mastered</small>
              </div>
            </article>
            <article className='exp__details'><AiOutlineCheckCircle className='exp__details-icons'/>
             <div>
             <h4>Poetry Writing</h4>
              <small className='text-light'>Mastered</small>
             </div>
            </article>
            <article className='exp__details'><AiOutlineCheckCircle className='exp__details-icons'/>
              <div>
              <h4>Critical Analysis</h4>
              <small className='text-light'>Mastered</small>
              </div>
            </article>
          </div>
        </div>
        

{/* END OF ENGLISH LITERATURE */} 
        <div className="exp_pyschology">
        <h3>Pyschology</h3>
          <div className="exp__content">
            <article className='exp__details'><AiOutlineCheckCircle className='exp__details-icons'/>
              <div>
              <h4>Counselling</h4>
              <small className='text-light'>Mastered</small>
              </div>
            </article>
            <article className='exp__details'><AiOutlineCheckCircle className='exp__details-icons'/>
              <div>
              <h4>Coaching</h4>
              <small className='text-light'>Mastered</small>
              </div>
            </article>
            <article className='exp__details'><AiOutlineCheckCircle className='exp__details-icons'/>
              <div>
              <h4>Research</h4>
              <small className='text-light'>Mastered</small>
              </div>
            </article>
            <article className='exp__details'><AiOutlineCheckCircle className='exp__details-icons'/>
              <div>
              <h4>Advisory</h4>
              <small className='text-light'>Mastered</small>
              </div>
            </article>
            <article className='exp__details'><AiOutlineCheckCircle className='exp__details-icons'/>
              <div>
              <h4>Teaching</h4>
              <small className='text-light'>Mastered</small>
              </div>
            </article>
          </div>
        </div>
      </div>
    </section >
  )
}

export default Exp

.exp__container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap:2rem;
}

.exp__container > div {
    background-color: var(--color-blueish-pink);
    padding: 2.4rem 4rem;
    border-radius: 2rem;
    border: 1px solid transparent;
    transition: var(--transition);

}

.exp__container > div:hover {
    background-color: var(--color-bluegreen-transparent);
}

.exp__container > div h3 {
    text-align: center;
    margin-bottom: 2rem;
}

.exp__content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    row-gap: 2rem;
}

.exp__details {
    display: flex;
    gap: 1rem;
}

.exp__details-icons {
    margin: 0.8rem;
    color: var(--color-gray);
    font-size: 1rem;

    

}

/* ================ MEDIA QUERIES (MEDIUM DEVICES) ============================== */
@media screen and (max-width:1024px) {
    .exp__container {
        grid-template-columns: 1fr;
    }

    .exp__container > div {
        width: 80%;
        padding:2rem;
        margin:0 auto;
    }

    .exp__content {
        padding:1rem;
    }
}

/* ================ MEDIA QUERIES (SMALL DEVICES) ============================== */
@media screen and (max-width:600px) {
    .exp__container {
        gap: 1rem;
    }

    .exp__container > div {
        width: 100%;
        padding: 2rem 1rem;
        margin:1rem;
    }
}

检查图像中的第一个图标，它看起来完全不同步

Answer 1

这是由 Flex 引起的。用 div 包裹图标或将 flex-shrink: 0 添加到 .exp__details-icons 类。

    

        
    
    

        
Shakespearian Literature
        Mastered