Les icônes Reactjs SVG sont de tailles différentes malgré le même CSS

Question

C'est la première fois que je crée un site Web avec Reactjs. J'utilise les icônes ReactJS de la bibliothèque d'icônes React. Lorsque ces icônes sont répétées dans la même partie du site, leurs tailles varient. Les photos sont jointes pour votre référence. J'ai vérifié en utilisant check. montrer Pour la plus petite icône, son chemin est de 9,97 x 9,97, mais pour l'affichage normal, son chemin est de 14 x 14. Je ne sais pas ce que signifie le chemin et je ne sais pas pourquoi les icônes sont de tailles différentes

Le code JSX est (exemple)

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;
    }
}

Vérifiez la première icône de l'image, elle semble complètement désynchronisée

Answer 1

Cela est dû à Flex. Enveloppez l'icône avec un div ou ajoutez une classe flex-shrink: 0 添加到 .exp__details-icons.

    

        
    
    

        
Shakespearian Literature
        Mastered