如何改变React中svg图标的大小？

Question

我想在 React 和 Next.js 中的同一行中显示 svg 图标和文本。现在我已经找到了该怎么做。虽然我仍然不知道如何控制上下文中 svg 图标的大小。我希望 svg 图标与文本的每个字符大小相同。

我把浏览器显示放在这里。

我把我的代码放在下面，请指出我的代码有什么问题。

//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

我建议您保持视图框参数的恒定值并接受高度和宽度的道具。为它们添加默认值 30 和 30。部分代码如下所示：

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

然后，当您使用 svg 组件时，您可以使用任何宽度和高度值。