use feather-react package for icons

packages/ui/components/core/Button.stories.tsx

@@ -1,5 +1,5 @@
-import { Icon } from '@iconify/react'
 import { ComponentMeta, ComponentStory } from '@storybook/react'
+import { Heart, Map, Sliders } from 'react-feather'
 
 import React from 'react'
 
@@ -53,19 +53,19 @@ LargePrimary.args = {
 	variant: 'lg-primary',
 	children: 'More sorting options',
 	// icon: 'lucide:sliders',
-	leftIcon: <Icon icon='lucide:sliders' />,
+	leftIcon: <Sliders />,
 }
 LargeSecondary.args = {
 	variant: 'lg-secondary',
 	children: 'Save',
 	// icon: 'fe:heart-o',
-	leftIcon: <Icon icon='fe:heart-o' />,
+	leftIcon: <Heart />,
 }
 LargeAccent.args = {
 	variant: 'lg-accent',
 	children: 'View map',
 	// icon: 'fe:map',
-	leftIcon: <Icon icon='fe:map' />,
+	leftIcon: <Map />,
 }
 // export const SafetyExitButton = Template.bind({})
 // More on args: https://storybook.js.org/docs/react/writing-stories/args

packages/ui/components/layout/Footer.stories.tsx

@@ -50,33 +50,33 @@ PageFooter.args = {
 	],
 	socialMedia: [
 		{
-			icon: 'fa6-brands:facebook-f',
+			icon: 'facebook',
 			key: 'facebook',
 			href: '#',
 		},
 		{
-			icon: 'fa6-brands:twitter',
+			icon: 'twitter',
 			key: 'twitter',
 			href: '#',
 		},
 		{
-			icon: 'fa6-brands:linkedin-in',
+			icon: 'linkedin',
 			key: 'linkedin',
 			href: '#',
 		},
 		{
-			icon: 'fa6-regular:envelope',
+			icon: 'email',
 			key: 'email',
 			href: '#',
 		},
 
 		{
-			icon: 'fa6-brands:instagram',
+			icon: 'instagram',
 			key: 'instagram',
 			href: '#',
 		},
 		{
-			icon: 'fa6-brands:youtube',
+			icon: 'youtube',
 			key: 'youtube',
 			href: '#',
 		},

packages/ui/components/layout/Footer.tsx

@@ -1,5 +1,5 @@
-import { Icon } from '@iconify/react'
 import { useTranslation } from 'next-i18next'
+import { Facebook, Instagram, Linkedin, Mail, Twitter, Youtube } from 'react-feather'
 
 import Image from 'next/image'
 import Link from 'next/link'
@@ -68,11 +68,20 @@ export type FooterLink = {
 	icon?: string
 }
 export type SocialMediaLink = {
-	icon: string
+	icon: keyof typeof iconMap
 	key: string
 	href: string
 }
 
+const iconMap = {
+	facebook: Facebook,
+	twitter: Twitter,
+	linkedin: Linkedin,
+	email: Mail,
+	instagram: Instagram,
+	youtube: Youtube,
+} as const
+
 export const FooterSection = ({ links, socialMedia }: FooterSectionProps) => {
 	const { classes } = useStyles()
 	const { t } = useTranslation(['footer', 'socialMedia'])
@@ -89,16 +98,14 @@ export const FooterSection = ({ links, socialMedia }: FooterSectionProps) => {
 		</Link>
 	))
 
-	const socialLinks = socialMedia.map((service) => (
-		<ActionIcon key={service.key} component={Link} href={service.href} title={t(service.key)}>
-			<Icon
-				icon={service.icon}
-				height='1.5rem'
-				color={colors.inReachSecondaryRegular[5]}
-				style={{ lineHeight: '1rem' }}
-			/>
-		</ActionIcon>
-	))
+	const socialLinks = socialMedia.map((service) => {
+		const Icon = iconMap[service.icon]
+		return (
+			<ActionIcon key={service.key} component={Link} href={service.href} title={t(service.key)}>
+				<Icon height='1.5rem' color={colors.inReachSecondaryRegular[5]} style={{ lineHeight: '1rem' }} />
+			</ActionIcon>
+		)
+	})
 
 	return (
 		<div className={classes.footer}>

packages/ui/components/layout/UserMenu.tsx

@@ -1,7 +1,6 @@
-import userIcon from '@iconify/icons-fa6-solid/user'
-import { Icon } from '@iconify/react'
 import { useSession } from 'next-auth/react'
 import { useTranslation } from 'next-i18next'
+import { User } from 'react-feather'
 
 import Image from 'next/image'
 
@@ -86,7 +85,7 @@ export const UserMenu = ({ className, classNames, styles, unstyled }: UserMenuPr
 										alt={session.user.name || t('user-avatar')}
 									/>
 								) : (
-									<Icon icon={userIcon} height={55} width={55} className={classes.avatar} />
+									<User height={55} width={55} className={classes.avatar} />
 								)}
 							</Avatar>
 							<Text weight={500} size='sm' sx={{ lineHeight: 1 }} mr={3}>

packages/ui/package.json

@@ -19,7 +19,6 @@
 	"dependencies": {
 		"@emotion/react": "11.10.5",
 		"@emotion/server": "11.10.0",
-		"@iconify/react": "4.0.1",
 		"@mantine/carousel": "5.9.5",
 		"@mantine/core": "5.9.5",
 		"@mantine/dates": "5.9.5",
@@ -33,21 +32,20 @@
 		"@mantine/prism": "5.9.5",
 		"@mantine/spotlight": "5.9.5",
 		"@mantine/tiptap": "5.9.5",
-		"@tabler/icons": "1.119.0",
 		"@tiptap/extension-link": "2.0.0-beta.209",
 		"@tiptap/react": "2.0.0-beta.209",
 		"@tiptap/starter-kit": "2.0.0-beta.209",
 		"dayjs": "1.11.7",
 		"embla-carousel-react": "7.0.5",
 		"next": "13.1.1",
+		"react-feather": "2.0.10",
 		"slugify": "1.6.5",
 		"zod": "3.20.2"
 	},
 	"devDependencies": {
 		"@babel/core": "7.20.7",
 		"@faker-js/faker": "7.6.0",
 		"@geometricpanda/storybook-addon-badges": "0.2.2",
-		"@iconify/icons-fa6-solid": "1.2.10",
 		"@next/eslint-plugin-next": "13.1.1",
 		"@next/font": "13.1.1",
 		"@storybook/addon-a11y": "6.5.15",
@@ -111,6 +109,27 @@
 	},
 	"peerDependencies": {
 		"@babel/core": "^7.20.2",
+		"@emotion/react": "11.10.5",
+		"@emotion/server": "11.10.0",
+		"@mantine/carousel": "5.9.5",
+		"@mantine/core": "5.9.5",
+		"@mantine/dates": "5.9.5",
+		"@mantine/dropzone": "5.9.5",
+		"@mantine/form": "5.9.5",
+		"@mantine/hooks": "5.9.5",
+		"@mantine/modals": "5.9.5",
+		"@mantine/next": "5.9.5",
+		"@mantine/notifications": "5.9.5",
+		"@mantine/nprogress": "5.9.5",
+		"@mantine/prism": "5.9.5",
+		"@mantine/spotlight": "5.9.5",
+		"@mantine/tiptap": "5.9.5",
+		"@tiptap/extension-link": "2.0.0-beta.209",
+		"@tiptap/react": "2.0.0-beta.209",
+		"@tiptap/starter-kit": "2.0.0-beta.209",
+		"dayjs": "1.11.7",
+		"embla-carousel-react": "7.0.5",
+		"feather-icons-react": "0.6.2",
 		"i18next": "^22",
 		"next-auth": "^4",
 		"next-i18next": "^13.0.0",