chore: remove all custom Icons in favor of Lucide icons (#986)

Author: maiieul

apps/website/src/components/code-copy/code-copy.tsx

@@ -2,6 +2,7 @@ import { PropsOf, component$, useSignal } from '@builder.io/qwik';
 import { Button } from '~/components/ui';
 import { cn } from '@qwik-ui/utils';
 import copy from 'clipboard-copy';
+import { LuCheck, LuCopy } from '@qwikest/icons/lucide';
 
 export type CodeCopyProps = PropsOf<typeof Button> & {
   code?: string;
@@ -13,7 +14,7 @@ export const CodeCopy = component$<CodeCopyProps>(({ code = '', ...props }) => {
   return (
     <Button
       {...props}
-      look="link"
+      look="ghost"
       title={copied.value ? 'Copied to Clipboard' : 'Copy to Clipboard'}
       class={cn(props.class)}
       onClick$={async () => {
@@ -25,54 +26,7 @@ export const CodeCopy = component$<CodeCopyProps>(({ code = '', ...props }) => {
         }, 4000);
       }}
     >
-      {!copied.value ? (
-        <CopyIcon />
-      ) : (
-        <div class="flex gap-1">
-          <ClipboardCheck />
-        </div>
-      )}
+      {copied.value ? <LuCheck class="text-white" /> : <LuCopy class="text-white" />}
     </Button>
   );
 });
-
-export function CopyIcon(props: PropsOf<'svg'> & { color?: string }, key: string) {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="1.25em"
-      height="1.25em"
-      viewBox="0 0 16 16"
-      class="group"
-      {...props}
-      key={key}
-    >
-      <path
-        class="fill-slate-300 group-hover:fill-slate-100"
-        d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z"
-      ></path>
-      <path
-        class="fill-slate-300 group-hover:fill-slate-100"
-        d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"
-      ></path>
-    </svg>
-  );
-}
-
-export function ClipboardCheck(props: PropsOf<'svg'>, key: string) {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="1.25em"
-      height="1.25em"
-      viewBox="0 0 16 16"
-      {...props}
-      key={key}
-    >
-      <path
-        fill="white"
-        d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042a.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"
-      ></path>
-    </svg>
-  );
-}

apps/website/src/components/feature-list/feature-list.tsx

@@ -1,8 +1,6 @@
 import { component$ } from '@builder.io/qwik';
-import { CheckIcon } from '../icons/Check';
-import { Roadmap } from '../icons/Roadmap';
-import { IssueIcon } from '../icons/Issues';
 import { Note } from '../note/note';
+import { LuBadge, LuBadgeAlert, LuBadgeCheck } from '@qwikest/icons/lucide';
 
 type FeatureListProps = {
   features: string[];
@@ -22,7 +20,7 @@ export const FeatureList = component$((props: FeatureListProps) => {
                   key={descriptor}
                   class={`flex w-full list-none items-center gap-x-2 gap-y-4 ${index === props.features.length - 1 ? '' : 'border-b-[1px]'} border-slate-200 py-2 dark:border-slate-800`}
                 >
-                  <CheckIcon class="min-w-[21px]" />
+                  <LuBadgeCheck class="h-5 w-5 text-green-600" />
                   {descriptor}
                 </li>
               );
@@ -39,7 +37,7 @@ export const FeatureList = component$((props: FeatureListProps) => {
                     key={descriptor}
                     class="flex w-full list-none items-center gap-x-2 gap-y-4 border-b-[1px] border-slate-200 py-2 dark:border-slate-800"
                   >
-                    <Roadmap class="min-w-[21px]" />
+                    <LuBadge class="h-5 w-5 text-yellow-500" />
                     {descriptor}
                   </li>
                 </>
@@ -56,7 +54,7 @@ export const FeatureList = component$((props: FeatureListProps) => {
                     key={descriptor}
                     class="flex w-full list-none items-center gap-x-2 gap-y-4 border-b-[1px] border-slate-200 py-2 dark:border-slate-800"
                   >
-                    <IssueIcon class="min-w-[21px]" />
+                    <LuBadgeAlert class="h-5 w-5 text-red-500" />
                     {descriptor}
                   </li>
                 </>

apps/website/src/components/header/header.tsx

@@ -13,18 +13,14 @@ import { useLocation } from '@builder.io/qwik-city';
 // eslint-disable-next-line @nx/enforce-module-boundaries
 // eslint-disable-next-line @nx/enforce-module-boundaries
 import { version as styledKitVersion } from '../../../../../packages/kit-styled/package.json';
-import { CloseIcon } from '../icons/CloseIcon';
 import { GitHubIcon } from '../icons/GitHubIcon';
-import { MenuIcon } from '../icons/MenuIcon';
-import { MoonIcon } from '../icons/MoonIcon';
-import { SunIcon } from '../icons/SunIcon';
 import { LogoIcon, LogoWithBorders } from '../icons/logo';
 
 import { useTheme } from '@qwik-ui/themes';
 
 import { Modal } from '@qwik-ui/headless';
 import { useAppState } from '~/_state/use-app-state';
-import { LuX } from '@qwikest/icons/lucide';
+import { LuMenu, LuMoon, LuSun, LuX } from '@qwikest/icons/lucide';
 import { DocsNavigation } from '../navigation-docs/navigation-docs';
 import { useKitMenuItems } from '~/routes/layout';
 import { cn } from '@qwik-ui/utils';
@@ -193,7 +189,7 @@ export default component$(({ showVersion = false }: HeaderProps) => {
               look="ghost"
               class="flex lg:hidden"
             >
-              {isSidebarOpenedSig.value ? <CloseIcon /> : <MenuIcon />}
+              <LuMenu class="h-6 w-6" />
             </Button>
           </div>
         </div>
@@ -243,10 +239,10 @@ const DarkModeToggle = component$<PropsOf<typeof Button>>(({ ...props }) => {
       }
     >
       <div class="hidden dark:block">
-        <MoonIcon />
+        <LuMoon class="h-6 w-6" />
       </div>
       <div class="block dark:hidden">
-        <SunIcon />
+        <LuSun class="h-6 w-6" />
       </div>
     </Button>
   );