React如何通过动态props传入的路径渲染SVG文件内容

问题原因 #

你当前直接输出传入的路径字符串，浏览器不会自动将路径解析为SVG资源渲染。另外子组件的参数写法有误，组件接收的第一个参数是整个props对象，需要解构才能拿到传入的src属性，也是渲染不符合预期的原因之一。

方案1：无需修改SVG样式，使用img标签渲染（最简单） #

存储方式 #

将所有SVG文件放到项目public目录下的专用文件夹，例如public/svg/，对应Hello.svg的存放路径为public/svg/Hello.svg

实现代码 #

// 父组件调用，路径直接用public下的绝对路径
<Frame src="/svg/Hello.svg" />

// 子组件Frame
const Frame = ({ src, alt = "动态SVG" }) => {
  return <img src={src} alt={alt} />
}

特点 #

• 实现成本最低，路径动态变化时自动切换渲染内容
• 无需提前导入任何SVG文件
• 缺点是无法通过CSS修改SVG内部的fill、stroke等样式，适合不需要自定义SVG样式的场景

方案2：需要自定义SVG内部样式，使用fetch加载原始内容 #

存储方式 #

同方案1，将SVG存放在public/svg目录下即可

实现代码 #

import { useState, useEffect } from 'react'

// 父组件调用方式不变，可传入自定义类名控制样式
<Frame src="/svg/Hello.svg" className="custom-svg" />

// 子组件Frame
const Frame = ({ src, className = "" }) => {
  const [svgContent, setSvgContent] = useState("")

  useEffect(() => {
    const loadSvg = async () => {
      try {
        const response = await fetch(src)
        const svgText = await response.text()
        setSvgContent(svgText)
      } catch (error) {
        console.error("SVG资源加载失败：", error)
      }
    }
    loadSvg()
  }, [src]) // 监听src变化，自动重新加载对应SVG

  return (
    <div 
      className={className}
      dangerouslySetInnerHTML={{ __html: svgContent }}
    />
  )
}

特点 #

• 可以通过外层class自定义SVG内部样式，示例CSS：

.custom-svg path {
  fill: #1677ff;
  stroke: #fff;
}

• 不需要提前导入任何SVG，完全动态适配传入的路径
• 注意：如果使用外部来源的SVG存在XSS风险，项目自身的静态SVG不存在该问题

方案3：Vite/Webpack环境下的预导入方案（无额外网络请求） #

如果项目使用构建工具，可以提前批量导入所有SVG文件，避免运行时的fetch请求

存储方式 #

将SVG存放在项目src/assets/svg目录下

实现代码（Vite环境示例） #

import { useState, useEffect } from 'react'
// 批量导入src/assets/svg下的所有SVG文件，以原始文本格式加载
const svgMap = import.meta.glob('@/assets/svg/*.svg', { as: 'raw' })

// 父组件调用，直接传SVG文件名即可
<Frame src="Hello.svg" />

// 子组件Frame
const Frame = ({ src }) => {
  const [svgContent, setSvgContent] = useState("")

  useEffect(() => {
    const loadSvg = async () => {
      const svgText = await svgMap[`/src/assets/svg/${src}`]()
      setSvgContent(svgText)
    }
    loadSvg()
  }, [src])

  return <div dangerouslySetInnerHTML={{ __html: svgContent }} />
}

特点 #

• 打包时会自动处理所有SVG文件，无运行时额外请求
• 同样支持自定义SVG内部样式
• 适合SVG数量可控的场景

内容的提问来源于stack exchange，提问作者John107