我們有數百個 SVG 檔案，我正在嘗試行內渲染它們。我正在使用已經安裝并配置了 @svgr/webpack 的 create-react-app。它允許我像這樣添加 SVG 行內：
import { ReactComponent as SvgImage } from '../Plans/Brownlow-Floor-Plan.svg';
...
<SvgImage style={{ width: "600px !important" }} />
通過 img 標簽包含 SVG 使這些事情變得不可能：
任何幫助將不勝感激！
uj5u.com熱心網友回復：
有一個很棒的包react-svg，它可以完全滿足您的需求。
您可以將它與帶有srcurl 字串的簡單屬性一起使用，就像<img>標簽一樣。但在幕后，它會從 url 下載 svg 檔案并行內注入。例如：
import { ReactSVG } from 'react-svg'
Component = () => <ReactSVG src="http://somewhere.com/my.svg" />,
uj5u.com熱心網友回復：
我不確定這是否適合您，但是您可以嘗試在標簽<use />中使用該<svg />標簽。例如：
<svg
height={iconHeight}
viewBox={`0 0 ${iconWidth} ${iconHeight}`}
width={iconWidth}
>
<use xlinkHref={`${svgPath}#${icon}`} />
</svg>
哪里svgPath是SVG的URL，是SVG上icon設定的ID。您可以嘗試省略#${icon}部分。
不確定這是否有幫助。
如果你選擇這條路線，你可能與 IE 不兼容......為此你可以使用svg4everybody，但是 tbh IE 已經死了，它應該保持死狀態。
干杯!
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/332667.html
下一篇：在nodejs中讀取屬性檔案