Você está recebendo esse erro porque, em TypeScript, módulos também são estaticamente tipados. Desse modo, quando você importa todos os ícones usando a seguinte notação:
import * as Icons from 'react-icons/fa';
O TypeScript irá "definir" o tipo de Icons
(também chamado de module namespace) como algo assim:
type Icons = {
FaAccessibleIcon: IconType;
FaAccusoft: IconType;
FaAcquisitionsIncorporated: IconType;
// ...
};
Desse modo, o TypeScript irá emitir um erro se você tentar acessar desse módulo uma propriedade que pode não existir (desde que a opção noImplicitAny
esteja definida como true
).
Para entender melhor o erro, basta pensar que uma string pode assumir qualquer valor de uma string, como FaAccessibleIcon
(uma string que existe no módulo) ou FooBarBaz
(uma string que pode não existir no módulo).
A partir do momento em que o compilador não tem certeza de que o que você está tentando acessar realmente está lá, o tipo any
será atribuído, o que lança o seguinte erro no caso de noImplicitAny
estar habilitada:
Element implicitly has an 'any' type because expression of type 'string' can't be used to index type [...]
No index signature with a parameter of type 'string' was found on type [...] ts(7053)
Existem diversas formas de se resolver esse erro. A mais simples delas é usar uma asserção de tipos (type assertion):
import * as Icons from 'react-icons/fa';
import { IconType } from 'react-icons/lib/esm';
const iconName: string = 'FaAddressBook';
// `Icon` é do tipo `IconType | undefined`. =)
const Icon = (Icons as Record<string, IconType | undefined>)[iconName];
Coloquei no GitHub para referência futura.
Com o código acima, nos confirmamos (do verbo "assert" em inglês) ao compilador que o namespace Icons
é do tipo que criamos utilizando o tipo embutido Record<K, V>
. O tipo que criamos com o Record
é equivalente ao seguinte:
type LooseIconsType1 = {
[key: string]: IconType | undefined;
};
// É o mesmo que:
type LooseIconsType2 = Record<string, IconType | undefined>;
Nesse caso, estamos utilizando a asserção mais "segura", já que, caso você estiver com a opção strictNullChecks
ativada, Icon
poderá também ser undefined
(já que o union type IconType | undefined
foi utilizado), o que te obrigará a verificar a sua existência antes de utilizá-lo.
Se você não estiver preocupado com a segurança de tipos (o que é um erro, até porque um dos principais benefícios do TypeScript é a segurança adicional por ele trazida), você pode simplesmente desativar a opção noImplicitAny
ou simplesmente fazer uma asserção ao tipo any
:
import * as Icons from 'react-icons/fa';
const iconName: string = 'FaAddressBook';
// `Icon` é do tipo `any`. =(
const Icon = (Icons as any)[iconName];
Mas eu realmente não recomendo essa última opção. Se você pode fazer algo um pouco mais seguro, não há porquê não o fazer. ¯_(ツ)_/¯
Uma outra opção seria utilizar type-guards para isso. Mas como você pode verificar aqui e aqui, essa ainda não me parece ser uma opção muito viável.
Para saber mais sobre as opções do TypeScript, leia este documento.