方法一
将其用作 img 标签的来源
import icon from ' ./icon.svg ' ; const Footer = () => { return ( < Footer > { /*... */ } < a href = ' # ' > < img src = { icon } alt = "" /> < /a > < /Footer > ) }方法二
将其用作组件。通过这种方式，您可以使用 CSS 设置 SVG 样式。使用（storke、fill、stroke-dasharray …）等属性更改颜色或动画
import { ReactComponent as Icon } from ' ./icon.svg ' ; const Footer = () => { return ( < Footer > { /*... */ } < a href = ' # ' > < Icon /> < /a > < /Footer > ) }方法三
直接在 JSX 中包含 SVG。这与之前的方法类似，但它可能无法针对大量 SVG 进行扩展。
const Icon = () => { < svg xmlns = " http://www.w3.org/2000/svg " width = " 16 " height = " 16 " fill = " currentColor " viewBox = " 0 0 16 16 " > < path d = " M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z " /> < /svg > } const Footer = () => { return ( < Footer > { /*... */ } < a href = ' # ' > < Icon /> < /a > < /Footer > ) }
原文： https://dev.to/zougari47/how-to-import-svg-in-react-4ne3