diff --git a/CHANGELOG.md b/CHANGELOG.md
index 261a67a18..b21206eb2 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -18,6 +18,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- `SuggestionProductCard` component.
- `EmptyState` component.
- `EmptyState` at the `ProductGallery` section.
+- `IconSVG` component to load SVG Icons.
### Changed
@@ -48,6 +49,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- API style redirects from `/_v/private/graphql` since they have no effect
- Display box from `` component
- `useTotalCount` hook
+- Phosphor-react library
### Fixed
diff --git a/README.md b/README.md
index cd01c8174..2cc9a3f7b 100644
--- a/README.md
+++ b/README.md
@@ -340,6 +340,50 @@ The aforementioned guide works well for UI components. However, components like
)
```
+### Managing SVG Icons
+Icons help build web pages by illustrating concepts and improving website navigation. However, using icons can decrease the page's performance. One option to avoid the decrease of the page's performance is to use SVGs from a single SVG file, located in `/static/icons/icons.svg`, and load them with the `IconSVG` component.
+
+In the following steps, learn how to add and use a new SVG icon and avoid decreasing page performance while using an icon.
+
+> ⚠️ Warning
+>
+> This is a recommendation while using icons on a web page. Evaluate if this fits in your project.
+
+#### Adding an SVG icon
+1. In the SVG file, change the `svg` tag to `symbol`.
+2. Add an `id` to the symbol. Remember to use an unique `id` and do not replicate it.
+3. Remove unnecessary HTML/SVG properties to allow you to style and decrease the final file size, such as `fill`, `stroke-width`, `width`, `height`, and `color`.
+
+An example adding Bell icon:
+
+```svg
+
+```
+
+#### Using an SVG icon
+
+1. Get the icon's `id` that you created in the SVG icon file.
+2. Add the `id` in the React component that you desire to use the SVG icon. For example
+
+```tsx
+// src/components/ui/MyIconButton/MyIconButton.tsx
+import React from 'react'
+import IconSVG from 'src/components/common/IconSVG' // this path can be outdated.
+
+function IconButton() {
+ return (
+
+ )
+}
+
+export default IconButton
+```
+This project uses SVGs from [Phosphor icons](https://phosphoricons.com/).
+
## 🖊️ Styling Components
Our customized themes are based on [Design Tokens](https://css-tricks.com/what-are-design-tokens/) using [CSS Variables](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) or a CSS class for each token. Today, we have the following files in the `src/styles` folder:
diff --git a/package.json b/package.json
index 64f1dcc8d..9410c113f 100644
--- a/package.json
+++ b/package.json
@@ -47,7 +47,6 @@
"gatsby-plugin-sass": "^5.3.0",
"gatsby-plugin-webpack-bundle-analyser-v2": "^1.1.26",
"include-media": "^1.4.10",
- "phosphor-react": "^1.3.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-helmet-async": "^1.2.2",
diff --git a/src/components/cart/CartItem/CartItem.tsx b/src/components/cart/CartItem/CartItem.tsx
index 08fcf4ddd..f0530e8ce 100644
--- a/src/components/cart/CartItem/CartItem.tsx
+++ b/src/components/cart/CartItem/CartItem.tsx
@@ -1,5 +1,4 @@
import { Card, CardActions, CardContent, CardImage } from '@faststore/ui'
-import { XCircle as XCircleIcon } from 'phosphor-react'
import React from 'react'
import Button from 'src/components/ui/Button'
import { Image } from 'src/components/ui/Image'
@@ -9,6 +8,7 @@ import { useCart } from 'src/sdk/cart/useCart'
import { useRemoveButton } from 'src/sdk/cart/useRemoveButton'
import { useFormattedPrice } from 'src/sdk/product/useFormattedPrice'
import type { CartItem as ICartItem } from 'src/sdk/cart/validate'
+import IconSVG from 'src/components/common/IconSVG'
import './cart-item.scss'
@@ -72,7 +72,7 @@ function CartItem({ item }: Props) {
}
+ icon={}
iconPosition="left"
{...btnProps}
>
diff --git a/src/components/cart/CartSidebar/CartSidebar.tsx b/src/components/cart/CartSidebar/CartSidebar.tsx
index 4afa1e44a..d96228018 100644
--- a/src/components/cart/CartSidebar/CartSidebar.tsx
+++ b/src/components/cart/CartSidebar/CartSidebar.tsx
@@ -1,9 +1,4 @@
import { List } from '@faststore/ui'
-import {
- ArrowRight as ArrowRightIcon,
- Truck as TruckIcon,
- X as XIcon,
-} from 'phosphor-react'
import React, { useRef } from 'react'
import Alert from 'src/components/ui/Alert'
import { Badge } from 'src/components/ui/Badge'
@@ -13,6 +8,7 @@ import SlideOver from 'src/components/ui/SlideOver'
import { useCart } from 'src/sdk/cart/useCart'
import { useCheckoutButton } from 'src/sdk/cart/useCheckoutButton'
import { useUI } from 'src/sdk/ui'
+import IconSVG from 'src/components/common/IconSVG'
import CartItem from '../CartItem'
import EmptyCart from '../EmptyCart'
@@ -51,11 +47,13 @@ function CartSidebar() {
}
+ icon={}
onClick={() => dismissTransition.current?.()}
/>
- }>Free shiping starts at $300
+ }>
+ Free shiping starts at $300
+
{isEmpty ? (
dismissTransition.current?.()} />
@@ -77,7 +75,11 @@ function CartSidebar() {
checkoutButton={
}
+ icon={
+ !isValidating && (
+
+ )
+ }
iconPosition="right"
{...btnProps}
>
diff --git a/src/components/cart/CartToggle/CartToggle.tsx b/src/components/cart/CartToggle/CartToggle.tsx
index 7fd637cdd..74658b98b 100644
--- a/src/components/cart/CartToggle/CartToggle.tsx
+++ b/src/components/cart/CartToggle/CartToggle.tsx
@@ -1,7 +1,7 @@
import React from 'react'
import IconButton from 'src/components/ui/IconButton'
import { useCartToggleButton } from 'src/sdk/cart/useCartToggleButton'
-import { ShoppingCart as ShoppingCartIcon } from 'phosphor-react'
+import IconSVG from 'src/components/common/IconSVG'
import './cart-toggle.scss'
@@ -13,7 +13,7 @@ function CartToggle() {
{...btnProps}
className="cart-toggle"
aria-label={`Cart with ${btnProps['data-items']} items`}
- icon={}
+ icon={}
/>
)
}
diff --git a/src/components/cart/EmptyCart/EmptyCart.tsx b/src/components/cart/EmptyCart/EmptyCart.tsx
index 1809575b2..b954bb03f 100644
--- a/src/components/cart/EmptyCart/EmptyCart.tsx
+++ b/src/components/cart/EmptyCart/EmptyCart.tsx
@@ -1,7 +1,7 @@
import React from 'react'
-import { ShoppingCart as ShoppingCartIcon } from 'phosphor-react'
import Button from 'src/components/ui/Button'
import EmptyState from 'src/components/common/EmptyState'
+import IconSVG from 'src/components/common/IconSVG'
interface Props {
/**
@@ -14,7 +14,7 @@ function EmptyCart({ onDismiss }: Props) {
return (
-
+