perf: optimize icons

apps/web/package.json

@@ -43,7 +43,6 @@
     "openapi-fetch": "^0.13.3",
     "openapi-typescript": "^7.4.4",
     "postcss": "^8.4.49",
-    "solid-heroicons": "^3.2.4",
     "solid-js": "^1.9.3",
     "solid-sonner": "^0.2.8",
     "solid-transition-group": "^0.2.3",

apps/web/src/features/change-locale/components/LocaleSwitcher.tsx

@@ -1,6 +1,4 @@
-import { Button, Select } from "@quotepedia/solid";
-import { Icon } from "solid-heroicons";
-import { check, chevronUpDown } from "solid-heroicons/solid-mini";
+import { Button, Icon, Select } from "@quotepedia/solid";
 import { type Component } from "solid-js";
 import { Locale, LOCALES, useI18n } from "~/shared/i18n";
 
@@ -22,19 +20,22 @@ export const LocaleSwitcher: Component = () => {
       itemComponent={(props) => (
         <Select.Item item={props.item}>
           <Select.ItemLabel class="flex items-center gap-1.5 capitalize">
+            <Icon icon={`circle-flags:${props.item.rawValue}`} class="ring-bg-tertiary size-4 rounded-full ring-1" />
             <span>{getNativeLanguageName(props.item.rawValue)}</span>
             <span class="text-fg-muted">—</span>
             <span class="text-fg-muted">{getLanguageName(props.item.rawValue)}</span>
           </Select.ItemLabel>
-          <Select.ItemIndicator as={Icon} path={check} class="text-fg-accent size-4 stroke-current" />
+          <Select.ItemIndicator>
+            <Icon icon="heroicons:check-20-solid" class="text-fg-accent size-4 stroke-current" />
+          </Select.ItemIndicator>
         </Select.Item>
       )}
     >
       <Select.Trigger as={Button} aria-busy={i18n.isSettingLocale()} disabled={i18n.isSettingLocale()}>
         <Select.Value<Locale> class="capitalize">
           {(state) => getNativeLanguageName(state.selectedOption())}
         </Select.Value>
-        <Icon path={chevronUpDown} class="size-4" />
+        <Icon icon="heroicons:chevron-up-down-16-solid" class="size-4" />
       </Select.Trigger>
       <Select.Content inert={i18n.isSettingLocale()}>
         <Select.ListBox class="outline-none" />

apps/web/src/features/change-theme/components/ThemeSwitcher.tsx

@@ -1,6 +1,5 @@
 import { RadioGroup } from "@kobalte/core/radio-group";
-import { Icon } from "solid-heroicons";
-import { check } from "solid-heroicons/solid-mini";
+import { Icon } from "@quotepedia/solid";
 import { For, JSX } from "solid-js";
 import { TransitionGroup } from "solid-transition-group";
 import { useScopedTranslator } from "~/shared/i18n";
@@ -30,7 +29,7 @@ export const ThemeSwitcher = (props: ThemeSwitcherProps) => {
                     exitToClass="scale-0 opacity-0 -translate-x-full"
                     exitActiveClass="absolute transition-[transform,opacity]"
                   >
-                    <RadioGroup.ItemIndicator as={Icon} path={check} class="size-3 stroke-current" />
+                    <RadioGroup.ItemIndicator as={Icon} icon="heroicons:check-20-solid" class="size-3 stroke-current" />
                     <span class="select-none text-xs font-semibold leading-none">{t(theme)}</span>
                   </TransitionGroup>
                 </div>

apps/web/src/features/update-avatar/components/AvatarEdit.tsx

@@ -1,8 +1,6 @@
-import { Avatar, Button, Dialog, Dropdown, Separator, Stack } from "@quotepedia/solid";
+import { Icon, Avatar, Button, Dialog, Dropdown, Separator, Stack } from "@quotepedia/solid";
 import { createFileUploader } from "@solid-primitives/upload";
 import { useAction, useSubmission } from "@solidjs/router";
-import { Icon } from "solid-heroicons";
-import { arrowTopRightOnSquare, arrowUpTray, camera, trash } from "solid-heroicons/solid-mini";
 import { Component, createSignal, Show } from "solid-js";
 import { toast } from "solid-sonner";
 import { removeCurrentUserAvatar, updateCurrentUserAvatar } from "~/entities/user";
@@ -43,7 +41,7 @@ export const AvatarEdit: Component<AvatarEditProps> = (props) => {
             alt={props.user.email}
           />
           <div class="absolute inset-0 flex flex-col items-center justify-center bg-black/50 font-semibold text-white opacity-0 transition-opacity hover:opacity-100">
-            <Icon path={camera} class="size-8" />
+            <Icon icon="heroicons:camera-16-solid" class="size-8" />
             <span>{t("update")}</span>
           </div>
         </Dropdown.Trigger>
@@ -52,23 +50,23 @@ export const AvatarEdit: Component<AvatarEditProps> = (props) => {
             {(avatar_url) => (
               <>
                 <Dropdown.Item onSelect={() => window.open(formatStorageObject(avatar_url()), "_blank")}>
-                  <Icon path={arrowTopRightOnSquare} class="size-4" />
+                  <Icon icon="heroicons:arrow-top-right-on-square-16-solid" class="size-4" />
                   <Dropdown.ItemLabel>{t("dropdown.open")}</Dropdown.ItemLabel>
                 </Dropdown.Item>
                 <Separator orientation="horizontal" class="my-0.5" />
               </>
             )}
           </Show>
           <Dropdown.Item onSelect={selectAvatar} disabled={updatingAvatar.pending}>
-            <Icon path={arrowUpTray} class="size-4" />
+            <Icon icon="heroicons:arrow-up-tray-16-solid" class="size-4" />
             <Dropdown.ItemLabel>{t("dropdown.select")}</Dropdown.ItemLabel>
           </Dropdown.Item>
           <Dropdown.Item
             class="text-red-600"
             onSelect={openRemoveAvatarConfirm}
             disabled={!props.user.avatar_url || removingAvatar.pending}
           >
-            <Icon path={trash} class="size-4" />
+            <Icon icon="heroicons:trash-16-solid" class="size-4" />
             <Dropdown.ItemLabel>{t("dropdown.remove")}</Dropdown.ItemLabel>
           </Dropdown.Item>
         </Dropdown.Content>

apps/web/src/features/update-email/components/EmailUpdatedStep.tsx

@@ -1,7 +1,5 @@
-import { Button, Heading, Lottie, Stack, Stepper, Text } from "@quotepedia/solid";
+import { Button, Heading, Lottie, Stack, Stepper, Text, Icon } from "@quotepedia/solid";
 import { A } from "@solidjs/router";
-import { Icon } from "solid-heroicons";
-import { arrowRight } from "solid-heroicons/solid-mini";
 import { useScopedTranslator } from "~/shared/i18n";
 import { useUpdateEmail } from "../context";
 
@@ -23,7 +21,7 @@ export const EmailUpdatedStep = () => {
             <Text size="sm" variant="danger">
               {context.store.previousEmail}
             </Text>
-            <Icon class="text-fg-muted size-3.5" path={arrowRight} />
+            <Icon icon="heroicons:arrow-right-16-solid" class="text-fg-muted size-3.5" />
             <Text size="sm" variant="success">
               {context.store.email}
             </Text>

apps/web/src/features/update-password/components/PasswordUpdatedStep.tsx

@@ -1,7 +1,5 @@
-import { Button, Heading, Lottie, Stack, Stepper, Text } from "@quotepedia/solid";
+import { Icon, Button, Heading, Lottie, Stack, Stepper, Text } from "@quotepedia/solid";
 import { A } from "@solidjs/router";
-import { Icon } from "solid-heroicons";
-import { arrowRight } from "solid-heroicons/solid-mini";
 import { useScopedTranslator } from "~/shared/i18n";
 
 export const PasswordUpdatedStep = () => {
@@ -20,7 +18,7 @@ export const PasswordUpdatedStep = () => {
             <Text size="lg" variant="danger">
               ••••••••
             </Text>
-            <Icon class="text-fg-muted size-4" path={arrowRight} />
+            <Icon icon="heroicons:arrow-right-16-solid" class="text-fg-muted size-4" />
             <Text size="lg" variant="success">
               ••••••••
             </Text>

apps/web/src/widgets/aside/Aside.tsx

@@ -6,7 +6,6 @@ import { formatStorageObject } from "~/shared/api";
 import { useTranslator } from "~/shared/i18n";
 
 import { DEFAULT_APP_TITLE } from "../title";
-import { cog, library, telescope } from "./icons";
 import { Sidebar } from "./sidebar";
 
 export const Aside = () => {
@@ -18,11 +17,11 @@ export const Aside = () => {
       <Sidebar.Group class="max-lg:basis-2/3">
         <Sidebar.GroupLabel>{DEFAULT_APP_TITLE}</Sidebar.GroupLabel>
         <Sidebar.Item href="/" end>
-          <Sidebar.ItemIcon path={telescope} />
+          <Sidebar.ItemIcon icon="ion:telescope" />
           <Sidebar.ItemLabel>{t("routes.explore.title")}</Sidebar.ItemLabel>
         </Sidebar.Item>
         <Sidebar.Item href="/library">
-          <Sidebar.ItemIcon path={library} />
+          <Sidebar.ItemIcon icon="ion:library" />
           <Sidebar.ItemLabel>{t("routes.library.title")}</Sidebar.ItemLabel>
         </Sidebar.Item>
       </Sidebar.Group>
@@ -33,7 +32,7 @@ export const Aside = () => {
 
       <Sidebar.Group class="max-lg:basis-1/3 lg:mt-auto">
         <Sidebar.Item href="/settings" class="group">
-          <Show when={currentUser()} fallback={<Sidebar.ItemIcon path={cog} />}>
+          <Show when={currentUser()} fallback={<Sidebar.ItemIcon icon="ion:cog" />}>
             {(user) => (
               <Sidebar.ItemIcon as={Avatar}>
                 <Avatar.Img src={user().avatar_url && formatStorageObject(user().avatar_url!)} alt={user().email} />

apps/web/src/widgets/aside/sidebar/ItemIcon.tsx

@@ -1,21 +1,15 @@
 import { Polymorphic, type PolymorphicProps } from "@kobalte/core";
-import { Icon } from "solid-heroicons";
-import { splitProps, type JSX, type ValidComponent } from "solid-js";
 import { cn } from "@quotepedia/solid";
+import { Icon, type IconProps } from "@quotepedia/solid/components/icon";
+import { splitProps, type ValidComponent } from "solid-js";
 
-export type IconProps = {
-  path?: {
-    path?: JSX.Element;
-    outline?: boolean;
-    mini?: boolean;
-  };
+export type SidebarItemIconProps = Omit<IconProps, "icon"> & {
+  icon?: string;
 };
 
-export type SidebarIconProps = IconProps & JSX.StylableSVGAttributes;
-
-export const SidebarItemIcon = <T extends ValidComponent>(props: PolymorphicProps<T, SidebarIconProps>) => {
-  const [scopedProps, otherProps] = splitProps(props, ["class"]);
-  return <Polymorphic as={Icon} class={cn("size-6 lg:size-4", scopedProps.class)} {...otherProps} />;
+export const SidebarItemIcon = <T extends ValidComponent>(props: PolymorphicProps<T, SidebarItemIconProps>) => {
+  const [localProps, otherProps] = splitProps(props, ["class"]);
+  return <Polymorphic as={Icon} class={cn("size-6 lg:size-4", localProps.class)} {...otherProps} />;
 };
 
 export default SidebarItemIcon;

apps/web/src/widgets/nav.tsx

@@ -1,7 +1,5 @@
-import { Heading, Link } from "@quotepedia/solid";
+import { Icon, Heading, Link } from "@quotepedia/solid";
 import { A, useCurrentMatches } from "@solidjs/router";
-import { Icon } from "solid-heroicons";
-import { chevronLeft } from "solid-heroicons/solid-mini";
 import { createMemo, Show } from "solid-js";
 
 export const Navigation = () => {
@@ -18,7 +16,7 @@ export const Navigation = () => {
     <Show when={breadcrumbs().length > 1} fallback={<Heading class="mb-4">{current()?.route.info?.title?.()}</Heading>}>
       <nav class="relative mb-8 flex text-base leading-none max-lg:-mx-4 max-lg:-mt-4">
         <Link as={A} href={previous()?.path} class="absolute inset-y-1/2 left-0 flex items-center justify-center">
-          <Icon path={chevronLeft} class="size-8" />
+          <Icon icon="heroicons:chevron-left-16-solid" class="size-8" />
           {previous()?.route.info?.title?.()}
         </Link>
         <Heading size="base" class="mx-auto lg:text-lg">

apps/web/src/widgets/settings/components/AccountSecuritySection.tsx

@@ -1,7 +1,5 @@
-import { Heading, SettingsCard, SettingsGroup, Stack } from "@quotepedia/solid";
+import { Icon, Heading, SettingsCard, SettingsGroup, Stack } from "@quotepedia/solid";
 import { A, createAsync, useSubmission } from "@solidjs/router";
-import { Icon } from "solid-heroicons";
-import { arrowRightOnRectangle, chevronRight, envelopeOpen, key } from "solid-heroicons/solid-mini";
 import { Show } from "solid-js";
 import { unauthenticate } from "~/entities/auth";
 import { getCurrentUser } from "~/entities/user";
@@ -24,22 +22,22 @@ export const AccountSecuritySection = () => {
 
           <SettingsGroup>
             <SettingsCard variant="hover" as={A} href="/settings/account/update-email">
-              <Icon path={envelopeOpen} class="size-4" />
+              <Icon icon="heroicons:envelope-open-16-solid" class="size-4" />
               <SettingsCard.HeaderGroup>
                 <SettingsCard.Header>{t("cards.email.heading")}</SettingsCard.Header>
                 <SettingsCard.Description>{t("cards.email.description")}</SettingsCard.Description>
               </SettingsCard.HeaderGroup>
               <SettingsCard.Value>{user().email}</SettingsCard.Value>
-              <Icon path={chevronRight} class="text-fg-muted size-4" />
+              <Icon icon="heroicons:chevron-right-16-solid" class="text-fg-muted size-4" />
             </SettingsCard>
 
             <SettingsCard variant="hover" as={A} href="/settings/account/update-password">
-              <Icon path={key} class="size-4" />
+              <Icon icon="heroicons:key-16-solid" class="size-4" />
               <SettingsCard.HeaderGroup>
                 <SettingsCard.Header>{t("cards.password.heading")}</SettingsCard.Header>
                 <SettingsCard.Description>{t("cards.password.description")}</SettingsCard.Description>
               </SettingsCard.HeaderGroup>
-              <Icon path={chevronRight} class="text-fg-muted size-4" />
+              <Icon icon="heroicons:chevron-right-16-solid" class="text-fg-muted size-4" />
             </SettingsCard>
           </SettingsGroup>
 
@@ -51,12 +49,12 @@ export const AccountSecuritySection = () => {
               aria-busy={unauthenticating.pending}
               variant="hover"
             >
-              <Icon path={arrowRightOnRectangle} class="size-4 text-red-600" />
+              <Icon icon="heroicons:arrow-right-on-rectangle-20-solid" class="size-4 text-red-600" />
               <SettingsCard.HeaderGroup>
                 <SettingsCard.Header class="text-red-600">{t("cards.signout.heading")}</SettingsCard.Header>
                 <SettingsCard.Description>{t("cards.signout.description")}</SettingsCard.Description>
               </SettingsCard.HeaderGroup>
-              <Icon path={chevronRight} class="text-fg-muted size-4" />
+              <Icon icon="heroicons:chevron-right-16-solid" class="text-fg-muted size-4" />
             </SettingsCard>
           </SettingsGroup>
         </Stack.Vertical>

apps/web/src/widgets/settings/components/SettingsAboutSection.tsx

@@ -1,8 +1,6 @@
 import { Image } from "@kobalte/core/image";
-import { Heading, Separator, SettingsCard, SettingsExpander, SettingsGroup, Stack } from "@quotepedia/solid";
+import { Icon, Heading, Separator, SettingsCard, SettingsExpander, SettingsGroup, Stack } from "@quotepedia/solid";
 import { A } from "@solidjs/router";
-import { Icon } from "solid-heroicons";
-import { arrowTopRightOnSquare, chatBubbleOvalLeft, codeBracket, flag, informationCircle } from "solid-heroicons/solid-mini";
 import { useScopedTranslator } from "~/shared/i18n";
 
 export const SettingsAboutSection = () => {
@@ -19,7 +17,7 @@ export const SettingsAboutSection = () => {
           <SettingsExpander.Trigger>
             <Image class="size-4">
               <Image.Img src="/favicon.svg" alt={import.meta.env.APP_NAME} />
-              <Image.Fallback as={Icon} path={informationCircle} />
+              <Image.Fallback as={Icon} icon="heroicons:information-circle-16-solid" />
             </Image>
             <SettingsCard.HeaderGroup>
               <SettingsCard.Header class="capitalize">{import.meta.env.APP_NAME}</SettingsCard.Header>
@@ -32,21 +30,21 @@ export const SettingsAboutSection = () => {
           </SettingsExpander.Trigger>
           <SettingsExpander.Content>
             <SettingsCard variant="hover" as={A} href={import.meta.env.APP_BUGS_URL} target="_blank">
-              <Icon path={flag} class="size-4" />
+              <Icon icon="heroicons:flag-16-solid" class="size-4" />
               <SettingsCard.HeaderGroup>
                 <SettingsCard.Header>{t("cards.app.feedback.heading")}</SettingsCard.Header>
                 <SettingsCard.Description>{import.meta.env.APP_BUGS_URL}</SettingsCard.Description>
               </SettingsCard.HeaderGroup>
-              <Icon path={arrowTopRightOnSquare} class="text-fg-muted size-4" />
+              <Icon icon="heroicons:arrow-top-right-on-square-16-solid" class="text-fg-muted size-4" />
             </SettingsCard>
             <Separator orientation="horizontal" />
             <SettingsCard variant="hover" as={A} href={import.meta.env.APP_REPOSITORY_URL} target="_blank">
-              <Icon path={codeBracket} class="size-4" />
+              <Icon icon="heroicons:code-bracket-16-solid" class="size-4" />
               <SettingsCard.HeaderGroup>
                 <SettingsCard.Header>{t("cards.app.contribute.heading")}</SettingsCard.Header>
                 <SettingsCard.Description>{import.meta.env.APP_REPOSITORY_URL}</SettingsCard.Description>
               </SettingsCard.HeaderGroup>
-              <Icon path={arrowTopRightOnSquare} class="text-fg-muted size-4" />
+              <Icon icon="heroicons:arrow-top-right-on-square-16-solid" class="text-fg-muted size-4" />
             </SettingsCard>
           </SettingsExpander.Content>
         </SettingsExpander>