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