How to change the size of svg icon in React? - css

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