Javascript 作为React和ES6中的参数从子元素访问道具

我有一个名为

Svg.js

的文件，其结构如下：

const Svg =({children, height, width, className, ...otherProps}) => {
  return <svg width={width} height={height} viewBox={"0 0 " + vpWidth + " " + vpHeight} className={className} style={{height: height + "px", width: width + "px"}}>{children}</svg>
}

export default Svg

因此，所有这些都非常有效，并呈现SVG。但是，我需要能够更改web应用程序上的SVG以适应新品牌。我希望能够在不同品牌之间保持实际图标的宽度和高度相同，但SVG还有一个

viewBox

属性，它定义画布大小和位置等。每个品牌的这些值都不同。我希望这是在单个SVG文件（

Add.js

）中定义的，因为它需要保持不变

那么我如何在SVG代码所在的文件中定义

vpWidth

和

vpHeight

，然后在SVG.js文件中访问它，而不是在调用

元素时？我需要保持

{React.createElement（brandingConfig.svgs.Add）}

不变。

const icon = (
    <Svg width="25" height="23" vpHeight="23" vpWidth="25" className="nav-icon">
        {React.createElement(brandingConfig.svgs.Add)}
     </Svg>
)

import React from 'react'

const Add = ({}) => {
  // return SVG code
}

export default Add