如何在 React 中更改 svg 图标的大小？答案

【问题标题】：How to change the size of svg icon in React?如何在 React 中更改 svg 图标的大小？
【发布时间】：2021-04-18 17:20:36
【问题描述】：

我想在 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;
   
  }

【问题讨论】：

标签： css reactjs svg next.js

【解决方案1】：

您的 .svg-image 选择器应以 svg 元素为目标：

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

【讨论】：

【解决方案2】：

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

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

然后你可以在使用 svg 组件时使用任何宽度和高度值。

【讨论】：