Use svg as object

I am looking for a clean way to use Svgs such that I can still change some attributes like fill programmatically.

My idea is to create a Svg component that takes a prop "name" then fetches the svg object from a json svg list or create the svg object from a svg file then build it, i.e.,

//use case
<Svg name="logo" class="fill-gray-300 dark:fill-red-300">

//svg json
[
 {
    "name":"logo"
    "g":{
      "path":{
        "d": "M213.149867,129.220267 C213.149867,118.843733 204.758756,110.603378 194.532978,110.603378 C189.498311,110.603378 184.918756 ..."
        }
      }
  },
//other svgs
]

//svg component
//import the json and filter by name or create svg object from svg file
//build svg from object

Is there an available implementation of this or a better way of doing this? Also I am trying to avoid using css filters.