fix: react-icons bundle size

gatsby-config.ts

@@ -39,6 +39,7 @@ const config: GatsbyConfig = {
         snekResourceId: `63571eee-f41c-4745-9130-d746c2cb97a3`
       }
     }
+    // 'gatsby-plugin-webpack-bundle-analyser-v2'
   ]
 }
 

package.json

@@ -16,29 +16,28 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@atsnek/jaen": "^1.0.0-rc.19",
+    "@atsnek/jaen": "^1.0.0-rc.20",
     "@atsnek/jaen-fields-mdx": "^1.0.0-rc.2",
     "@chakra-ui/icons": "^2.1.1",
     "@chakra-ui/react": "^2.8.1",
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
-    "@react-icons/all-files": "^4.1.0",
+    "@react-icons/all-files": "https://github.com/react-icons/react-icons/releases/download/v4.11.0/react-icons-all-files-4.11.0.tgz",
     "@snek-at/gatsby-theme-shopify": "^1.14.5",
     "@snek-at/uikit": "^1.1.0",
     "@snek-functions/origin": "^0.8.3",
     "chakra-react-select": "^4.4.0",
     "framer-motion": "^10.0.1",
     "gatsby": "^5",
     "gatsby-plugin-image": "^3",
-    "gatsby-plugin-jaen": "^1.0.0-rc.31",
+    "gatsby-plugin-jaen": "^1.0.0-rc.32",
     "gatsby-plugin-react-svg": "^3.3.0",
     "gatsby-plugin-sharp": "^5",
     "gatsby-plugin-sitemap": "^6.9.0",
     "gatsby-transformer-sharp": "^5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.43.4",
-    "react-icons": "^4.8.0",
     "react-photo-view": "^1.2.3",
     "react-slick": "^0.29.0",
     "react-text-loop": "^2.3.0",
@@ -49,6 +48,7 @@
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",
     "@types/react-slick": "^0.23.10",
+    "gatsby-plugin-webpack-bundle-analyser-v2": "^1.1.31",
     "typescript": "^4.9.5"
   },
   "resolutions": {

src/components/CardWithImageBackground.tsx

@@ -2,7 +2,7 @@ import {Box, Grid, Heading, HStack, Stack, Text} from '@chakra-ui/react'
 import {Field, useContentManagement} from '@atsnek/jaen'
 import {navigate} from 'gatsby'
 import {FC} from 'react'
-import {BiChevronRight} from 'react-icons/bi'
+import {FaChevronRight} from '@react-icons/all-files/fa/FaChevronRight'
 
 interface ICardWithImageBackgroundProps {
   card: {
@@ -135,7 +135,7 @@ const CardWithImageBackground: FC<ICardWithImageBackgroundProps> = ({
                 borderRadius="full"
                 boxShadow="0 0 0px 0px white"
                 transition="ease-in 0.2s">
-                <BiChevronRight />
+                <FaChevronRight />
               </Grid>
             </HStack>
           </Stack>

src/components/CustomSlider/NextArrow.tsx

@@ -1,7 +1,6 @@
-import {Button, Icon, IconButton} from '@chakra-ui/react'
+import {Icon, IconButton} from '@chakra-ui/react'
 import {FC} from 'react'
-import {FaChevronCircleLeft, FaChevronCircleRight} from 'react-icons/fa'
-import {GoChevronLeft, GoChevronRight} from 'react-icons/go'
+import {FaChevronCircleRight} from '@react-icons/all-files/fa/FaChevronCircleRight'
 
 interface INextArrowProps {
   onClick?: () => void

src/components/CustomSlider/PrevArrow.tsx

@@ -1,7 +1,6 @@
-import {Button, Icon, IconButton} from '@chakra-ui/react'
+import {Icon, IconButton} from '@chakra-ui/react'
 import {FC} from 'react'
-import {FaChevronCircleLeft, FaChevronCircleRight} from 'react-icons/fa'
-import {GoChevronLeft, GoChevronRight} from 'react-icons/go'
+import {FaChevronCircleLeft} from '@react-icons/all-files/fa/FaChevronCircleLeft'
 
 interface IPrevArrowProps {
   onClick?: () => void

src/components/Navigation/DesktopNav.tsx

@@ -1,27 +1,34 @@
-import { Box, ButtonGroup, Container, Flex, HStack, IconButton, Image } from '@chakra-ui/react'
-import { BallonButton as Button } from '../molecules/BallonButton'
-import { Link, navigate } from 'gatsby'
-import { FC } from 'react'
 import {
-  AiOutlineArrowLeft,
-  AiOutlineSearch,
-  AiOutlineShop,
-  AiOutlineShoppingCart
-} from 'react-icons/ai'
-import { FaPhoneAlt, FaShoppingBag, FaUser } from 'react-icons/fa'
-import { useContactModal } from '../../services/contact'
+  Box,
+  ButtonGroup,
+  Container,
+  Flex,
+  HStack,
+  IconButton,
+  Image
+} from '@chakra-ui/react'
+import {BallonButton as Button} from '../molecules/BallonButton'
+import {Link, navigate} from 'gatsby'
+import {FC} from 'react'
+import {AiOutlineShop} from '@react-icons/all-files/ai/AiOutlineShop'
+import {AiOutlineShoppingCart} from '@react-icons/all-files/ai/AiOutlineShoppingCart'
+import {FaPhoneAlt} from '@react-icons/all-files/fa/FaPhoneAlt'
+import {useContactModal} from '../../services/contact'
 
-import { LayoutMode } from '../../types/commonTypes'
-import { NavAuthButton } from './NavAuthButton'
-import { SearchbarButton } from '../molecules/Searchbar'
+import {LayoutMode} from '../../types/commonTypes'
+import {NavAuthButton} from './NavAuthButton'
 
 interface IDesktopNavProps {
   mode: LayoutMode
   onBasketClick?: () => void
   onSearchClick?: () => void
 }
 
-const DesktopNav: FC<IDesktopNavProps> = ({ mode, onSearchClick, onBasketClick }) => {
+const DesktopNav: FC<IDesktopNavProps> = ({
+  mode,
+  onSearchClick,
+  onBasketClick
+}) => {
   const contactModal = useContactModal()
 
   return (
@@ -51,7 +58,7 @@ const DesktopNav: FC<IDesktopNavProps> = ({ mode, onSearchClick, onBasketClick }
               //as={GatsbyLink}
               //to="/"
               cursor={'pointer'}
-              spacing={{ base: '10', md: '20' }}
+              spacing={{base: '10', md: '20'}}
               alignItems={'center'}
               justifyContent={'center'}
               maxW="2xl">
@@ -69,7 +76,7 @@ const DesktopNav: FC<IDesktopNavProps> = ({ mode, onSearchClick, onBasketClick }
                 //w={{ base: '20rem', '2xl': '26.25rem' }}
                 //h="{{ base: '2.875rem', '2xl': '2.125rem' }}"
 
-                maxW={"300px"}
+                maxW={'300px'}
                 src="/images/red_logo.png"
                 alt="Logo"
               />

src/components/Navigation/MobileHamburger.tsx

@@ -1,6 +1,6 @@
+import {useAuthenticationContext} from '@atsnek/jaen'
 import {CloseIcon, HamburgerIcon} from '@chakra-ui/icons'
 import {
-  Button,
   Divider,
   Drawer,
   DrawerBody,
@@ -9,19 +9,17 @@ import {
   DrawerHeader,
   DrawerOverlay,
   IconButton,
-  IconButtonProps,
   Stack,
-  VStack,
-  useDisclosure
+  useDisclosure,
+  VStack
 } from '@chakra-ui/react'
+import {FaUser} from '@react-icons/all-files/fa/FaUser'
 import {navigate} from 'gatsby'
-import {FaPhoneAlt, FaSearch, FaUser} from 'react-icons/fa'
 import {Logo} from '../../common/assets/Logo'
 import {useContactModal} from '../../services/contact'
-import {BottomNavLinks} from './NavLinks'
-import {BallonButton} from '../molecules/BallonButton'
 import {useSearch} from '../../services/search'
-import {useAuthenticationContext} from '@atsnek/jaen'
+import {BallonButton} from '../molecules/BallonButton'
+import {BottomNavLinks} from './NavLinks'
 
 export const MobileHambuger: React.FC<{
   pathname: string

src/components/Navigation/NavAuthButton.tsx

@@ -11,7 +11,7 @@ import {
   Tooltip
 } from '@chakra-ui/react'
 import {Link, navigate} from 'gatsby'
-import {FaUser} from 'react-icons/fa'
+import {FaUser} from '@react-icons/all-files/fa/FaUser'
 import {useIsClient} from '../../common/useIsClient'
 import {useAuthenticationContext} from '@atsnek/jaen'
 import {useBasket} from '../../services/basket'

src/components/Navigation/Navbar.tsx

@@ -1,34 +1,30 @@
-import {ChevronDownIcon, CloseIcon, HamburgerIcon} from '@chakra-ui/icons'
 import {
   Box,
   Button,
   ButtonGroup,
-  Collapse,
   Flex,
   Icon,
   IconButton,
-  Link,
   Stack,
-  Text,
-  Tooltip,
-  useDisclosure
+  Tooltip
 } from '@chakra-ui/react'
 
 import HBalloon from '../../common/assets/hballoon.inline.svg'
 
-import {BallonButton} from '../molecules/BallonButton'
+import {FaLongArrowAltLeft} from '@react-icons/all-files/fa/FaLongArrowAltLeft'
+import {FaShopify} from '@react-icons/all-files/fa/FaShopify'
+import {FaShoppingCart} from '@react-icons/all-files/fa/FaShoppingCart'
 import {Link as GatsbyLink, navigate} from 'gatsby'
 import {FC} from 'react'
-import {AiOutlineArrowLeft, AiOutlineShop} from 'react-icons/ai'
-import {FaPhoneAlt, FaShopify, FaShoppingCart} from 'react-icons/fa'
 import {LayoutMode} from '../../types/commonTypes'
+import {BallonButton} from '../molecules/BallonButton'
 import {SearchbarButton} from '../molecules/Searchbar'
 import BottomNav from './BottomNav'
 import {NavAuthButton} from './NavAuthButton'
 
+import {useAuthenticationContext} from '@atsnek/jaen'
 import {Logo} from '../../common/assets/Logo'
 import {MobileHambuger} from './MobileHamburger'
-import {useAuthenticationContext} from '@atsnek/jaen'
 
 interface INavbarProps {
   mode: LayoutMode
@@ -119,7 +115,7 @@ export const Navbar: FC<INavbarProps> = ({
                 as={GatsbyLink}
                 to="/"
                 size="sm"
-                icon={<AiOutlineArrowLeft />}
+                icon={<FaLongArrowAltLeft />}
               />
               <NavAuthButton
                 display={{

src/components/fields/CardWithImageBackgroundField.tsx

@@ -1,3 +1,4 @@
+import {Field, useField} from '@atsnek/jaen'
 import {
   Box,
   Grid,
@@ -8,8 +9,7 @@ import {
   Stack,
   Text
 } from '@chakra-ui/react'
-import {Field, useField} from '@atsnek/jaen'
-import {BiChevronRight} from 'react-icons/bi'
+import {FaChevronRight} from '@react-icons/all-files/fa/FaChevronRight'
 
 import {EditIcon} from '@chakra-ui/icons'
 import {
@@ -247,7 +247,7 @@ const CardWithImageBackgroundField: React.FC<
                   borderRadius="full"
                   boxShadow="0 0 0px 0px white"
                   transition="ease-in 0.2s">
-                  <BiChevronRight />
+                  <FaChevronRight />
                 </Grid>
               </HStack>
             </Stack>

src/components/mdx/heading/Heading.tsx

@@ -1,14 +1,12 @@
 import {
   Heading as ChakraHeading,
-  HeadingProps as ChakraHeadingProps,
-  ResponsiveValue,
-  ThemeTypings
-} from '@chakra-ui/react';
-import React, { Dispatch, FC, ReactNode, SetStateAction } from 'react';
-import { FaHashtag } from 'react-icons/fa';
-import Link from '../core/Link';
-import { mainComponentBaseStyle } from '../layout/mainContent.vars';
-import { IMainContentComponentBaseProps } from '../types/mainContent';
+  HeadingProps as ChakraHeadingProps
+} from '@chakra-ui/react'
+import {FC, ReactNode} from 'react'
+import {FaHashtag} from '@react-icons/all-files/fa/FaHashtag'
+import Link from '../core/Link'
+import {mainComponentBaseStyle} from '../layout/mainContent.vars'
+import {IMainContentComponentBaseProps} from '../types/mainContent'
 
 // Font sizes for the different heading variants
 const variantFontSizes = {
@@ -18,7 +16,7 @@ const variantFontSizes = {
   h4: '20',
   h5: '18',
   h6: '16'
-};
+}
 
 const variantLinkFontSizes = {
   h1: '30',
@@ -27,17 +25,17 @@ const variantLinkFontSizes = {
   h4: '16',
   h5: '14',
   h6: '12'
-};
+}
 
 export interface IHeadingProps extends IMainContentComponentBaseProps {
-  variant?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-  id?: string;
-  noAnchor?: boolean;
-  customSpacing?: ChakraHeadingProps['mt'];
-  noSpacing?: boolean;
-  activeLink?: boolean;
-  setActiveLink?: () => void;
-  children?: ReactNode;
+  variant?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
+  id?: string
+  noAnchor?: boolean
+  customSpacing?: ChakraHeadingProps['mt']
+  noSpacing?: boolean
+  activeLink?: boolean
+  setActiveLink?: () => void
+  children?: ReactNode
 }
 
 /**
@@ -54,23 +52,23 @@ const Heading: FC<IHeadingProps> = ({
   setActiveLink,
   children
 }) => {
-  let props: ChakraHeadingProps = {};
+  let props: ChakraHeadingProps = {}
   if (variant === 'h2') {
     props = {
       ...props,
       borderBottom: '1px solid',
       borderColor: 'components.separator.borderColor',
       pb: 2
-    };
+    }
   }
 
   /**
    * Handles the click event on the heading link.
    *
    */
   const handleClick = () => {
-    if (!activeLink && setActiveLink) setActiveLink();
-  };
+    if (!activeLink && setActiveLink) setActiveLink()
+  }
 
   return (
     <ChakraHeading
@@ -84,8 +82,7 @@ const Heading: FC<IHeadingProps> = ({
         '& a': {
           opacity: 1
         }
-      }}
-    >
+      }}>
       {children}
       {!noAnchor && id && (
         <Link
@@ -98,16 +95,15 @@ const Heading: FC<IHeadingProps> = ({
           fontSize={variantLinkFontSizes[variant]}
           lineHeight={Number(variantLinkFontSizes[variant]) + 5 + 'px'}
           verticalAlign="top"
-          onClick={handleClick}
-        >
+          onClick={handleClick}>
           <FaHashtag />
         </Link>
       )}
     </ChakraHeading>
-  );
-};
+  )
+}
 Heading.defaultProps = {
   baseProps: mainComponentBaseStyle.baseProps
-};
+}
 
-export default Heading;
+export default Heading