feat: add all 800 linguist language icons (#129)

* feat: add all 800 linguist language icons

This uses existing svg icons for common languages, then falls back on
the iconify library for the remaining 600 languages.

* move icon component to ui components

---------

Co-authored-by: Brendan Kellam <[email protected]>

Author: KonradStanski

packages/web/package.json

@@ -34,6 +34,7 @@
     "@codemirror/state": "^6.4.1",
     "@codemirror/view": "^6.33.0",
     "@hookform/resolvers": "^3.9.0",
+    "@iconify/react": "^5.1.0",
     "@radix-ui/react-dropdown-menu": "^2.1.1",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.1.0",

packages/web/src/app/search/components/filterPanel/index.tsx

@@ -5,9 +5,9 @@ import { cn, getRepoCodeHostInfo } from "@/lib/utils";
 import { SetStateAction, useCallback, useEffect, useState } from "react";
 import { Entry } from "./entry";
 import { Filter } from "./filter";
-import { getLanguageIcon } from "./languageIcons";
 import Image from "next/image";
-import { LaptopIcon, QuestionMarkCircledIcon } from "@radix-ui/react-icons";
+import { LaptopIcon } from "@radix-ui/react-icons";
+import { FileIcon } from "@/components/ui/fileIcon";
 
 interface FilePanelProps {
     matches: SearchResultFile[];
@@ -58,16 +58,9 @@ export const FilterPanel = ({
             "Language",
             matches,
             (key) => {
-                const iconSrc = getLanguageIcon(key);
-                const Icon = iconSrc ? (
-                    <Image
-                        src={iconSrc}
-                        alt={key}
-                        className="w-4 h-4 flex-shrink-0"
-                    />
-                ) : (
-                    <QuestionMarkCircledIcon className="w-4 h-4 flex-shrink-0" />
-                );
+                const Icon = (
+                    <FileIcon language={key} />
+                )
 
                 return {
                     key,

packages/web/src/components/ui/fileIcon/fileIcon.tsx

@@ -0,0 +1,37 @@
+'use client';
+
+import { getFileIconSvg } from "./fileIconSvg";
+import { getFileIconIconify } from "./fileIconIconify"
+import Image from "next/image";
+import { QuestionMarkCircledIcon } from "@radix-ui/react-icons";
+import { Icon } from '@iconify/react';
+
+interface FileIconProps {
+   language: string;
+}
+
+export const FileIcon = ({ language }: FileIconProps) => {
+   const iconSvg = getFileIconSvg(language);
+   let iconifyName = null;
+   if (!iconSvg) {
+      iconifyName = getFileIconIconify(language);
+   }
+
+   if (iconSvg) {
+      return (
+         <Image
+            src={iconSvg}
+            alt={language}
+            className="w-4 h-4 flex-shrink-0"
+         />
+      )
+   } else if (iconifyName) {
+      return (
+         <Icon icon={iconifyName} className="w-4 h-4 flex-shrink-0" />
+      )
+   } else {
+      return (
+         <QuestionMarkCircledIcon className="w-4 h-4 flex-shrink-0" />
+      )
+   }
+};