Fontawesome Icon 在 React with TS 上不能作為 state 值工作

Question

我正在動態使用圖標，因此我將使用 state 更新更改圖標的類型，但出現此錯誤： 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

有沒有辦法可以將此值用作 state？

Answer 1

我找到了兩個解決方案。 我不確定它們中的任何一個是否是一個好方法（如果有人可以為我澄清這一點會很好），但它們都有效。

第一個是從fontawesome-svg-core導入IconPrefix並將其設置為 state 的類型。 我和那個一起去：

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

第二種是將 go 直接添加到IconPrefix類型的源中，並將string添加為其中之一：

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