[英]Import SVG as react Component
我正在將一個 svg 作為組件導入 react,但它在 css 類周圍有Style
標簽,因此當我嘗試導入它時會引發錯誤,如果我刪除style
標簽中的 css,它會加載 svg 但顯然缺少額外的造型
如果可能,我想避免將所有樣式移動到單獨的 .css 文件中,如何將 svg 作為組件導入 React 中但保留所有樣式?
import React from 'react'
export const StoffFarbe = () =>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
viewBox="0 0 40 40">
<style type="text/css">
.st0{fill:none;stroke:#1D1D1B;stroke-width:3.2003;stroke-linejoin:round;stroke-miterlimit:10;}
.st1{fill:none;stroke:#1D1D1B;stroke-width:1.6001;stroke-linejoin:round;stroke-miterlimit:10;}
</style>
<g>
<path className="st0" d="M6.3,33c-1.4-1.4-2.4-3.8,0.2-6.4s7.4-4.8,7.4-4.8s0.8-3.8,0.2-6.6c1.6-1.6,10.8-10.8,10.8-10.8l10.2,10.2
c0,0-9.2,9.2-10.8,10.8c-3.2-1.4-6.2,0-6.2,0s-2.8,5-5,7.4C10.5,35,7.7,34.5,6.3,33z"/>
</g>
<line className="st1" x1="15.7" y1="13.8" x2="25.5" y2="23.6"/>
<circle className="st1" cx="9.3" cy="29.8" r="0.4"/>
<path className="st1" d="M20.1,9.4c0,0-0.4,1.4,1.6,2.2s3.4-1.2,4,0.6s-1.6,4.2,1.4,5.2c3,0.8,3.8-0.8,4.2,0.4"/>
</svg>
如果您使用 create-react-app 2.0,您現在可以這樣做:
import { ReactComponent as YourSvg } from './your-svg.svg';
<div>
<YourSvg />
</div>
您可以導入樣式表:
import './StoffFarbe.css';
在 CSS 文件中:
.StoffFarbe {
// add styles
}
另一種選擇是使用 svg 作為圖像:
<img src="StoffFarbe.svg" class="yourCSSClass">
來源:
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.