Merge pull request #149 from deriv-com/michio/update-icons-package

libs/blocks/src/lib/accordion/accordion.spec.tsx

@@ -1,7 +1,7 @@
 import { render } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import AccordionBlock from '.';
-import { StandaloneAndroidIcon } from '@deriv/quill-icons';
+import { StandaloneAndroidIcon } from '@deriv/quill-icons/Standalone';
 
 const childTitle = 'This is the title';
 const subTitle = 'Subtitle goes here';

libs/blocks/src/lib/accordion/accordion.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import AccordionBlock from '.';
-import { StandaloneAndroidIcon } from '@deriv/quill-icons';
+import { StandaloneAndroidIcon } from '@deriv/quill-icons/Standalone';
 
 const meta = {
   title: 'Blocks/Accordion',

libs/blocks/src/lib/fast-payment/base/base.spec.tsx

@@ -4,7 +4,7 @@ import {
   FlagAndorraIcon,
   FlagAustraliaIcon,
   FlagBurkinaFasoIcon,
-} from '@deriv/quill-icons';
+} from '@deriv/quill-icons/Flags';
 import Base from './index';
 
 describe('FastPayment', () => {

libs/blocks/src/lib/features/card-feature/card-feature.spec.tsx

@@ -7,7 +7,7 @@ import {
   IllustrativeProtectedAndSecureIcon,
   IllustrativeSpreadsIcon,
   IllustrativeSupport247Icon,
-} from '@deriv/quill-icons';
+} from '@deriv/quill-icons/Illustrative';
 import { CardContent } from '@deriv-com/components';
 
 const cards: CardContent[] = [

libs/blocks/src/lib/features/card-feature/card-feature.stories.tsx

@@ -6,7 +6,7 @@ import {
   IllustrativeProtectedAndSecureIcon,
   IllustrativeSpreadsIcon,
   IllustrativeSupport247Icon,
-} from '@deriv/quill-icons';
+} from '@deriv/quill-icons/Illustrative';
 
 const meta = {
   title: 'Blocks/Features/Card',

libs/blocks/src/lib/features/content-slider/content-slider.stories.tsx

@@ -7,7 +7,7 @@ import {
   IllustrativeProtectedAndSecureIcon,
   IllustrativeSpreadsIcon,
   IllustrativeSupport247Icon,
-} from '@deriv/quill-icons';
+} from '@deriv/quill-icons/Illustrative';
 
 const meta = {
   title: 'Blocks/Features/ContentSlider',

libs/blocks/src/lib/footer/footer-block.tsx

@@ -1,5 +1,5 @@
 import { FluidContainer, Section, Text } from '@deriv/quill-design';
-import { BrandDerivWordmarkSlateIcon } from '@deriv/quill-icons';
+import { BrandDerivWordmarkSlateIcon } from '@deriv/quill-icons/Logo';
 import clsx from 'clsx';
 import { ReactNode } from 'react';
 import { SocialMediaSection } from './footer.social';

libs/blocks/src/lib/footer/footer.stories.tsx

@@ -3,7 +3,7 @@ import {
   StandaloneAppleIcon,
   StandaloneFacebookIcon,
   StandaloneInstagramIcon,
-} from '@deriv/quill-icons';
+} from '@deriv/quill-icons/Standalone';
 import Footer from '.';
 
 const meta = {

libs/blocks/src/lib/live-market/index.tsx

@@ -5,7 +5,7 @@ import {
   CustomLink,
 } from '@deriv-com/components';
 import { FluidContainer, Section, Text, qtMerge } from '@deriv/quill-design';
-import { StandaloneChevronRightRegularIcon } from '@deriv/quill-icons';
+import { StandaloneChevronRightRegularIcon } from '@deriv/quill-icons/Standalone';
 import clsx from 'clsx';
 import { ReactNode } from 'react';
 import { HeaderSection } from './header-section';

libs/blocks/src/lib/live-market/live-market.stories.tsx

@@ -6,7 +6,7 @@ import {
   MarketForexEurusdIcon,
   MarketForexGbpusdIcon,
   MarketForexUsdjpyIcon,
-} from '@deriv/quill-icons';
+} from '@deriv/quill-icons/Markets';
 
 const meta = {
   title: 'Blocks/LiveMarket',

libs/blocks/src/lib/navigation/desktop/index.tsx

@@ -3,7 +3,7 @@ import DesktopNavigationWrapper from './desktop.wrapper';
 import NavList from './desktop.nav-list';
 import { NavigationContent } from '../navigation.content';
 import { useNavigation } from '@deriv-com/hooks';
-import { FlagUnitedKingdomIcon } from '@deriv/quill-icons';
+import { FlagUnitedKingdomIcon } from '@deriv/quill-icons/Flags';
 import { Text } from '@deriv/quill-design';
 
 const DesktopNavigation = ({ renderButtons, renderLogo }: NavigationProps) => {

libs/blocks/src/lib/navigation/mobile/mobile.header.tsx

@@ -3,7 +3,7 @@ import { FluidContainer } from '@deriv/quill-design';
 import {
   StandaloneChevronLeftRegularIcon,
   StandaloneXmarkRegularIcon,
-} from '@deriv/quill-icons';
+} from '@deriv/quill-icons/Standalone';
 import clsx from 'clsx';
 
 export const MobileHeader = () => {

libs/blocks/src/lib/navigation/mobile/mobile.languages.tsx

@@ -1,5 +1,5 @@
 import { Text } from '@deriv/quill-design';
-import { FlagUnitedKingdomIcon } from '@deriv/quill-icons';
+import { FlagUnitedKingdomIcon } from '@deriv/quill-icons/Flags';
 
 export const MobileLanguages = () => {
   return (

libs/blocks/src/lib/navigation/mobile/mobile.nav-toggle.tsx

@@ -1,5 +1,5 @@
 import { useNavigation } from '@deriv-com/hooks';
-import { LabelPairedBarsBoldIcon } from '@deriv/quill-icons';
+import { LabelPairedBarsBoldIcon } from '@deriv/quill-icons/LabelPaired';
 
 export const MobileNavToggle = () => {
   const { toggleMobileNav } = useNavigation();

libs/blocks/src/lib/trade-types/trade-types.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import TradeTypeBlock from '.';
 import { CardContent } from '@deriv-com/components';
-import { IllustrativeAdvertiseIcon } from '@deriv/quill-icons';
+import { IllustrativeAdvertiseIcon } from '@deriv/quill-icons/Illustrative';
 
 const meta = {
   title: 'Blocks/TradeTypes',

libs/components/src/lib/accordion/base/index.tsx

@@ -2,7 +2,7 @@ import styles from './base.module.css';
 
 import { Heading, qtMerge, Text } from '@deriv/quill-design';
 import { AccordionProps } from '../types';
-import { StandaloneChevronDownRegularIcon } from '@deriv/quill-icons';
+import { StandaloneChevronDownRegularIcon } from '@deriv/quill-icons/Standalone';
 import { useCallback, useEffect, useRef, useState } from 'react';
 
 export const Base = ({

libs/components/src/lib/accordion/elevate/elevate.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { Elevate } from '.';
-import { StandaloneAndroidIcon } from '@deriv/quill-icons';
+import { StandaloneAndroidIcon } from '@deriv/quill-icons/Standalone';
 
 const meta = {
   title: 'Components/Accordion/Elevate',

libs/components/src/lib/accordion/fill/fill.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import Fill from '.';
-import { StandaloneAndroidIcon } from '@deriv/quill-icons';
+import { StandaloneAndroidIcon } from '@deriv/quill-icons/Standalone';
 
 const meta = {
   title: 'Components/Accordion/Fill',

libs/components/src/lib/accordion/flush/flush.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { Flush } from '.';
-import { StandaloneAndroidIcon } from '@deriv/quill-icons';
+import { StandaloneAndroidIcon } from '@deriv/quill-icons/Standalone';
 
 const meta = {
   title: 'Components/Accordion/Flush',

libs/components/src/lib/accordion/outline/outline.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import Outline from '.';
-import { StandaloneAndroidIcon } from '@deriv/quill-icons';
+import { StandaloneAndroidIcon } from '@deriv/quill-icons/Standalone';
 
 const meta = {
   title: 'Components/Accordion/Outline',

libs/components/src/lib/action-sheet/bottom-sheet/bottom-sheet.stories.tsx

@@ -5,7 +5,7 @@ import {
   StandaloneCircleDotFillIcon,
   StandaloneCircleRegularIcon,
   StandaloneXmarkRegularIcon,
-} from '@deriv/quill-icons';
+} from '@deriv/quill-icons/Standalone';
 import { Text } from '@deriv/quill-design';
 
 const meta = {

libs/components/src/lib/card-slider/card-slider.stories.tsx

@@ -5,7 +5,7 @@ import {
   IllustrativeProtectedAndSecureIcon,
   IllustrativeSpreadsIcon,
   IllustrativeSupport247Icon,
-} from '@deriv/quill-icons';
+} from '@deriv/quill-icons/Illustrative';
 
 const meta = {
   title: 'Components/CardSlider',

libs/components/src/lib/card-slider/index.tsx

@@ -1,10 +1,10 @@
 import clsx from 'clsx';
 import { Swiper, SwiperSlide } from 'swiper/react';
-import { Pagination, SwiperOptions } from 'swiper';
 import 'swiper/css';
 import 'swiper/css/pagination';
 import { qtMerge } from '@deriv/quill-design';
 import Card, { CardVariants } from '../card';
+import { SwiperOptions } from 'swiper/types';
 
 type CardVariantType = keyof CardVariants;
 
@@ -46,7 +46,6 @@ export const CardSlider = <T extends CardVariantType>({
     <div className="flex w-full justify-center">
       <Swiper
         className={qtMerge(className)}
-        modules={[Pagination]}
         slidesPerView={slidesPerView}
         spaceBetween={spaceBetween}
         breakpoints={breakpoints}

libs/components/src/lib/card/content-bottom/content-bottom.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import ContentBottomCard from '.';
 import { Button } from '@deriv/quill-design';
-import { IllustrativeProtectedAndSecureIcon } from '@deriv/quill-icons';
+import { IllustrativeProtectedAndSecureIcon } from '@deriv/quill-icons/Illustrative';
 
 const meta = {
   title: 'Components/Card/ContentBottom',

libs/components/src/lib/card/content-left/content-left.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import ContentLeftCard from '.';
 import { Button } from '@deriv/quill-design';
-import { IllustrativeProtectedAndSecureIcon } from '@deriv/quill-icons';
+import { IllustrativeProtectedAndSecureIcon } from '@deriv/quill-icons/Illustrative';
 
 const meta = {
   title: 'Components/Card/ContentLeft',

libs/components/src/lib/card/content-right/content-right.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import ContentRightCard from '.';
 import { Button } from '@deriv/quill-design';
-import { IllustrativeProtectedAndSecureIcon } from '@deriv/quill-icons';
+import { IllustrativeProtectedAndSecureIcon } from '@deriv/quill-icons/Illustrative';
 
 const meta = {
   title: 'Components/Card/ContentRight',

libs/components/src/lib/card/content-top/content-top.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import ContentTopCard from '.';
 import { Button } from '@deriv/quill-design';
-import { IllustrativeProtectedAndSecureIcon } from '@deriv/quill-icons';
+import { IllustrativeProtectedAndSecureIcon } from '@deriv/quill-icons/Illustrative';
 
 const meta = {
   title: 'Components/Card/ContentTop',

libs/components/src/lib/card/live-market/index.tsx

@@ -3,7 +3,7 @@ import {
   StandaloneChartTrendDownRegularIcon,
   StandaloneChartTrendSidewayRegularIcon,
   StandaloneChartTrendUpRegularIcon,
-} from '@deriv/quill-icons';
+} from '@deriv/quill-icons/Standalone';
 import { LiveMarketContent } from '../types';
 import LivePrice from './live-price';
 import { BuySellButtons } from './buy-sell.buttons';

libs/components/src/lib/card/live-market/live-market.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import LiveMarketCard from '.';
-import { MarketForexEurusdIcon } from '@deriv/quill-icons';
+import { MarketForexEurusdIcon } from '@deriv/quill-icons/Markets';
 
 const meta = {
   title: 'Components/Card/LiveMarketCard',

libs/components/src/lib/link/index.tsx

@@ -1,5 +1,5 @@
 import { qtMerge } from '@deriv/quill-design';
-import { StandaloneChevronRightRegularIcon } from '@deriv/quill-icons';
+import { StandaloneChevronRightRegularIcon } from '@deriv/quill-icons/Standalone';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { ComponentPropsWithRef, useState } from 'react';

libs/components/src/lib/search-chip/index.tsx

@@ -1,6 +1,6 @@
 import styles from './search.module.css';
 import { qtMerge } from '@deriv/quill-design';
-import { StandaloneSearchRegularIcon } from '@deriv/quill-icons';
+import { StandaloneSearchRegularIcon } from '@deriv/quill-icons/Standalone';
 import { useEffect, useRef, useState } from 'react';
 
 export type sizeVariant = 'sm' | 'md';

libs/components/src/lib/table-cell/table-symbol-cell/table-symbol.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import TableSymbolCell from './index';
-import { StandalonePlaceholderRegularIcon } from '@deriv/quill-icons';
+import { StandalonePlaceholderRegularIcon } from '@deriv/quill-icons/Standalone';
 
 const meta = {
   title: 'Components/TableCell/TableSymbolCell',

libs/components/src/lib/table/account-table/variant/table.stories.tsx

@@ -1,10 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import AccountTable from '.';
 import { Button } from '@deriv/quill-design';
-import {
-  IllustrativeForexIcon,
-  LabelPairedMinusRegularIcon,
-} from '@deriv/quill-icons';
+import { LabelPairedMinusRegularIcon } from '@deriv/quill-icons/LabelPaired';
+import { IllustrativeForexIcon } from '@deriv/quill-icons/Illustrative';
 
 const meta = {
   title: 'Components/Table/AccountTable',

libs/features/src/lib/footer/main/data.tsx

@@ -7,7 +7,7 @@ import {
   StandaloneTelegramIcon,
   StandaloneXTwitterIcon,
   StandaloneYoutubeIcon,
-} from '@deriv/quill-icons';
+} from '@deriv/quill-icons/Standalone';
 
 export const footerData: FooterItems[] = [
   {

libs/features/src/lib/footer/main/deriv-go.banner.tsx

@@ -1,6 +1,6 @@
 import { OptimizedImage } from '@deriv-com/components';
 import { CaptionText, Heading, Text } from '@deriv/quill-design';
-import { DerivProductDerivGoBrandLightLogoHorizontalIcon } from '@deriv/quill-icons';
+import { DerivProductDerivGoBrandLightLogoHorizontalIcon } from '@deriv/quill-icons/Logo';
 
 export const DerivGoBanner = () => {
   return (

libs/features/src/lib/navigation/main/data.tsx

@@ -8,7 +8,7 @@ import {
   DerivProductDerivXBrandDarkLogoIcon,
   PartnersProductDerivCtraderBrandDarkLogoHorizontalIcon,
   PartnersProductDerivMt5BrandDarkLogoHorizontalIcon,
-} from '@deriv/quill-icons';
+} from '@deriv/quill-icons/Logo';
 
 export const mainNavItems: NavLinkItems = {
   trade: {

libs/features/src/lib/navigation/main/main-navigation.buttons.tsx

@@ -1,7 +1,7 @@
 import { MobileNavToggle } from '@deriv-com/blocks';
 import { useNavigation } from '@deriv-com/hooks';
 import { Button, useTheme } from '@deriv/quill-design';
-import { StandalonePlaceholderRegularIcon } from '@deriv/quill-icons';
+import { StandalonePlaceholderRegularIcon } from '@deriv/quill-icons/Standalone';
 
 export const MainNavigationButtons = () => {
   const { theme, toggleTheme } = useTheme();

libs/features/src/lib/navigation/main/main-navigation.logo.tsx

@@ -1,5 +1,5 @@
 import { CustomLink } from '@deriv-com/components';
-import { BrandDerivWordmarkCoralIcon } from '@deriv/quill-icons';
+import { BrandDerivWordmarkCoralIcon } from '@deriv/quill-icons/Logo';
 
 export const MainNavigationLogo = () => {
   return (

libs/templates/src/lib/help-center/sections/help-cards/data.tsx

@@ -1,9 +1,9 @@
 import { CardContent } from '@deriv-com/components';
 import {
-  IllustrativeChatIcon,
   StandaloneFileCircleInfoRegularIcon,
   StandaloneWhatsappIcon,
-} from '@deriv/quill-icons';
+} from '@deriv/quill-icons/Standalone';
+import { IllustrativeChatIcon } from '@deriv/quill-icons/Illustrative';
 
 export const helpCardsData: CardContent[] = [
   {

libs/templates/src/lib/home/sections/account-section/data.tsx

@@ -1,9 +1,7 @@
 import { TableContent } from '@deriv-com/components';
 import { Button } from '@deriv/quill-design';
-import {
-  IllustrativeForexIcon,
-  LabelPairedMinusRegularIcon,
-} from '@deriv/quill-icons';
+import { IllustrativeForexIcon } from '@deriv/quill-icons/Illustrative';
+import { LabelPairedMinusRegularIcon } from '@deriv/quill-icons/LabelPaired';
 
 export const TableData: TableContent = {
   header: 'The STP trading account',

libs/templates/src/lib/home/sections/fast-and-reliable/data.tsx

@@ -1,4 +1,4 @@
-import { LabelPairedCheckRegularIcon } from '@deriv/quill-icons';
+import { LabelPairedCheckRegularIcon } from '@deriv/quill-icons/LabelPaired';
 import { Text } from '@deriv/quill-design';
 
 export const FastAndReliableContent = () => {

libs/templates/src/lib/home/sections/fast-payments/index.tsx

@@ -3,7 +3,7 @@ import {
   PaymentMethodChequeBrandLightIcon,
   PaymentMethodFpsBrandLightIcon,
   PaymentMethodWireTransferBrandLightIcon,
-} from '@deriv/quill-icons';
+} from '@deriv/quill-icons/Logo';
 
 const FastPaymentSection = () => {
   return (

libs/templates/src/lib/home/sections/hero/data.tsx

@@ -1,13 +1,16 @@
 import { OptimizedImage } from '@deriv-com/components';
 import { Swiper, SwiperSlide } from 'swiper/react';
+// TODO: remove this eslint-disable when we have a better solution
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
 import { Autoplay, EffectFade } from 'swiper';
 import { ReactNode } from 'react';
 import { Button, FluidContainer, Text } from '@deriv/quill-design';
 import {
   SocialAppleIcon,
   SocialFacebookIcon,
   SocialGoogleIcon,
-} from '@deriv/quill-icons';
+} from '@deriv/quill-icons/Social';
 
 export const heroItems: { key: string; image: ReactNode }[] = [
   {