Fiz de maneira bem diferente e queria compartilhar, porque gosto desse tipo de solução. Decidi que queria importar as imagens de maneira dinâmica. Desse jeito eu não teria que me importar com adicionar um novo item na lista de icones. Após receber o "type", daria de saber o nome da imagem e ela retorna a imagem em sí.
// Guarda as imagens já importadas const imagens = { }; export default async ( type ) => {
// A primeira letra deve ser minúscula, mas as outras não necessariamente.
let imageName = type.substr(0, 1).toLowerCase() + type.substr(1);
if(!imagens[imageName]){
let image = await import(`../assets/images/${imageName}.svg`);
imagens[imageName] = image;
}
return imagens[imageName].default; } ;
Então, depois de pegar a imagem, era só utilizar para um componente Icone. Para fazer isso direito, usei useState e useEffect.
Meu código em Item ficou assim:
export default ({from, date, value, type}) => {
const [icone, setIcone] = useState('');
useEffect(() => {
async function getImage() {
setIcone(await ImageFilter(type))
}
getImage();
}, [type])
return (
<Item>
<Icone src={icone} alt={`Icone de ${type}`}></Icone>
<ItemInfo>
<span className='text'>
{type}
</span>
<span>
{from}
</span>
<span>
{value}
</span>
</ItemInfo>
<span>
{date}
</span>
</Item>
)}
Gosto da ideia de dar poder a nomeação de arquivos conforme uma regra ou padrão dentro da estrutura. Neste caso, as imagens de ícone devem coincidir com o "tipo" do Item. Esse não era o caso para "Restaurante" e "Alimentação", então tive que renomear. Mas fora isso, funciona bem e, ao não exigir manutenção do object literal, simplifica as etapas necessárias a serem realizadas manualmente ao adicionar um novo tipo de item.
