儘管 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