refactor!: replace tabler icons with lucide icons (#183)

* refactor: replace tabler icons with lucide icons

This update removes the dependency on @tabler/icons-react
and replaces all instances with corresponding icons from
lucide-react across various components, ensuring a consistent
icon library is used throughout the application.

* refactor: transform tabler icons into custom brand icon components

This update replaces all instances of Tabler icons
with custom brand icons from the assets directory
in the apps, sign-in, and sign-up components, ensuring
a consistent icon usage across the application.

In other words, remove @tabler/icons-react dependency
for brand icons and transform those icons into custom
React components instead.

* docs: update README to reflect icon library changes

This update modifies the README to replace references
to Tabler Icons with Lucide Icons, clarifying the use
of Lucide Icons alongside Tabler Icons for brand purposes.

Author: satnaing

.prettierrc

@@ -31,7 +31,6 @@
     "^@tanstack/react-query$",
     "^@tanstack/react-router$",
     "^@tanstack/react-table$",
-    "^@tabler/icons-react$",
     "<THIRD_PARTY_MODULES>",
     "^@/assets/(.*)",
     "^@/api/(.*)$",

README.md

@@ -67,7 +67,7 @@ If you want to update components using the Shadcn CLI (e.g., `npx shadcn@latest
 
 **Linting/Formatting:** [Eslint](https://eslint.org/) & [Prettier](https://prettier.io/)
 
-**Icons:** [Tabler Icons](https://tabler.io/icons)
+**Icons:** [Lucide Icons](https://lucide.dev/icons/), [Tabler Icons](https://tabler.io/icons) (Brand icons only)
 
 **Auth (partial):** [Clerk](https://go.clerk.com/GttUAaK)
 

package.json

@@ -33,7 +33,6 @@
     "@radix-ui/react-switch": "^1.2.5",
     "@radix-ui/react-tabs": "^1.1.12",
     "@radix-ui/react-tooltip": "^1.2.7",
-    "@tabler/icons-react": "^3.34.1",
     "@tailwindcss/vite": "^4.1.11",
     "@tanstack/react-query": "^5.83.0",
     "@tanstack/react-router": "^1.129.0",

pnpm-lock.yaml

@@ -0,0 +1,28 @@
+import { SVGProps } from 'react'
+import { cn } from '@/lib/utils'
+
+export function IconDiscord({ className, ...props }: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      role='img'
+      viewBox='0 0 24 24'
+      xmlns='http://www.w3.org/2000/svg'
+      width='24'
+      height='24'
+      className={cn('[&>path]:stroke-current', className)}
+      fill='none'
+      stroke='currentColor'
+      strokeWidth='2'
+      strokeLinecap='round'
+      strokeLinejoin='round'
+      {...props}
+    >
+      <title>Discord</title>
+      <path strokeWidth='0' d='M0 0h24v24H0z' fill='none' />
+      <path d='M8 12a1 1 0 1 0 2 0a1 1 0 0 0 -2 0' />
+      <path d='M14 12a1 1 0 1 0 2 0a1 1 0 0 0 -2 0' />
+      <path d='M15.5 17c0 1 1.5 3 2 3c1.5 0 2.833 -1.667 3.5 -3c.667 -1.667 .5 -5.833 -1.5 -11.5c-1.457 -1.015 -3 -1.34 -4.5 -1.5l-.972 1.923a11.913 11.913 0 0 0 -4.053 0l-.975 -1.923c-1.5 .16 -3.043 .485 -4.5 1.5c-2 5.667 -2.167 9.833 -1.5 11.5c.667 1.333 2 3 3.5 3c.5 0 2 -2 2 -3' />
+      <path d='M7 16.5c3.5 1 6.5 1 10 0' />
+    </svg>
+  )
+}

src/assets/brand-icons/icon-discord.tsx

@@ -0,0 +1,33 @@
+import { SVGProps } from 'react'
+import { cn } from '@/lib/utils'
+
+export function IconDocker({ className, ...props }: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      role='img'
+      viewBox='0 0 24 24'
+      xmlns='http://www.w3.org/2000/svg'
+      width='24'
+      height='24'
+      className={cn('[&>path]:stroke-current', className)}
+      fill='none'
+      stroke='currentColor'
+      strokeWidth='2'
+      strokeLinecap='round'
+      strokeLinejoin='round'
+      {...props}
+    >
+      <title>Docker</title>
+      <path strokeWidth='0' d='M0 0h24v24H0z' fill='none' />
+      <path d='M22 12.54c-1.804 -.345 -2.701 -1.08 -3.523 -2.94c-.487 .696 -1.102 1.568 -.92 2.4c.028 .238 -.32 1 -.557 1h-14c0 5.208 3.164 7 6.196 7c4.124 .022 7.828 -1.376 9.854 -5c1.146 -.101 2.296 -1.505 2.95 -2.46z' />
+      <path d='M5 10h3v3h-3z' />
+      <path d='M8 10h3v3h-3z' />
+      <path d='M11 10h3v3h-3z' />
+      <path d='M8 7h3v3h-3z' />
+      <path d='M11 7h3v3h-3z' />
+      <path d='M11 4h3v3h-3z' />
+      <path d='M4.571 18c1.5 0 2.047 -.074 2.958 -.78' />
+      <path d='M10 16l0 .01' />
+    </svg>
+  )
+}

src/assets/brand-icons/icon-docker.tsx

@@ -0,0 +1,25 @@
+import { SVGProps } from 'react'
+import { cn } from '@/lib/utils'
+
+export function IconFacebook({ className, ...props }: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      role='img'
+      viewBox='0 0 24 24'
+      xmlns='http://www.w3.org/2000/svg'
+      width='24'
+      height='24'
+      className={cn('[&>path]:stroke-current', className)}
+      fill='none'
+      stroke='currentColor'
+      strokeWidth='2'
+      strokeLinecap='round'
+      strokeLinejoin='round'
+      {...props}
+    >
+      <title>Facebook</title>
+      <path strokeWidth='0' d='M0 0h24v24H0z' fill='none' />
+      <path d='M7 10v4h3v7h4v-7h3l1 -4h-4v-2a1 1 0 0 1 1 -1h3v-4h-3a5 5 0 0 0 -5 5v2h-3' />
+    </svg>
+  )
+}

src/assets/brand-icons/icon-facebook.tsx

@@ -0,0 +1,27 @@
+import { SVGProps } from 'react'
+import { cn } from '@/lib/utils'
+
+export function IconFigma({ className, ...props }: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      role='img'
+      viewBox='0 0 24 24'
+      xmlns='http://www.w3.org/2000/svg'
+      width='24'
+      height='24'
+      className={cn('[&>path]:stroke-current', className)}
+      fill='none'
+      stroke='currentColor'
+      strokeWidth='2'
+      strokeLinecap='round'
+      strokeLinejoin='round'
+      {...props}
+    >
+      <title>Figma</title>
+      <path strokeWidth='0' d='M0 0h24v24H0z' fill='none' />
+      <path d='M15 12m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0' />
+      <path d='M6 3m0 3a3 3 0 0 1 3 -3h6a3 3 0 0 1 3 3v0a3 3 0 0 1 -3 3h-6a3 3 0 0 1 -3 -3z' />
+      <path d='M9 9a3 3 0 0 0 0 6h3m-3 0a3 3 0 1 0 3 3v-15' />
+    </svg>
+  )
+}

src/assets/brand-icons/icon-figma.tsx

@@ -0,0 +1,25 @@
+import { SVGProps } from 'react'
+import { cn } from '@/lib/utils'
+
+export function IconGithub({ className, ...props }: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      role='img'
+      viewBox='0 0 24 24'
+      xmlns='http://www.w3.org/2000/svg'
+      width='24'
+      height='24'
+      className={cn('[&>path]:stroke-current', className)}
+      fill='none'
+      stroke='currentColor'
+      strokeWidth='2'
+      strokeLinecap='round'
+      strokeLinejoin='round'
+      {...props}
+    >
+      <title>GitHub</title>
+      <path strokeWidth='0' d='M0 0h24v24H0z' fill='none' />
+      <path d='M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5' />
+    </svg>
+  )
+}

src/assets/brand-icons/icon-github.tsx

@@ -0,0 +1,25 @@
+import { SVGProps } from 'react'
+import { cn } from '@/lib/utils'
+
+export function IconGitlab({ className, ...props }: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      role='img'
+      viewBox='0 0 24 24'
+      xmlns='http://www.w3.org/2000/svg'
+      width='24'
+      height='24'
+      className={cn('[&>path]:stroke-current', className)}
+      fill='none'
+      stroke='currentColor'
+      strokeWidth='2'
+      strokeLinecap='round'
+      strokeLinejoin='round'
+      {...props}
+    >
+      <title>GitLab</title>
+      <path strokeWidth='0' d='M0 0h24v24H0z' fill='none' />
+      <path d='M21 14l-9 7l-9 -7l3 -11l3 7h6l3 -7z' />
+    </svg>
+  )
+}