Javascript 使图标在json文件中可配置并在react组件中使用

我有一个对象iconProps，其中我为特定属性指定了图标的类名，并在我的react组件中使用它。但它仅限于免费图标。无论如何，我可以使用多个库中的许多图标，比如使用react图标并使其可配置。我想这有点棘手

const iconProps = {
    "id": "fas fa-id-card" ,
    "mobile" : "fas fa-phone",
    "name": "fas fa-user",
    "gender": "fas fa-venus-mars",
    "marital_status": "fas fa-ring" ,
    "birth_date": "fas fa-calendar-alt"
}

在类组件中使用

<div> <i className= {iconProps.id} />The id : 23456</div>

id:23456