implement file type icons

[mhsh312]

Fixes #2542 (needs discussion about icon design)

Changes:

Added File Type Icons.

I have created a new React Component and passed the file extension as a prop. The component returns suitable icon according to the prop. I have not put much thought into choosing the icons (I have used react-icons) as the icon choice can be reviewed and discussed later. For the file types I could not find the icons for, I have set the default case to the old generic FileIcon.

I have verified that this pull request:

• has no linting errors (npm run lint)
• has no test errors (npm run test)
• is from a uniquely-named feature branch and is up to date with the develop branch.
• is descriptively named and links to an issue number, i.e. Fixes #123

[welcome]

🎉 Thanks for opening this pull request! Please check out our contributing guidelines if you haven't already.

[lindapaiste]

Awesome that we already had a function for this!

[lindapaiste]

This is a great starting point!

As this evolves we'll figure out what makes sense code-wise. switch definitely works. A dictionary object could work. That is, const icons = { html: IoLogoHtml5, /// etc. }. If we want to use the same icon for more than one extension then if else statements might make sense. Like if (/jsx?/i.test(fileExtension)) { return <IoLogoJavascript /> } to match .js and .jsx.

[mhsh312]

If we want to use the same icon for more than one extension then if else statements might make sense. Like if (/jsx?/i.test(fileExtension)) { return } to match .js and .jsx.

In javascript, same code can be assigned to multiple cases like this:

 switch (choice) {
  case "1":
  case "2":
    console.log("test1");
    break;
  case "3":
    console.log("test2");
}

So I think switch overall is the best way.

[raclim]

Thanks for your work on this! I think this looks pretty good for now so I'm finally going to merge this in—any added changes can be made in future PRs! One minor additional change I made is adding the focusable' and aria-hiddenproperties toFileTypeIcon` for accessibility purposes.