gpt4 book ai didi

css - 如何在 React 中更改 svg 图标的大小?

转载 作者:行者123 更新时间:2023-12-05 09:06:48 26 4
gpt4 key购买 nike

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

我把浏览器显示放在这里

enter image description here

下面是我的代码,请指出我的代码有什么问题。

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

}

最佳答案

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

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.

关于css - 如何在 React 中更改 svg 图标的大小?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65706280/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com