Font真棒图标在React with TS上未作为状态值工作

Question

我正在动态使用一个图标，所以我会通过状态更新来更改图标的类型，但我收到了这个错误：Type 'string' is not assignable to type 'IconPrefix'.

这是我的代码示例：

import  { useState } from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
const Produto = () => {
const [wishlistIcon, setWishlistIcon] = useState('far')

return (
<FontAwesomeIcon 
icon={[wishlistIcon, 'heart']} size="2x"  
/>
)
}
export default Produto

但如果我直接将字符串作为图标值传递，它就可以正常工作：

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
const Produto = () => {

return (
<FontAwesomeIcon 
icon={['far', 'heart']} size="2x"  
/>
)
}
export default Produto

有没有一种方法可以将这个值用作一个状态？

Answer 1

我找到了两个解决方案。我不确定他们中的任何一个是否是一个好方法(如果有人能为我澄清这一点就好了(，但他们都有效。

第一种是从fontawesome-svg-core导入IconPrefix，并将其设置为状态的类型。我选择

import { IconPrefix } from '@fortawesome/fontawesome-svg-core'
const [wishlistIcon, setWishlistIcon] = useState<IconPrefix>('far')

第二个是直接转到类型IconPrefix的源，并将string添加为其类型之一：-不推荐

export type IconPrefix = "fas" | "far" | "fal" | "fat" | "fad" | "fab" | "fak" | string ;

编辑：

第二种解决方案是有效的，但它不是一种好方法，因为它可以在您的计算机中工作，但一旦您(或其他任何人(必须重新安装项目的依赖项，IconPrefix将恢复到其原始值，您的项目将中断。

第一种方法是可以的，但今天(有了更多的知识来了解发生了什么(我会用我想使用的值创建一个新的类型，这样TS就会知道我遵循它的规则，只使用允许的值：

type Icon = 'fas' | 'far'
const [wishlistIcon, setWishlistIcon] = useState<Icon>('far')

这样就不需要导入额外的类型。