chore: switch from heroicons to primer icons

app/components/Attribute.tsx

@@ -1,4 +1,4 @@
-import { ClipboardIcon } from '@heroicons/react/24/outline'
+import { CopyIcon } from '@primer/octicons-react'
 
 import { toast } from './Toaster'
 
@@ -28,7 +28,7 @@ export default function Attribute({ name, value, isCopyable }: Properties) {
 					<dd className='min-w-0 truncate px-2 py-1'>
 						{value}
 					</dd>
-					<ClipboardIcon className='text-gray-600 dark:text-gray-200 pr-2 w-max h-4'/>
+					<CopyIcon className='text-gray-600 dark:text-gray-200 pr-2 w-max h-4'/>
 				</button>
 			) : (
 				<dd className='min-w-0 truncate px-2 py-1'>

app/components/Error.tsx

@@ -1,4 +1,4 @@
-import { ExclamationTriangleIcon } from '@heroicons/react/24/outline'
+import { AlertIcon } from '@primer/octicons-react'
 import { isRouteErrorResponse, useRouteError } from '@remix-run/react'
 import { useState } from 'react'
 
@@ -23,7 +23,7 @@ export function ErrorPopup({ type = 'full' }: Properties) {
 		<Dialog>
 			<Dialog.Panel
 				className={cn(
-					type === 'embedded' ? 'pointer-events-none bg-transparent dark:bg-transparent' : '',
+					type === 'embedded' ? 'pointer-events-none bg-transparent dark:bg-transparent' : ''
 				)}
 				control={open}
 			>
@@ -33,7 +33,7 @@ export function ErrorPopup({ type = 'full' }: Properties) {
 							<Dialog.Title className='text-3xl mb-0'>
 								{routing ? error.status : 'Error'}
 							</Dialog.Title>
-							<ExclamationTriangleIcon className='w-12 h-12 text-red-500'/>
+							<AlertIcon className='w-12 h-12 text-red-500'/>
 						</div>
 						<Dialog.Text className='mt-4 text-lg'>
 							{routing ? (

app/components/Notice.tsx

@@ -1,4 +1,4 @@
-import { InformationCircleIcon } from '@heroicons/react/24/outline'
+import { InfoIcon } from '@primer/octicons-react'
 import clsx from 'clsx'
 import { type ReactNode } from 'react'
 
@@ -9,7 +9,7 @@ export default function Notice({ children }: { readonly children: ReactNode }) {
 			'bg-slate-400 dark:bg-slate-700'
 		)}
 		>
-			<InformationCircleIcon className='h-6 w-6 text-white'/>
+			<InfoIcon className='h-6 w-6 text-white'/>
 			{children}
 		</div>
 	)

app/components/Toaster.tsx

@@ -1,4 +1,4 @@
-import { XMarkIcon } from '@heroicons/react/24/outline'
+import { XIcon } from '@primer/octicons-react'
 import { type AriaToastProps, useToast, useToastRegion } from '@react-aria/toast'
 import { ToastQueue, type ToastState, useToastQueue } from '@react-stately/toast'
 import { type ReactNode, useRef } from 'react'
@@ -35,7 +35,7 @@ function Toast({ state, ...properties }: ToastProperties) {
 					'hover:bg-main-600 dark:hover:bg-main-700'
 				)}
 			>
-				<XMarkIcon className='w-4 h-4'/>
+				<XIcon className='w-4 h-4'/>
 			</Button>
 		</div>
 	)