Remove Icon component in BUI

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>

docs-ui/src/components/Toolbar/theme-name.tsx

@@ -9,8 +9,8 @@ import {
   SelectValue,
 } from 'react-aria-components';
 import styles from './theme-name.module.css';
-import { Icon } from '@backstage/ui';
 import { usePlayground } from '@/utils/playground-context';
+import { RiArrowDownSLine } from '@remixicon/react';
 
 const themes = [
   { name: 'Backstage', value: 'backstage' },
@@ -28,7 +28,7 @@ export const ThemeNameSelector = () => {
     >
       <Button className={styles.Select}>
         <SelectValue />
-        <Icon name="chevron-down" />
+        <RiArrowDownSLine aria-hidden="true" />
       </Button>
       <Popover className={styles.Popup}>
         <ListBox className={styles.ListBox}>

docs-ui/src/components/Toolbar/theme.tsx

@@ -1,9 +1,9 @@
 'use client';
 
 import { Tabs } from '@base-ui-components/react/tabs';
-import { Icon } from '@backstage/ui';
 import { usePlayground } from '@/utils/playground-context';
 import styles from './theme.module.css';
+import { RiMoonLine, RiSunLine } from '@remixicon/react';
 
 export const ThemeSelector = () => {
   const { selectedTheme, setSelectedTheme } = usePlayground();
@@ -16,10 +16,10 @@ export const ThemeSelector = () => {
     >
       <Tabs.List className={styles.list}>
         <Tabs.Tab className={styles.tab} value="light">
-          <Icon name="sun" />
+          <RiSunLine aria-hidden="true" size={16} />
         </Tabs.Tab>
         <Tabs.Tab className={styles.tab} value="dark">
-          <Icon name="moon" />
+          <RiMoonLine aria-hidden="true" size={16} />
         </Tabs.Tab>
         <Tabs.Indicator className={styles.indicator} />
       </Tabs.List>

docs-ui/src/snippets/stories-snippets.tsx

@@ -8,7 +8,6 @@ import * as ButtonLinkStories from '../../../packages/ui/src/components/ButtonLi
 import * as CheckboxStories from '../../../packages/ui/src/components/Checkbox/Checkbox.stories';
 import * as ContainerStories from '../../../packages/ui/src/components/Container/Container.stories';
 import * as GridStories from '../../../packages/ui/src/components/Grid/Grid.stories';
-import * as IconStories from '../../../packages/ui/src/components/Icon/Icon.stories';
 import * as TextFieldStories from '../../../packages/ui/src/components/TextField/TextField.stories';
 import * as TextStories from '../../../packages/ui/src/components/Text/Text.stories';
 import * as FlexStories from '../../../packages/ui/src/components/Flex/Flex.stories';
@@ -53,7 +52,6 @@ export const ButtonLinkSnippet = createSnippetComponent(ButtonLinkStories);
 export const CheckboxSnippet = createSnippetComponent(CheckboxStories);
 export const ContainerSnippet = createSnippetComponent(ContainerStories);
 export const GridSnippet = createSnippetComponent(GridStories);
-export const IconSnippet = createSnippetComponent(IconStories);
 export const TextFieldSnippet = createSnippetComponent(TextFieldStories);
 export const PasswordFieldSnippet =
   createSnippetComponent(PasswordFieldStories);

docs-ui/src/utils/data.ts

@@ -116,11 +116,6 @@ export const components: Page[] = [
     slug: 'header-page',
     status: 'alpha',
   },
-  {
-    title: 'Icon',
-    slug: 'icon',
-    status: 'alpha',
-  },
   {
     title: 'Link',
     slug: 'link',