How to change the size of svg icon in React?

Question

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.

I put the browser display here.

And I put my code bellow, please point out what is wrong about my code.

//mysvg.js
import styles from '../styles/svg.module.css'
export function CircleBottomIcon(props) {
  return (<span class={styles['svg-image']}>
    <svg
      width="30"
      height="30"
      viewBox="0 0 30 30"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
    >
      <title>circle-bottom</title>
      <path
        d="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"
        fill-rule="evenodd"
      />
    </svg></span>
  );
}

//index.js
import {CircleBottomIcon} from '../components/mysvg'


export default function Home() {
  return (
<span>
1234<CircleBottomIcon></CircleBottomIcon>567890
</span>
  )
}

//svg.module.css

.svg-image {
   display: inline-block; 
   width: 16px;
   height: 16px;
   
  }

Answer 1

I'd suggest you keep constant values for viewbox param and accept props for height and width. Add a default values for these as 30 and 30. Part of code looks like:

const { height, width } = props;
<svg
      width={width}
      height={height}
      viewBox="0 0 30 30"
...

Then you can use any values for width and height when you use the svg component.

Answer 2

your .svg-image selector should target the svg element:

.svg-image {
   display: inline-block;
   svg {
     width: 16px;
     height: 16px;
   }
  }