Ikon SVG Reactjs adalah saiz yang berbeza walaupun css yang sama

Question

Ini adalah kali pertama saya membina tapak web menggunakan reactjs. Saya telah menggunakan ikon ReactJS daripada Pustaka Ikon React. Apabila ikon ini diulang di bahagian yang sama pada tapak web, saiznya akan berbeza-beza. Foto dilampirkan untuk rujukan anda'. Saya menyemak menggunakan cek. tunjuk Untuk ikon yang lebih kecil laluannya ialah 9.97x9.97 tetapi untuk paparan biasa laluannya ialah 14x14. Tidak pasti apa maksud laluan dan saya tidak pasti mengapa ikon berbeza saiz

Kod JSX ialah (contoh)

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

Semak ikon pertama dalam imej, ia kelihatan tidak segerak sepenuhnya

Answer 1

Ini disebabkan oleh Flex. Balut ikon dengan div atau tambah kelas flex-shrink: 0 添加到 .exp__details-icons.

    

        
    
    

        
Shakespearian Literature
        Mastered