[WIP] Remove @radix-ui/react-icon

packages/profile/src/components/achievements/trophies.tsx

@@ -1,9 +1,4 @@
-import {
-  ChevronLeftIcon,
-  ChevronRightIcon,
-  StateIconProps,
-  cn,
-} from "@cartridge/ui-next";
+import { WedgeIcon, cn } from "@cartridge/ui-next";
 import { Trophy } from "./trophy";
 import { Item } from "@/hooks/achievements";
 import { useCallback, useEffect, useMemo, useState } from "react";
@@ -217,13 +212,20 @@ function Header({
       </div>
       {pages.length > 1 && (
         <>
+          {/* <Icon
+        className={cn(
+          "text-quaternary-foreground h-4 w-4",
+          disabled && "opacity-50",
+        )}
+        variant="solid"
+      /> */}
           <Pagination
-            Icon={ChevronLeftIcon}
+            icon={<WedgeIcon variant="left" size="xs" />}
             onClick={handlePrevious}
             disabled={page === pages[0]}
           />
           <Pagination
-            Icon={ChevronRightIcon}
+            icon={<WedgeIcon variant="right" size="xs" />}
             onClick={handleNext}
             disabled={page === pages[pages.length - 1]}
           />
@@ -251,11 +253,11 @@ function Header({
 }
 
 function Pagination({
-  Icon,
+  icon,
   onClick,
   disabled,
 }: {
-  Icon: React.ComponentType<StateIconProps>;
+  icon: React.ReactNode;
   onClick: () => void;
   disabled: boolean;
 }) {
@@ -267,13 +269,7 @@ function Pagination({
       )}
       onClick={onClick}
     >
-      <Icon
-        className={cn(
-          "text-quaternary-foreground h-4 w-4",
-          disabled && "opacity-50",
-        )}
-        variant="solid"
-      />
+      <div className="text-quaternary-foreground">{icon}</div>
     </div>
   );
 }

packages/ui-next/src/components/icons/utility/index.ts

@@ -4,8 +4,6 @@ export * from "./arrow-turn-down";
 export * from "./check";
 export * from "./checkbox-checked";
 export * from "./checkbox-unchecked";
-export * from "./chevron-left";
-export * from "./chevron-right";
 export * from "./chess";
 export * from "./chest";
 export * from "./circle-check";

packages/ui-next/src/components/icons/utility/slash.tsx

@@ -1,13 +1,14 @@
 import { forwardRef, memo } from "react";
 import { iconVariants } from "../utils";
 import { IconProps } from "../types";
+import { cn } from "@/utils";
 
 export const SlashIcon = memo(
   forwardRef<SVGSVGElement, IconProps>(
     ({ className, size, ...props }, forwardedRef) => (
       <svg
         viewBox="0 0 15 15"
-        className={iconVariants({ size, className })}
+        className={cn("p-1", iconVariants({ size, className }))}
         ref={forwardedRef}
         {...props}
       >

packages/ui-next/src/components/primitives/accordion.tsx

@@ -3,7 +3,7 @@
 import * as React from "react";
 import * as AccordionPrimitive from "@radix-ui/react-accordion";
 import { cn } from "@/utils";
-import { ChevronRightIcon } from "@radix-ui/react-icons";
+import { WedgeIcon } from "../icons";
 
 const Accordion = AccordionPrimitive.Root;
 
@@ -29,7 +29,10 @@ const AccordionTrigger = React.forwardRef<
     >
       <div className={cn("flex items-center", className)}>{children}</div>
       {!hideIcon && (
-        <ChevronRightIcon className="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" />
+        <WedgeIcon
+          variant="right"
+          className="transition-transform duration-200"
+        />
       )}
     </AccordionPrimitive.Trigger>
   </AccordionPrimitive.Header>

packages/ui-next/src/components/primitives/breadcrumb.tsx

@@ -1,8 +1,8 @@
 import * as React from "react";
-import { ChevronRightIcon, DotsHorizontalIcon } from "@radix-ui/react-icons";
 import { Slot } from "@radix-ui/react-slot";
 
 import { cn } from "@/utils";
+import { DotsIcon, WedgeIcon } from "../icons";
 
 const Breadcrumb = React.forwardRef<
   HTMLElement,
@@ -19,7 +19,7 @@ const BreadcrumbList = React.forwardRef<
   <ol
     ref={ref}
     className={cn(
-      "flex flex-wrap items-center gap-2 break-words text-sm text-muted-foreground sm:gap-2.5",
+      "flex flex-wrap items-center gap-0 break-words text-sm text-muted-foreground",
       className,
     )}
     {...props}
@@ -80,10 +80,10 @@ const BreadcrumbSeparator = ({
   <li
     role="presentation"
     aria-hidden="true"
-    className={cn("[&>svg]:size-3.5", className)}
+    className={cn("[&>svg]:size-6", className)}
     {...props}
   >
-    {children ?? <ChevronRightIcon />}
+    {children ?? <WedgeIcon variant="right" />}
   </li>
 );
 BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
@@ -98,7 +98,7 @@ const BreadcrumbEllipsis = ({
     className={cn("flex h-9 w-9 items-center justify-center", className)}
     {...props}
   >
-    <DotsHorizontalIcon className="h-4 w-4" />
+    <DotsIcon size="sm" />
     <span className="sr-only">More</span>
   </span>
 );

packages/ui-next/src/stories/accordion.stories.tsx

@@ -25,7 +25,7 @@ function Accordion() {
   return (
     <UIAccordion type="single" collapsible>
       <AccordionItem value="item-1">
-        <AccordionTrigger>
+        <AccordionTrigger className="gap-1">
           Approve{" "}
           <span className="text-accent-foreground font-bold">2 methods</span>
         </AccordionTrigger>

packages/ui-next/src/stories/breadcrumb.stories.tsx

@@ -5,6 +5,7 @@ import {
   BreadcrumbList,
   BreadcrumbPage,
   BreadcrumbSeparator,
+  BreadcrumbEllipsis,
 } from "@/components/primitives/breadcrumb";
 import { SlashIcon } from "@/components/icons";
 import { Meta, StoryObj } from "@storybook/react";
@@ -55,7 +56,7 @@ export function CustomSeparator() {
           <BreadcrumbLink href="/components">Components</BreadcrumbLink>
         </BreadcrumbItem>
         <BreadcrumbSeparator>
-          <SlashIcon className="p-0" />
+          <SlashIcon />
         </BreadcrumbSeparator>
         <BreadcrumbItem>
           <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
@@ -64,3 +65,25 @@ export function CustomSeparator() {
     </UIBreadcrumb>
   );
 }
+
+export function Ellipsis() {
+  return (
+    <UIBreadcrumb>
+      <BreadcrumbList>
+        <BreadcrumbItem>
+          <BreadcrumbLink href="/">Home</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbEllipsis />
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbLink href="/components">Breadcrumb N</BreadcrumbLink>
+        </BreadcrumbItem>
+      </BreadcrumbList>
+    </UIBreadcrumb>
+  );
+}