svgicon大小问题(简单记录

Prob.:
react+ts下用类似import XxxIcon from "../icons/xxx.svg语句之后使用< XxxICon >标签,不能直接用style指定大小
(viewbox好像是有效的,height和width类似只改了画布大小,没缩放里面的path)

过程:
前面的问题是在改一个已有的项目的时候发现的
npx create-react-app my-app --template redux 直接搭的一个ts+react+redux的项目,然后发现里面的svg引入是用< img>标签包的,这个可以用style缩放大小,类似:

import logo from "./logo.svg";
<img src={logo} style={{ height: "50px" }}></img>

甚至这个项目目前是不能直接使用< XxxICon >标签,查了一下需要在“webpack.config.js”里面加svgr的配置,然后覆盖原来的配置(?)(待研究)

在原来这个项目里不能像原来这样用img标签()

但尝试发现可以把svg文件打开,不动svg的viewBox,只把width和height改成100%,
<svg width="100%" height="100%" viewBox="0 0 37 37" fill="none" xmlns="http://www.w3.org/2000/svg">
然后在在icon里面内联style加height 是可以的
<XxxIcon style={{ height: "10px" }} />

上一篇:ubuntu24.04安装matlab失败


下一篇:大模型AWQ量化Qwen模型和推理实战教程