refactor(icons): replace fa icons [EE-4459] (#7907)

refactor(icons): remove fontawesome EE-4459

refactor(icon) replace feather with lucide EE-4472

app/react/components/DashboardItem/DashboardItem.stories.tsx

@@ -1,6 +1,8 @@
 import { Meta, Story } from '@storybook/react';
+import { List } from 'lucide-react';
 
 import { Link } from '@@/Link';
+import { IconProps } from '@@/Icon';
 
 import { DashboardItem } from './DashboardItem';
 
@@ -12,7 +14,7 @@ export default meta;
 
 interface StoryProps {
   value: number;
-  icon: string;
+  icon: IconProps['icon'];
   type: string;
 }
 
@@ -23,21 +25,21 @@ function Template({ value, icon, type }: StoryProps) {
 export const Primary: Story<StoryProps> = Template.bind({});
 Primary.args = {
   value: 1,
-  icon: 'fa fa-th-list',
+  icon: List,
   type: 'Example resource',
 };
 
 export function WithLink() {
   return (
     <Link to="example.page">
-      <DashboardItem value={1} icon="fa fa-th-list" type="Example resource" />
+      <DashboardItem value={1} icon={List} type="Example resource" />
     </Link>
   );
 }
 
 export function WithChildren() {
   return (
-    <DashboardItem value={1} icon="fa fa-th-list" type="Example resource">
+    <DashboardItem value={1} icon={List} type="Example resource">
       <div>Children</div>
     </DashboardItem>
   );

app/react/components/DashboardItem/DashboardItem.test.tsx

@@ -1,3 +1,5 @@
+import { User } from 'lucide-react';
+
 import { render } from '@/react-tools/test-utils';
 
 import { DashboardItem } from './DashboardItem';
@@ -11,7 +13,7 @@ test('should show provided resource value', async () => {
 });
 
 test('should show provided resource type', async () => {
-  const { getByLabelText } = renderComponent(0, '', 'Test');
+  const { getByLabelText } = renderComponent(0, User, 'Test');
   const title = getByLabelText('resourceType');
 
   expect(title).toBeVisible();
@@ -19,11 +21,11 @@ test('should show provided resource type', async () => {
 });
 
 test('should have accessibility label created from the provided resource type', async () => {
-  const { getByLabelText } = renderComponent(0, '', 'testLabel');
+  const { getByLabelText } = renderComponent(0, User, 'testLabel');
 
   expect(getByLabelText('testLabel')).toBeTruthy();
 });
 
-function renderComponent(value = 0, icon = '', type = '') {
+function renderComponent(value = 0, icon = User, type = '') {
   return render(<DashboardItem value={value} icon={icon} type={type} />);
 }

app/react/components/DashboardItem/DashboardItem.tsx

@@ -10,13 +10,7 @@ interface Props extends IconProps {
   children?: ReactNode;
 }
 
-export function DashboardItem({
-  value,
-  icon,
-  type,
-  children,
-  featherIcon,
-}: Props) {
+export function DashboardItem({ value, icon, type, children }: Props) {
   return (
     <div
       className={clsx(
@@ -35,7 +29,7 @@ export function DashboardItem({
             'th-highcontrast:bg-blue-3 th-highcontrast:text-blue-8'
           )}
         >
-          <Icon icon={icon} feather={featherIcon} className="feather" />
+          <Icon icon={icon} />
         </div>
 
         <div className="flex flex-col justify-around">