Merge pull request #2254 from graphcommerce-org/fix/plugins

Fix/plugins

docs/framework/icons.md

@@ -160,13 +160,11 @@ imported from there (the `<IconSvg>` component will convert the relative path to
 an absolute path)
 
 ```tsx
-...
+//...
 import customIcon from './my-custom-icon.svg'
 
-...
-return (
-  <IconSvg src={iconSucustomIconpport} size='large' />
-)
+//...
+return <IconSvg src={customIcon} size='large' />
 ```
 
 To use a custom icon in your component, follow the same steps as described in
@@ -177,27 +175,23 @@ the [previous paragraph](#using-a-different-icon-from-the-icon-pack).
 
 ## Using a different icon pack
 
-To override all or multiple icons with your own, add an icon override array to
-/theme.ts:
+To override all or multiple icons with your own, you can write a replace plugin
+to achieve this:
 
 ```tsx
-// /components/theme.ts
-import { iconCart, iconChat } from '@graphcommerce/next-ui'
+// /plugins/icons/Icons.ts
+import { PluginConfig } from '@graphcommerce/next-config'
+import iconBasket from './basket.svg'
 import customCartIcon from './my-custom-cart-icon.svg'
 import customChatIcon from './my-custom-chat-icon.svg'
 
-// ...
-const createOverrides = (theme: Theme): Components => ({
-  //... other component styling
+export const config: PluginConfig = {
+  type: 'replace',
+  module: '@graphcommerce/next-ui',
+}
 
-  IconSvg: {
-    overrides: [
-      [iconCart, customCartIcon],
-      [iconChat, customChatIcon],
-    ],
-  },
-})
-// ...
+export const iconShoppingBag = iconBasket
+export const iconChart = iconBasket
 ```
 
 All icons must meet the svg specifications as described above

packages/magento-product/components/ProductFiltersPro/ProductFiltersProSortDirectionArrow.tsx

@@ -1,7 +1,5 @@
 import { SortEnum } from '@graphcommerce/graphql-mesh'
-import { IconSvg } from '@graphcommerce/next-ui'
-import * as IconArrowDown from '@graphcommerce/next-ui/icons/arrow-down.svg'
-import * as IconArrowUp from '@graphcommerce/next-ui/icons/arrow-up.svg'
+import { IconSvg, iconArrowDown, iconArrowUp } from '@graphcommerce/next-ui'
 
 type Props = {
   sortDirection: SortEnum | null
@@ -10,7 +8,7 @@ type Props = {
 export function ProductFiltersProSortDirectionArrow({ sortDirection }: Props) {
   return (
     <IconSvg
-      src={sortDirection === 'ASC' || sortDirection === null ? IconArrowUp : IconArrowDown}
+      src={sortDirection === 'ASC' || sortDirection === null ? iconArrowUp : iconArrowDown}
       sx={{ display: 'flex' }}
     />
   )

packages/next-ui/icons.ts

@@ -0,0 +1,50 @@
+export { default as iconArrowDown } from './icons/arrow-down.svg'
+export { default as iconArrowBack } from './icons/arrow-left.svg'
+export { default as iconArrowForward } from './icons/arrow-right.svg'
+export { default as iconArrowUp } from './icons/arrow-up.svg'
+export { default as iconShoppingBag } from './icons/bag.svg'
+export { default as iconInvoice } from './icons/box-alt.svg'
+export { default as iconBox } from './icons/box.svg'
+export { default as iconOrderBefore } from './icons/calendar.svg'
+export { default as iconCancelAlt } from './icons/cancel-alt.svg'
+export { default as iconCartAdd } from './icons/cart-add.svg'
+export { default as iconCart } from './icons/cart.svg'
+export { default as iconChat } from './icons/chat-alt.svg'
+export { default as iconCustomerService } from './icons/chat.svg'
+export { default as iconChevronDown } from './icons/chevron-down.svg'
+export { default as iconChevronBack, default as iconChevronLeft } from './icons/chevron-left.svg'
+export { default as iconChevronRight } from './icons/chevron-right.svg'
+export { default as iconChevronUp } from './icons/chevron-up.svg'
+export { default as iconCirle } from './icons/circle.svg'
+export { default as iconClose } from './icons/close.svg'
+export { default as iconCompare } from './icons/compare-arrows.svg'
+export { default as iconCreditCard, default as iconId } from './icons/credit-card.svg'
+export { default as iconEllypsis } from './icons/ellypsis.svg'
+export { default as iconEmail, default as iconEmailOutline } from './icons/envelope-alt.svg'
+export { default as icon404 } from './icons/explore.svg'
+export { default as iconEyeClosed } from './icons/eye-closed.svg'
+export { default as iconEyeCrossed } from './icons/eye-crossed.svg'
+export { default as iconEye } from './icons/eye.svg'
+export { default as iconHeart } from './icons/favourite.svg'
+export { default as iconMenu } from './icons/hamburger.svg'
+export { default as iconParty } from './icons/happy-face.svg'
+export { default as iconAddresses, default as iconHome } from './icons/home-alt.svg'
+export { default as iconLanguage } from './icons/language.svg'
+export { default as iconLocation } from './icons/location.svg'
+export { default as iconLock } from './icons/lock.svg'
+export { default as iconFullscreen } from './icons/maximise.svg'
+export { default as iconFullscreenExit } from './icons/minimise.svg'
+export { default as iconMin } from './icons/minus.svg'
+export { default as iconMoon } from './icons/moon.svg'
+export { default as iconNewspaper } from './icons/news.svg'
+export { default as iconCheckmark } from './icons/ok.svg'
+export { default as iconPerson } from './icons/person-alt.svg'
+export { default as iconPlay } from './icons/play.svg'
+export { default as iconPlus } from './icons/plus.svg'
+export { default as iconShutdown } from './icons/power.svg'
+export { default as iconRefresh } from './icons/refresh.svg'
+export { default as iconSadFace } from './icons/sad-face.svg'
+export { default as iconSearch } from './icons/search.svg'
+export { default as iconPhone } from './icons/smartphone.svg'
+export { default as iconStar } from './icons/star.svg'
+export { default as iconSun } from './icons/sun.svg'