Next.js中能否将字符串格式的SVG解析为组件？

完全可以实现你的需求，下面提供两种实用方案：

方法一：用dangerouslySetInnerHTML快速落地 #

这是最直接的实现方式，能快速把SVG字符串渲染到页面，还支持通过className控制样式：

// 封装可复用的SVG渲染组件
const SvgComponent = ({ svgString, className = '' }) => {
  return (
    <span 
      className={className}
      dangerouslySetInnerHTML={{ __html: svgString }}
    />
  )
}

// 页面中使用示例
async function ServicePage() {
  const json = await callApi()
  const { svgIcon } = json

  return (
    <div className="service-item">
      <SvgComponent svgString={svgIcon} className="fill-red-400 w-8 h-8" />
      <p>服务名称</p>
    </div>
  )
}

export default ServicePage

注意：仅在完全信任API返回内容时使用，后端必须对用户上传的SVG做校验，过滤<script>标签、onclick这类恶意属性，避免XSS攻击。

方法二：用@svgr/core转成真正的React组件 #

如果需要更灵活的组件用法（比如直接传递fill、width等props），可以用@svgr/core把SVG字符串编译成标准React组件：

先安装依赖：

npm install @svgr/core @svgr/plugin-jsx

然后封装解析逻辑：

import svgr from '@svgr/core'
import jsxPlugin from '@svgr/plugin-jsx'

// 把SVG字符串解析为React组件
async function svgToComponent(svgString) {
  const componentCode = await svgr(
    svgString,
    { plugins: [jsxPlugin] },
    { componentName: 'DynamicSvg' }
  )

  // 生产环境建议在服务器端完成编译，避免客户端用eval的安全风险
  const module = { exports: {} }
  eval(componentCode)
  return module.exports.default
}

// 页面使用示例
async function ServicePage() {
  const json = await callApi()
  const { svgIcon } = json
  const DynamicSvg = await svgToComponent(svgIcon)

  return (
    <div className="service-item">
      <DynamicSvg className="fill-red-400" width={32} height={32} />
      <p>服务名称</p>
    </div>
  )
}

export default ServicePage

注意：客户端用eval存在安全隐患，生产环境推荐在服务器端完成SVG到组件的编译，再把组件代码传给前端，或者用Node.js的vm模块安全执行代码。

额外提醒 #

• 后端必须严格校验用户上传的SVG：限制文件大小、过滤恶意代码、禁止外部资源引用。
• 如果有大量SVG需要处理，建议在服务器端预编译并缓存组件，提升前端加载性能。

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