Trying to figure out how to display an SVG icon and text on the same line in React and Next.js. After some research, I've managed to achieve it. However, I'm struggling to control the size of the SVG icon in relation to the text. Ideally, I want the icon to be the same size as each character of the text.
Below is a screenshot of how it appears in the browser.
https://i.sstatic.net/0cOup.png
Here is the code I have written, please let me know what I'm doing wrong:
//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;
}