通过React组件修改代码输出

Question

我正在使用一个React库，该库输出一个svg-icon。我想使用线性渐变为该图标设置样式。为此，我需要修改输出的代码。这是一个简化的架构，显示了我想更改的内容

当前输出

function myFunc(callbackFunc) {
    //do stuff!
    console.log("in parent func");
    callbackFunc(); //calls the callback function passed as a param
    console.log("Callback done!"); //If there is async code in your callback function, this may happen BEFORE the callbackFunc() is finished. A common gotcha to watch out for.
}

myFunc(() => { console.log("Doing the callback") });

所需的输出

<svg>
  <path></path>
</svg>

换句话说，我需要向<svg> <defs> <linearGradient> <stop /> <stop /> <linearGradient> </defs> <path></path> </svg> 标记中注入一些代码以获取输出。

有可能用React做到这一点吗？如果可以，怎么办？

谢谢。