feat: added icons to badges in skills

Author: steadyfall

site/package-lock.json

@@ -23,6 +23,7 @@
     "tailwind-merge": "^2.5.2"
   },
   "devDependencies": {
+    "@iconify/react": "^5.0.2",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",

site/package.json

@@ -2,6 +2,8 @@ import { Badge } from '@/components/ui/Badge';
 import { useState } from 'react';
 import BlurFade, { BLUR_FADE_DELAY } from '@/components/ui/BlurFade';
 import { cn } from '@/lib/utils';
+import { Icon } from '@iconify/react';
+import { techIcons } from '@/lib/techIcons';
 
 interface SkillsProps {
     arr: string[];
@@ -24,7 +26,15 @@ export function Skills({ arr }: SkillsProps) {
                         key={index}
                         delay={BLUR_FADE_DELAY * 10 + index * 0.05}
                         >
-                            <Badge key={index}>{skillText}</Badge>
+                            <Badge key={index}>
+                                {
+                                    techIcons?.[skillText] &&
+                                    <span className="mr-2">{
+                                        <Icon icon={techIcons[skillText]} inline={true} width={18} height={18}/>
+                                    }</span>
+                                }
+                                <span>{skillText}</span>
+                            </Badge>
                         </BlurFade>
                     ))}
                 </div>

site/src/components/Skills.tsx

@@ -4,7 +4,7 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
 const badgeVariants = cva(
-  "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  "flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
   {
     variants: {
       variant: {

site/src/components/ui/Badge.tsx

@@ -1,49 +1,30 @@
-import { FunctionComponent } from 'react';
-import { 
-    PythonOriginal,
-    JavascriptOriginal,
-    TypescriptOriginal,
-    COriginal,
-    CplusplusOriginal,
-    GoOriginalWordmark,
-    Html5OriginalWordmark,
-    Css3OriginalWordmark,
-    ROriginal,
-    DjangoPlain,
-    FlaskOriginalWordmark,
-    ReactOriginal,
-    NodejsOriginalWordmark,
-    AxiosPlainWordmark,
-    SocketioOriginalWordmark,
-    TailwindcssOriginalWordmark,
-    D3jsOriginal,
-    JestPlain,
-    CypressioOriginal,
-    PytestOriginalWordmark,
-    NextjsOriginal,
-} from 'devicons-react';
-
-
-export const techIcons: { [key: string]: FunctionComponent } = {
-    "Python3": PythonOriginal,
-    "JavaScript (ES6)": JavascriptOriginal,
-    "TypeScript": TypescriptOriginal,
-    "C": COriginal,
-    "C++20": CplusplusOriginal,
-    "Go": GoOriginalWordmark,
-    "HTML5": Html5OriginalWordmark ,
-    "CSS3": Css3OriginalWordmark,
-    "R": ROriginal,
-    "Django": DjangoPlain,
-    "Flask": FlaskOriginalWordmark,
-    "React": ReactOriginal,
-    "Next.js": NextjsOriginal,
-    "Node.js": NodejsOriginalWordmark,
-    "Axios": AxiosPlainWordmark,
-    "Socket.IO": SocketioOriginalWordmark,
-    "TailwindCSS": TailwindcssOriginalWordmark,
-    "D3.js": D3jsOriginal,
-    "Jest": JestPlain,
-    "Cypress": CypressioOriginal,
-    "Pytest": PytestOriginalWordmark,
+export const techIcons: { [key: string]: string } = {
+    "Python": "devicon:python",
+    "Python3": "devicon:python",
+    "JavaScript (ES6)": "devicon:javascript",
+    "TypeScript": "devicon:typescript",
+    "C": "devicon:c",
+    "C++": "devicon:cplusplus",
+    "C++20": "devicon:cplusplus",
+    "Go": "logos:go",
+    "HTML5": "logos:html-5" ,
+    "CSS3": "logos:css-3",
+    "R": "devicon:rstudio",
+    "Django": "vscode-icons:file-type-django",
+    "Flask": "simple-icons:flask",
+    "React": "logos:react",
+    "Next.js": "devicon:nextjs",
+    "Node.js": "devicon:nodejs",
+    "Axios": "simple-icons:axios",
+    "Socket.IO": "simple-icons:socketdotio",
+    "TailwindCSS": "devicon:tailwindcss",
+    "D3.js": "logos:d3",
+    "Jest": "logos:jest",
+    "Cypress": "devicon-plain:cypressio",
+    "Pytest": "simple-icons:pytest",
+    "Postgres": "logos:postgresql",
+    "MySQL": "fontisto:mysql",
+    "Docker": "logos:docker-icon",
+    "Powershell": "vscode-icons:file-type-powershell",
+    "Bash": "devicon-plain:bash"
 }