Display icons based on file types

apps/remix-ide/src/index.html

@@ -106,5 +106,6 @@
 			}
 		</script>
 		<script src="runtime.js" type="module"></script><script src="polyfills.js" type="module"></script><script src="vendor.js" type="module"></script>
+		<script src="https://kit.fontawesome.com/41dd021e94.js" crossorigin="anonymous"></script>
 	</body>
 </html>

apps/remix-ide/src/lib/helper.js

@@ -68,7 +68,14 @@ module.exports = {
     const hexValue = hash.slice(2, hash.length)
     return this.is0XPrefixed(hash) && /^[0-9a-fA-F]{64}$/.test(hexValue)
   },
-  find: find
+  find: find,
+  getPathIcon (path) {
+    return path.endsWith('.txt')
+      ? 'far fa-file-alt' : file.path.endsWith('.sol')
+        ? 'fak fa-solidity-mono' : file.path.endsWith('.js')
+          ? 'fab fa-js' : file.path.endsWith('.json')
+            ? 'fas fa-brackets-curly' : 'far fa-file'
+  }
 }
 
 function findDeep (object, fn, found = { break: false, value: undefined }) {

libs/remix-ui/file-explorer/src/lib/file-explorer.tsx

@@ -901,6 +901,7 @@ export const FileExplorer = (props: FileExplorerProps) => {
         ? 'bg-secondary' : state.mouseOverElement === file.path
           ? 'bg-light border' : (state.focusContext.element === file.path) && (state.focusEdit.element !== file.path)
             ? 'bg-light border' : ''
+    const icon = helper.getPathIcon(file.path)
 
     if (file.isDirectory) {
       return (
@@ -979,7 +980,7 @@ export const FileExplorer = (props: FileExplorerProps) => {
               e.stopPropagation()
               handleContextMenuFile(e.pageX, e.pageY, file.path, e.target.textContent)
             }}
-            icon='far fa-file'
+            icon={icon}
             labelClass={labelClass}
             onMouseOver={(e) => {
               e.stopPropagation()