Move to @oxide/design-system icons

app/layouts/SiloLayout.tsx

@@ -8,13 +8,7 @@
 import { useMemo } from 'react'
 import { useLocation, useNavigate } from 'react-router-dom'
 
-import {
- Access16Icon,
- Divider,
- Folder16Icon,
- Images16Icon,
- Snapshots16Icon,
-} from '@oxide/ui'
+import { Access16Icon, Divider, Folder16Icon, Images16Icon, Metrics16Icon } from '@oxide/ui'
 
 import { DocsLinkItem, NavLinkItem, Sidebar } from 'app/components/Sidebar'
 import { TopBar } from 'app/components/TopBar'
@@ -69,7 +63,7 @@ export function SiloLayout() {
  <Images16Icon /> Images
  </NavLinkItem>
  <NavLinkItem to={pb.siloUtilization()}>
- <Snapshots16Icon /> Utilization
+ <Metrics16Icon /> Utilization
  </NavLinkItem>
  <NavLinkItem to={pb.siloAccess()}>
  <Access16Icon /> Access & IAM

app/layouts/SystemLayout.tsx

@@ -12,8 +12,8 @@ import { apiQueryClient } from '@oxide/api'
 import {
  Cloud16Icon,
  Divider,
+ Metrics16Icon,
  Settings16Icon,
- Snapshots16Icon,
  Storage16Icon,
 } from '@oxide/ui'
 
@@ -104,7 +104,7 @@ export default function SystemLayout() {
  <Instances16Icon /> Issues
  </NavLinkItem> */}
  <NavLinkItem to={pb.systemUtilization()}>
- <Snapshots16Icon /> Utilization
+ <Metrics16Icon /> Utilization
  </NavLinkItem>
  <NavLinkItem to={pb.sledInventory()}>
  <Storage16Icon /> Inventory

app/pages/SiloUtilizationPage.tsx

@@ -10,7 +10,7 @@ import { useIsFetching } from '@tanstack/react-query'
 import { useMemo, useState } from 'react'
 
 import { apiQueryClient, usePrefetchedApiQuery } from '@oxide/api'
-import { Divider, Listbox, PageHeader, PageTitle, Snapshots24Icon } from '@oxide/ui'
+import { Divider, Listbox, Metrics24Icon, PageHeader, PageTitle } from '@oxide/ui'
 import { bytesToGiB, bytesToTiB } from '@oxide/util'
 
 import { useIntervalPicker } from 'app/components/RefetchIntervalPicker'
@@ -63,7 +63,7 @@ export function SiloUtilizationPage() {
  return (
  <>
  <PageHeader>
- <PageTitle icon={<Snapshots24Icon />}>Capacity &amp; Utilization</PageTitle>
+ <PageTitle icon={<Metrics24Icon />}>Capacity &amp; Utilization</PageTitle>
  </PageHeader>
 
  <div className="flex justify-between gap-3">

app/pages/system/CapacityUtilizationPage.tsx

@@ -14,10 +14,10 @@ import {
  Cpu16Icon,
  Divider,
  Listbox,
+ Metrics24Icon,
  PageHeader,
  PageTitle,
  Ram16Icon,
- Snapshots24Icon,
  Ssd16Icon,
 } from '@oxide/ui'
 import { bytesToGiB, bytesToTiB } from '@oxide/util'
@@ -85,7 +85,7 @@ export function CapacityUtilizationPage() {
  return (
  <>
  <PageHeader>
- <PageTitle icon={<Snapshots24Icon />}>Capacity &amp; Utilization</PageTitle>
+ <PageTitle icon={<Metrics24Icon />}>Capacity &amp; Utilization</PageTitle>
  </PageHeader>
 
  <div className="mb-12 flex min-w-min flex-col gap-3 lg+:flex-row">

libs/ui/index.ts

@@ -23,7 +23,7 @@ export * from './lib/dropdown-menu/DropdownMenu'
 export * from './lib/file-input/FileInput'
 export * from './lib/empty-message/EmptyMessage'
 export * from './lib/field-label/FieldLabel'
-export * from './lib/icons'
+
 export * from './lib/identicon/Identicon'
 export * from './lib/message/Message'
 export * from './lib/listbox/Listbox'
@@ -48,3 +48,5 @@ export * from './lib/toast/Toast'
 export * from './lib/tooltip/Tooltip'
 export * from './lib/truncate/Truncate'
 export * from './util/wrap'
+
+export * from '@oxide/design-system/icons/react'

libs/ui/lib/ModalLinks.tsx

@@ -7,7 +7,7 @@
  */
 import type { ReactNode } from 'react'
 
-import { OpenLink12Icon } from './icons'
+import { OpenLink12Icon } from '@oxide/design-system/icons/react'
 
 export const ModalLinks = ({
  heading,

libs/ui/lib/action-menu/ActionMenu.tsx

@@ -10,7 +10,7 @@ import cn from 'classnames'
 import { matchSorter } from 'match-sorter'
 import React, { useState } from 'react'
 
-import { Close12Icon } from '@oxide/ui'
+import { Close12Icon } from '@oxide/design-system/icons/react'
 import { classed, groupBy } from '@oxide/util'
 
 import { useSteppedScroll } from '../hooks/use-stepped-scroll'

libs/ui/lib/checkbox/Checkbox.tsx

@@ -7,7 +7,7 @@
  */
 import cn from 'classnames'
 
-import { Checkmark12Icon } from '@oxide/ui'
+import { Checkmark12Icon } from '@oxide/design-system/icons/react'
 import { classed } from '@oxide/util'
 
 const Check = () => (

libs/ui/lib/date-picker/DatePicker.tsx

@@ -15,7 +15,8 @@ import { useDateFormatter } from 'react-aria'
 import { useDatePickerState } from 'react-stately'
 import type { DatePickerStateOptions } from 'react-stately'
 
-import { Calendar16Icon, Error12Icon } from '../icons'
+import { Calendar16Icon, Error12Icon } from '@oxide/design-system/icons/react'
+
 import { Calendar } from './Calendar'
 import { TimeField } from './DateField'
 import { Dialog } from './Dialog'

libs/ui/lib/date-picker/DateRangePicker.tsx

@@ -14,7 +14,8 @@ import { useDateFormatter } from 'react-aria'
 import { useDateRangePickerState } from 'react-stately'
 import type { DateRangePickerStateOptions } from 'react-stately'
 
-import { Calendar16Icon, Error12Icon } from '../icons'
+import { Calendar16Icon, Error12Icon } from '@oxide/design-system/icons/react'
+
 import { TimeField } from './DateField'
 import { Dialog } from './Dialog'
 import { Popover } from './Popover'

libs/ui/lib/date-picker/RangeCalendar.tsx

@@ -15,7 +15,8 @@ import { useLocale, useRangeCalendar } from 'react-aria'
 import { useRangeCalendarState } from 'react-stately'
 import type { CalendarState, RangeCalendarState } from 'react-stately'
 
-import { DirectionLeftIcon, DirectionRightIcon } from '../icons'
+import { DirectionLeftIcon, DirectionRightIcon } from '@oxide/design-system/icons/react'
+
 import { CalendarGrid } from './CalendarGrid'
 
 export function RangeCalendar(props: RangeCalendarProps<DateValue>) {

libs/ui/lib/empty-message/EmptyMessage.stories.tsx

@@ -5,7 +5,8 @@
  *
  * Copyright Oxide Computer Company
  */
-import { Instances24Icon } from '../icons'
+import { Instances24Icon } from '@oxide/design-system/icons/react'
+
 import { EmptyMessage } from './EmptyMessage'
 
 export const Default = () => (