title: How to change the size of svg icon in React?
body: <p>I wanted to display an svg icon and a text in a same line in React and Next.js. Now I have found how to do it. Though I still don't know how to control the size of the svg icon in the context. I want the svg icon to be same size as each character of the text.</p>
  <p>I put the browser display here.</p>
  <p><a href="https://i.stack.imgur.com/0cOup.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0cOup.png" alt="enter image description here" /></a></p>
  <p>And I put my code bellow, please point out what is wrong about my code.</p>
  <pre><code>//mysvg.js
  import styles from '../styles/svg.module.css'
  export function CircleBottomIcon(props) {
    return (&lt;span class={styles['svg-image']}&gt;
      &lt;svg
        width=&quot;30&quot;
        height=&quot;30&quot;
        viewBox=&quot;0 0 30 30&quot;
        xmlns=&quot;http://www.w3.org/2000/svg&quot;
        {...props}
      &gt;
        &lt;title&gt;circle-bottom&lt;/title&gt;
        &lt;path
          d=&quot;M27.5 15c0 6.893-5.608 12.5-12.5 12.5-6.893 0-12.5-5.608-12.5-12.5C2.5 8.107 8.108 2.5 15 2.5c6.893 0 12.5 5.608 12.5 12.5zm2.5 0c0-8.284-6.716-15-15-15C6.716 0 0 6.716 0 15c0 8.284 6.716 15 15 15 8.284 0 15-6.716 15-15zm-15 2.5l-5.625-5.625-1.875 1.91L15 21.25l7.5-7.466-1.875-1.91L15 17.5z&quot;
          fill-rule=&quot;evenodd&quot;
        /&gt;
      &lt;/svg&gt;&lt;/span&gt;
    );
  }
  
  </code></pre>
  <pre><code>//index.js
  import {CircleBottomIcon} from '../components/mysvg'
  
  
  export default function Home() {
    return (
  &lt;span&gt;
  1234&lt;CircleBottomIcon&gt;&lt;/CircleBottomIcon&gt;567890
  &lt;/span&gt;
    )
  }
  
  
  </code></pre>
  <pre><code>//svg.module.css
  
  .svg-image {
     display: inline-block; 
     width: 16px;
     height: 16px;
     
    }
  
  </code></pre>