From 81e44883ec5d725708cb7f064f6d69b79da0a1ec Mon Sep 17 00:00:00 2001
From: Byron Wall <87667330+ByronDWall@users.noreply.github.com>
Date: Fri, 13 Dec 2024 16:29:21 -0500
Subject: [PATCH] Fct 1311 - icons bundle 2 (#3014)
* feat(icons): [publish_preview] update icon template with new imports, remove unnecessary styling boilerplate from icons template
* feat(icons): [publish_preview] work?
* chore(rebase): update yarn.lock
* feat(icons): add CustomIcon LeadingIcon and InlineSvg to @commercetools-ui-kit/icons namespace, remove unnecessary pure annotations from icon template in svgr.config.js, add CONTRIBUTING.md file explaining how to add/update/remove icons in ui kit
* feat(icons): update documentation, remove unnecessary eslint plugin, add preview branch name check back into preview-release github workflow
* feat(icons): don't namespace CustomIcon, LeadingIcon, and InlineSvg to @commercetools-uikit/icons for backwards compatibility reasons
* feat(icons): update docs
---
.changeset/quiet-turkeys-smell.md | 7 +
.eslintrc.js | 1 +
CONTRIBUTING.md | 5 +-
packages/components/icons/CONTRIBUTING.md | 29 ++++
.../generated/AngleDownReact/package.json | 4 +
.../generated/AngleLeftReact/package.json | 4 +
.../generated/AngleRightReact/package.json | 4 +
.../generated/AngleThinLeftReact/package.json | 4 +
.../AngleThinRightReact/package.json | 4 +
.../generated/AngleUpDownReact/package.json | 4 +
.../icons/generated/AngleUpReact/package.json | 4 +
.../generated/ArrowDownReact/package.json | 4 +
.../generated/ArrowLeftReact/package.json | 4 +
.../generated/ArrowLongDownReact/package.json | 4 +
.../generated/ArrowRightReact/package.json | 4 +
.../ArrowTriangleDownReact/package.json | 4 +
.../ArrowTriangleUpReact/package.json | 4 +
.../icons/generated/ArrowUpReact/package.json | 4 +
.../ArrowsMinimizeReact/package.json | 4 +
.../icons/generated/ArrowsReact/package.json | 4 +
.../icons/generated/BackReact/package.json | 4 +
.../BidirectionalArrowReact/package.json | 4 +
.../generated/BinFilledReact/package.json | 4 +
.../generated/BinLinearReact/package.json | 4 +
.../icons/generated/BoxReact/package.json | 4 +
.../icons/generated/BrainReact/package.json | 4 +
.../generated/CalendarReact/package.json | 4 +
.../icons/generated/CameraReact/package.json | 4 +
.../generated/CaretDownReact/package.json | 4 +
.../CaretDownSmallReact/package.json | 4 +
.../icons/generated/CaretUpReact/package.json | 4 +
.../generated/CaretUpSmallReact/package.json | 4 +
.../icons/generated/CartReact/package.json | 4 +
.../generated/ChainBrokenReact/package.json | 4 +
.../icons/generated/ChainReact/package.json | 4 +
.../generated/CheckActiveReact/package.json | 4 +
.../generated/CheckBoldReact/package.json | 4 +
.../generated/CheckInactiveReact/package.json | 4 +
.../generated/CheckThinReact/package.json | 4 +
.../icons/generated/CircleReact/package.json | 4 +
.../generated/ClipboardReact/package.json | 4 +
.../icons/generated/ClockReact/package.json | 4 +
.../ClockWithArrowReact/package.json | 4 +
.../generated/CloseBoldReact/package.json | 4 +
.../icons/generated/CloseReact/package.json | 4 +
.../generated/CodeViewReact/package.json | 4 +
.../icons/generated/CoinsReact/package.json | 4 +
.../icons/generated/ColumnsReact/package.json | 4 +
.../ConnectedSquareReact/package.json | 4 +
.../ConnectedTriangleReact/package.json | 4 +
.../icons/generated/CopyReact/package.json | 4 +
.../generated/CtCheckoutReact/package.json | 4 +
.../icons/generated/CubeReact/package.json | 4 +
.../icons/generated/CubesReact/package.json | 4 +
.../icons/generated/DiamondReact/package.json | 4 +
.../icons/generated/DomainReact/package.json | 4 +
.../icons/generated/DotReact/package.json | 4 +
.../generated/DownloadReact/package.json | 4 +
.../generated/DragDropReact/package.json | 4 +
.../icons/generated/DragReact/package.json | 4 +
.../icons/generated/EditReact/package.json | 4 +
.../icons/generated/ErrorReact/package.json | 4 +
.../icons/generated/ExpandReact/package.json | 4 +
.../icons/generated/ExportReact/package.json | 4 +
.../generated/ExternalLinkReact/package.json | 4 +
.../generated/EyeCrossedReact/package.json | 4 +
.../icons/generated/EyeReact/package.json | 4 +
.../generated/FilterAndListReact/package.json | 4 +
.../icons/generated/FilterReact/package.json | 4 +
.../generated/FlagFilledReact/package.json | 4 +
.../generated/FlagLinearReact/package.json | 4 +
.../icons/generated/FlameReact/package.json | 4 +
.../FractionDigitsReact/package.json | 4 +
.../icons/generated/GearReact/package.json | 4 +
.../generated/GraduationCapReact/package.json | 4 +
.../icons/generated/GraphReact/package.json | 4 +
.../icons/generated/GridReact/package.json | 4 +
.../generated/GroupAddReact/package.json | 4 +
.../icons/generated/HeartReact/package.json | 4 +
.../icons/generated/HomeReact/package.json | 4 +
.../icons/generated/HubReact/package.json | 4 +
.../icons/generated/ImportReact/package.json | 4 +
.../icons/generated/InfoReact/package.json | 4 +
.../generated/InformationReact/package.json | 4 +
.../icons/generated/LayersReact/package.json | 4 +
.../icons/generated/ListReact/package.json | 4 +
.../ListWithSearchReact/package.json | 4 +
.../icons/generated/LockReact/package.json | 4 +
.../icons/generated/LogoutReact/package.json | 4 +
.../icons/generated/MailReact/package.json | 4 +
.../generated/MinimizeReact/package.json | 4 +
.../generated/NestedViewReact/package.json | 4 +
.../generated/OperationsReact/package.json | 4 +
.../generated/PageGearReact/package.json | 4 +
.../icons/generated/PagesReact/package.json | 4 +
.../icons/generated/PaidReact/package.json | 4 +
.../PaperBillInvertedReact/package.json | 4 +
.../generated/PaperclipReact/package.json | 4 +
.../generated/PinFilledReact/package.json | 4 +
.../icons/generated/PinGearReact/package.json | 4 +
.../generated/PinLinearReact/package.json | 4 +
.../icons/generated/PluginReact/package.json | 4 +
.../generated/PlusBoldReact/package.json | 4 +
.../generated/PlusThinReact/package.json | 4 +
.../icons/generated/RefreshReact/package.json | 4 +
.../icons/generated/RestoreReact/package.json | 4 +
.../icons/generated/RevertReact/package.json | 4 +
.../icons/generated/ReviewReact/package.json | 4 +
.../RightTriangleFilledReact/package.json | 4 +
.../RightTriangleLinearReact/package.json | 4 +
.../icons/generated/RocketReact/package.json | 4 +
.../generated/ScreenGearReact/package.json | 4 +
.../generated/ScreenUserReact/package.json | 4 +
.../icons/generated/SearchReact/package.json | 4 +
.../SidebarCollapseReact/package.json | 4 +
.../generated/SidebarExpandReact/package.json | 4 +
.../icons/generated/SortingReact/package.json | 4 +
.../generated/SpeechBubbleReact/package.json | 4 +
.../generated/SpeedometerReact/package.json | 4 +
.../icons/generated/SplitReact/package.json | 4 +
.../icons/generated/StackReact/package.json | 4 +
.../icons/generated/StarReact/package.json | 4 +
.../SubdirectoryArrowReact/package.json | 4 +
.../icons/generated/SupportReact/package.json | 4 +
.../generated/SwitcherReact/package.json | 4 +
.../icons/generated/TableReact/package.json | 4 +
.../generated/TagMultiReact/package.json | 4 +
.../icons/generated/TagReact/package.json | 4 +
.../generated/TagStackedReact/package.json | 4 +
.../generated/TerminalReact/package.json | 4 +
.../generated/TreeStructureReact/package.json | 4 +
.../icons/generated/TruckReact/package.json | 4 +
.../icons/generated/TuneReact/package.json | 4 +
.../generated/UserFilledReact/package.json | 4 +
.../generated/UserLinearReact/package.json | 4 +
.../icons/generated/UsersReact/package.json | 4 +
.../generated/VerifiedReact/package.json | 4 +
.../generated/ViewGridPlusReact/package.json | 4 +
.../icons/generated/WarningReact/package.json | 4 +
.../generated/WindowEyeReact/package.json | 4 +
.../icons/generated/WorldReact/package.json | 4 +
packages/components/icons/package.json | 11 +-
.../icons/src/generated/AngleDownReact.tsx | 137 +-----------------
.../icons/src/generated/AngleLeftReact.tsx | 137 +-----------------
.../icons/src/generated/AngleRightReact.tsx | 137 +-----------------
.../src/generated/AngleThinLeftReact.tsx | 137 +-----------------
.../src/generated/AngleThinRightReact.tsx | 137 +-----------------
.../icons/src/generated/AngleUpDownReact.tsx | 137 +-----------------
.../icons/src/generated/AngleUpReact.tsx | 137 +-----------------
.../icons/src/generated/ArrowDownReact.tsx | 137 +-----------------
.../icons/src/generated/ArrowLeftReact.tsx | 137 +-----------------
.../src/generated/ArrowLongDownReact.tsx | 137 +-----------------
.../icons/src/generated/ArrowRightReact.tsx | 137 +-----------------
.../src/generated/ArrowTriangleDownReact.tsx | 137 +-----------------
.../src/generated/ArrowTriangleUpReact.tsx | 137 +-----------------
.../icons/src/generated/ArrowUpReact.tsx | 137 +-----------------
.../src/generated/ArrowsMinimizeReact.tsx | 137 +-----------------
.../icons/src/generated/ArrowsReact.tsx | 137 +-----------------
.../icons/src/generated/BackReact.tsx | 137 +-----------------
.../src/generated/BidirectionalArrowReact.tsx | 137 +-----------------
.../icons/src/generated/BinFilledReact.tsx | 137 +-----------------
.../icons/src/generated/BinLinearReact.tsx | 137 +-----------------
.../icons/src/generated/BoxReact.tsx | 137 +-----------------
.../icons/src/generated/BrainReact.tsx | 137 +-----------------
.../icons/src/generated/CalendarReact.tsx | 137 +-----------------
.../icons/src/generated/CameraReact.tsx | 137 +-----------------
.../icons/src/generated/CaretDownReact.tsx | 137 +-----------------
.../src/generated/CaretDownSmallReact.tsx | 137 +-----------------
.../icons/src/generated/CaretUpReact.tsx | 137 +-----------------
.../icons/src/generated/CaretUpSmallReact.tsx | 137 +-----------------
.../icons/src/generated/CartReact.tsx | 137 +-----------------
.../icons/src/generated/ChainBrokenReact.tsx | 137 +-----------------
.../icons/src/generated/ChainReact.tsx | 137 +-----------------
.../icons/src/generated/CheckActiveReact.tsx | 137 +-----------------
.../icons/src/generated/CheckBoldReact.tsx | 137 +-----------------
.../src/generated/CheckInactiveReact.tsx | 137 +-----------------
.../icons/src/generated/CheckThinReact.tsx | 137 +-----------------
.../icons/src/generated/CircleReact.tsx | 137 +-----------------
.../icons/src/generated/ClipboardReact.tsx | 137 +-----------------
.../icons/src/generated/ClockReact.tsx | 137 +-----------------
.../src/generated/ClockWithArrowReact.tsx | 137 +-----------------
.../icons/src/generated/CloseBoldReact.tsx | 137 +-----------------
.../icons/src/generated/CloseReact.tsx | 137 +-----------------
.../icons/src/generated/CodeViewReact.tsx | 137 +-----------------
.../icons/src/generated/CoinsReact.tsx | 137 +-----------------
.../icons/src/generated/ColumnsReact.tsx | 137 +-----------------
.../src/generated/ConnectedSquareReact.tsx | 137 +-----------------
.../src/generated/ConnectedTriangleReact.tsx | 137 +-----------------
.../icons/src/generated/CopyReact.tsx | 137 +-----------------
.../icons/src/generated/CtCheckoutReact.tsx | 137 +-----------------
.../icons/src/generated/CubeReact.tsx | 137 +-----------------
.../icons/src/generated/CubesReact.tsx | 137 +-----------------
.../icons/src/generated/DiamondReact.tsx | 137 +-----------------
.../icons/src/generated/DomainReact.tsx | 137 +-----------------
.../icons/src/generated/DotReact.tsx | 137 +-----------------
.../icons/src/generated/DownloadReact.tsx | 137 +-----------------
.../icons/src/generated/DragDropReact.tsx | 137 +-----------------
.../icons/src/generated/DragReact.tsx | 137 +-----------------
.../icons/src/generated/EditReact.tsx | 137 +-----------------
.../icons/src/generated/ErrorReact.tsx | 137 +-----------------
.../icons/src/generated/ExpandReact.tsx | 137 +-----------------
.../icons/src/generated/ExportReact.tsx | 137 +-----------------
.../icons/src/generated/ExternalLinkReact.tsx | 137 +-----------------
.../icons/src/generated/EyeCrossedReact.tsx | 137 +-----------------
.../icons/src/generated/EyeReact.tsx | 137 +-----------------
.../src/generated/FilterAndListReact.tsx | 137 +-----------------
.../icons/src/generated/FilterReact.tsx | 137 +-----------------
.../icons/src/generated/FlagFilledReact.tsx | 137 +-----------------
.../icons/src/generated/FlagLinearReact.tsx | 137 +-----------------
.../icons/src/generated/FlameReact.tsx | 137 +-----------------
.../src/generated/FractionDigitsReact.tsx | 137 +-----------------
.../icons/src/generated/GearReact.tsx | 137 +-----------------
.../src/generated/GraduationCapReact.tsx | 137 +-----------------
.../icons/src/generated/GraphReact.tsx | 137 +-----------------
.../icons/src/generated/GridReact.tsx | 137 +-----------------
.../icons/src/generated/GroupAddReact.tsx | 137 +-----------------
.../icons/src/generated/HeartReact.tsx | 137 +-----------------
.../icons/src/generated/HomeReact.tsx | 137 +-----------------
.../icons/src/generated/HubReact.tsx | 137 +-----------------
.../icons/src/generated/ImportReact.tsx | 137 +-----------------
.../icons/src/generated/InfoReact.tsx | 137 +-----------------
.../icons/src/generated/InformationReact.tsx | 137 +-----------------
.../icons/src/generated/LayersReact.tsx | 137 +-----------------
.../icons/src/generated/ListReact.tsx | 137 +-----------------
.../src/generated/ListWithSearchReact.tsx | 137 +-----------------
.../icons/src/generated/LockReact.tsx | 137 +-----------------
.../icons/src/generated/LogoutReact.tsx | 137 +-----------------
.../icons/src/generated/MailReact.tsx | 137 +-----------------
.../icons/src/generated/MinimizeReact.tsx | 137 +-----------------
.../icons/src/generated/NestedViewReact.tsx | 137 +-----------------
.../icons/src/generated/OperationsReact.tsx | 137 +-----------------
.../icons/src/generated/PageGearReact.tsx | 137 +-----------------
.../icons/src/generated/PagesReact.tsx | 137 +-----------------
.../icons/src/generated/PaidReact.tsx | 137 +-----------------
.../src/generated/PaperBillInvertedReact.tsx | 137 +-----------------
.../icons/src/generated/PaperclipReact.tsx | 137 +-----------------
.../icons/src/generated/PinFilledReact.tsx | 137 +-----------------
.../icons/src/generated/PinGearReact.tsx | 137 +-----------------
.../icons/src/generated/PinLinearReact.tsx | 137 +-----------------
.../icons/src/generated/PluginReact.tsx | 137 +-----------------
.../icons/src/generated/PlusBoldReact.tsx | 137 +-----------------
.../icons/src/generated/PlusThinReact.tsx | 137 +-----------------
.../icons/src/generated/RefreshReact.tsx | 137 +-----------------
.../icons/src/generated/RestoreReact.tsx | 137 +-----------------
.../icons/src/generated/RevertReact.tsx | 137 +-----------------
.../icons/src/generated/ReviewReact.tsx | 137 +-----------------
.../generated/RightTriangleFilledReact.tsx | 137 +-----------------
.../generated/RightTriangleLinearReact.tsx | 137 +-----------------
.../icons/src/generated/RocketReact.tsx | 137 +-----------------
.../icons/src/generated/ScreenGearReact.tsx | 137 +-----------------
.../icons/src/generated/ScreenUserReact.tsx | 137 +-----------------
.../icons/src/generated/SearchReact.tsx | 137 +-----------------
.../src/generated/SidebarCollapseReact.tsx | 137 +-----------------
.../src/generated/SidebarExpandReact.tsx | 137 +-----------------
.../icons/src/generated/SortingReact.tsx | 137 +-----------------
.../icons/src/generated/SpeechBubbleReact.tsx | 137 +-----------------
.../icons/src/generated/SpeedometerReact.tsx | 137 +-----------------
.../icons/src/generated/SplitReact.tsx | 137 +-----------------
.../icons/src/generated/StackReact.tsx | 137 +-----------------
.../icons/src/generated/StarReact.tsx | 137 +-----------------
.../src/generated/SubdirectoryArrowReact.tsx | 137 +-----------------
.../icons/src/generated/SupportReact.tsx | 137 +-----------------
.../icons/src/generated/SwitcherReact.tsx | 137 +-----------------
.../icons/src/generated/TableReact.tsx | 137 +-----------------
.../icons/src/generated/TagMultiReact.tsx | 137 +-----------------
.../icons/src/generated/TagReact.tsx | 137 +-----------------
.../icons/src/generated/TagStackedReact.tsx | 137 +-----------------
.../icons/src/generated/TerminalReact.tsx | 137 +-----------------
.../src/generated/TreeStructureReact.tsx | 137 +-----------------
.../icons/src/generated/TruckReact.tsx | 137 +-----------------
.../icons/src/generated/TuneReact.tsx | 137 +-----------------
.../icons/src/generated/UserFilledReact.tsx | 137 +-----------------
.../icons/src/generated/UserLinearReact.tsx | 137 +-----------------
.../icons/src/generated/UsersReact.tsx | 137 +-----------------
.../icons/src/generated/VerifiedReact.tsx | 137 +-----------------
.../icons/src/generated/ViewGridPlusReact.tsx | 137 +-----------------
.../icons/src/generated/WarningReact.tsx | 137 +-----------------
.../icons/src/generated/WindowEyeReact.tsx | 137 +-----------------
.../icons/src/generated/WorldReact.tsx | 137 +-----------------
.../icons/src/inline-svg/inline-svg.tsx | 9 +-
.../icons/src/templates/icon.styles.tsx | 125 ----------------
.../src/icons/generated/CheckedReact.tsx | 137 +-----------------
.../icons/generated/IndeterminateReact.tsx | 137 +-----------------
.../icons/generated/BoldReact.tsx | 137 +-----------------
.../icons/generated/ExpandFullReact.tsx | 137 +-----------------
.../icons/generated/ExpandReact.tsx | 137 +-----------------
.../icons/generated/ItalicReact.tsx | 137 +-----------------
.../icons/generated/MoreStylesReact.tsx | 137 +-----------------
.../icons/generated/OrderedListReact.tsx | 137 +-----------------
.../icons/generated/RedoReact.tsx | 137 +-----------------
.../icons/generated/StrikethroughReact.tsx | 137 +-----------------
.../icons/generated/SubscriptReact.tsx | 137 +-----------------
.../icons/generated/SuperscriptReact.tsx | 137 +-----------------
.../icons/generated/UnderlineReact.tsx | 137 +-----------------
.../icons/generated/UndoReact.tsx | 137 +-----------------
.../icons/generated/UnorderedListReact.tsx | 137 +-----------------
storybook/src/components/icon-search.tsx | 24 +--
svgr.config.js | 21 +--
298 files changed, 1841 insertions(+), 19763 deletions(-)
create mode 100644 .changeset/quiet-turkeys-smell.md
create mode 100644 packages/components/icons/CONTRIBUTING.md
create mode 100644 packages/components/icons/generated/AngleDownReact/package.json
create mode 100644 packages/components/icons/generated/AngleLeftReact/package.json
create mode 100644 packages/components/icons/generated/AngleRightReact/package.json
create mode 100644 packages/components/icons/generated/AngleThinLeftReact/package.json
create mode 100644 packages/components/icons/generated/AngleThinRightReact/package.json
create mode 100644 packages/components/icons/generated/AngleUpDownReact/package.json
create mode 100644 packages/components/icons/generated/AngleUpReact/package.json
create mode 100644 packages/components/icons/generated/ArrowDownReact/package.json
create mode 100644 packages/components/icons/generated/ArrowLeftReact/package.json
create mode 100644 packages/components/icons/generated/ArrowLongDownReact/package.json
create mode 100644 packages/components/icons/generated/ArrowRightReact/package.json
create mode 100644 packages/components/icons/generated/ArrowTriangleDownReact/package.json
create mode 100644 packages/components/icons/generated/ArrowTriangleUpReact/package.json
create mode 100644 packages/components/icons/generated/ArrowUpReact/package.json
create mode 100644 packages/components/icons/generated/ArrowsMinimizeReact/package.json
create mode 100644 packages/components/icons/generated/ArrowsReact/package.json
create mode 100644 packages/components/icons/generated/BackReact/package.json
create mode 100644 packages/components/icons/generated/BidirectionalArrowReact/package.json
create mode 100644 packages/components/icons/generated/BinFilledReact/package.json
create mode 100644 packages/components/icons/generated/BinLinearReact/package.json
create mode 100644 packages/components/icons/generated/BoxReact/package.json
create mode 100644 packages/components/icons/generated/BrainReact/package.json
create mode 100644 packages/components/icons/generated/CalendarReact/package.json
create mode 100644 packages/components/icons/generated/CameraReact/package.json
create mode 100644 packages/components/icons/generated/CaretDownReact/package.json
create mode 100644 packages/components/icons/generated/CaretDownSmallReact/package.json
create mode 100644 packages/components/icons/generated/CaretUpReact/package.json
create mode 100644 packages/components/icons/generated/CaretUpSmallReact/package.json
create mode 100644 packages/components/icons/generated/CartReact/package.json
create mode 100644 packages/components/icons/generated/ChainBrokenReact/package.json
create mode 100644 packages/components/icons/generated/ChainReact/package.json
create mode 100644 packages/components/icons/generated/CheckActiveReact/package.json
create mode 100644 packages/components/icons/generated/CheckBoldReact/package.json
create mode 100644 packages/components/icons/generated/CheckInactiveReact/package.json
create mode 100644 packages/components/icons/generated/CheckThinReact/package.json
create mode 100644 packages/components/icons/generated/CircleReact/package.json
create mode 100644 packages/components/icons/generated/ClipboardReact/package.json
create mode 100644 packages/components/icons/generated/ClockReact/package.json
create mode 100644 packages/components/icons/generated/ClockWithArrowReact/package.json
create mode 100644 packages/components/icons/generated/CloseBoldReact/package.json
create mode 100644 packages/components/icons/generated/CloseReact/package.json
create mode 100644 packages/components/icons/generated/CodeViewReact/package.json
create mode 100644 packages/components/icons/generated/CoinsReact/package.json
create mode 100644 packages/components/icons/generated/ColumnsReact/package.json
create mode 100644 packages/components/icons/generated/ConnectedSquareReact/package.json
create mode 100644 packages/components/icons/generated/ConnectedTriangleReact/package.json
create mode 100644 packages/components/icons/generated/CopyReact/package.json
create mode 100644 packages/components/icons/generated/CtCheckoutReact/package.json
create mode 100644 packages/components/icons/generated/CubeReact/package.json
create mode 100644 packages/components/icons/generated/CubesReact/package.json
create mode 100644 packages/components/icons/generated/DiamondReact/package.json
create mode 100644 packages/components/icons/generated/DomainReact/package.json
create mode 100644 packages/components/icons/generated/DotReact/package.json
create mode 100644 packages/components/icons/generated/DownloadReact/package.json
create mode 100644 packages/components/icons/generated/DragDropReact/package.json
create mode 100644 packages/components/icons/generated/DragReact/package.json
create mode 100644 packages/components/icons/generated/EditReact/package.json
create mode 100644 packages/components/icons/generated/ErrorReact/package.json
create mode 100644 packages/components/icons/generated/ExpandReact/package.json
create mode 100644 packages/components/icons/generated/ExportReact/package.json
create mode 100644 packages/components/icons/generated/ExternalLinkReact/package.json
create mode 100644 packages/components/icons/generated/EyeCrossedReact/package.json
create mode 100644 packages/components/icons/generated/EyeReact/package.json
create mode 100644 packages/components/icons/generated/FilterAndListReact/package.json
create mode 100644 packages/components/icons/generated/FilterReact/package.json
create mode 100644 packages/components/icons/generated/FlagFilledReact/package.json
create mode 100644 packages/components/icons/generated/FlagLinearReact/package.json
create mode 100644 packages/components/icons/generated/FlameReact/package.json
create mode 100644 packages/components/icons/generated/FractionDigitsReact/package.json
create mode 100644 packages/components/icons/generated/GearReact/package.json
create mode 100644 packages/components/icons/generated/GraduationCapReact/package.json
create mode 100644 packages/components/icons/generated/GraphReact/package.json
create mode 100644 packages/components/icons/generated/GridReact/package.json
create mode 100644 packages/components/icons/generated/GroupAddReact/package.json
create mode 100644 packages/components/icons/generated/HeartReact/package.json
create mode 100644 packages/components/icons/generated/HomeReact/package.json
create mode 100644 packages/components/icons/generated/HubReact/package.json
create mode 100644 packages/components/icons/generated/ImportReact/package.json
create mode 100644 packages/components/icons/generated/InfoReact/package.json
create mode 100644 packages/components/icons/generated/InformationReact/package.json
create mode 100644 packages/components/icons/generated/LayersReact/package.json
create mode 100644 packages/components/icons/generated/ListReact/package.json
create mode 100644 packages/components/icons/generated/ListWithSearchReact/package.json
create mode 100644 packages/components/icons/generated/LockReact/package.json
create mode 100644 packages/components/icons/generated/LogoutReact/package.json
create mode 100644 packages/components/icons/generated/MailReact/package.json
create mode 100644 packages/components/icons/generated/MinimizeReact/package.json
create mode 100644 packages/components/icons/generated/NestedViewReact/package.json
create mode 100644 packages/components/icons/generated/OperationsReact/package.json
create mode 100644 packages/components/icons/generated/PageGearReact/package.json
create mode 100644 packages/components/icons/generated/PagesReact/package.json
create mode 100644 packages/components/icons/generated/PaidReact/package.json
create mode 100644 packages/components/icons/generated/PaperBillInvertedReact/package.json
create mode 100644 packages/components/icons/generated/PaperclipReact/package.json
create mode 100644 packages/components/icons/generated/PinFilledReact/package.json
create mode 100644 packages/components/icons/generated/PinGearReact/package.json
create mode 100644 packages/components/icons/generated/PinLinearReact/package.json
create mode 100644 packages/components/icons/generated/PluginReact/package.json
create mode 100644 packages/components/icons/generated/PlusBoldReact/package.json
create mode 100644 packages/components/icons/generated/PlusThinReact/package.json
create mode 100644 packages/components/icons/generated/RefreshReact/package.json
create mode 100644 packages/components/icons/generated/RestoreReact/package.json
create mode 100644 packages/components/icons/generated/RevertReact/package.json
create mode 100644 packages/components/icons/generated/ReviewReact/package.json
create mode 100644 packages/components/icons/generated/RightTriangleFilledReact/package.json
create mode 100644 packages/components/icons/generated/RightTriangleLinearReact/package.json
create mode 100644 packages/components/icons/generated/RocketReact/package.json
create mode 100644 packages/components/icons/generated/ScreenGearReact/package.json
create mode 100644 packages/components/icons/generated/ScreenUserReact/package.json
create mode 100644 packages/components/icons/generated/SearchReact/package.json
create mode 100644 packages/components/icons/generated/SidebarCollapseReact/package.json
create mode 100644 packages/components/icons/generated/SidebarExpandReact/package.json
create mode 100644 packages/components/icons/generated/SortingReact/package.json
create mode 100644 packages/components/icons/generated/SpeechBubbleReact/package.json
create mode 100644 packages/components/icons/generated/SpeedometerReact/package.json
create mode 100644 packages/components/icons/generated/SplitReact/package.json
create mode 100644 packages/components/icons/generated/StackReact/package.json
create mode 100644 packages/components/icons/generated/StarReact/package.json
create mode 100644 packages/components/icons/generated/SubdirectoryArrowReact/package.json
create mode 100644 packages/components/icons/generated/SupportReact/package.json
create mode 100644 packages/components/icons/generated/SwitcherReact/package.json
create mode 100644 packages/components/icons/generated/TableReact/package.json
create mode 100644 packages/components/icons/generated/TagMultiReact/package.json
create mode 100644 packages/components/icons/generated/TagReact/package.json
create mode 100644 packages/components/icons/generated/TagStackedReact/package.json
create mode 100644 packages/components/icons/generated/TerminalReact/package.json
create mode 100644 packages/components/icons/generated/TreeStructureReact/package.json
create mode 100644 packages/components/icons/generated/TruckReact/package.json
create mode 100644 packages/components/icons/generated/TuneReact/package.json
create mode 100644 packages/components/icons/generated/UserFilledReact/package.json
create mode 100644 packages/components/icons/generated/UserLinearReact/package.json
create mode 100644 packages/components/icons/generated/UsersReact/package.json
create mode 100644 packages/components/icons/generated/VerifiedReact/package.json
create mode 100644 packages/components/icons/generated/ViewGridPlusReact/package.json
create mode 100644 packages/components/icons/generated/WarningReact/package.json
create mode 100644 packages/components/icons/generated/WindowEyeReact/package.json
create mode 100644 packages/components/icons/generated/WorldReact/package.json
delete mode 100644 packages/components/icons/src/templates/icon.styles.tsx
diff --git a/.changeset/quiet-turkeys-smell.md b/.changeset/quiet-turkeys-smell.md
new file mode 100644
index 0000000000..f34b3812ee
--- /dev/null
+++ b/.changeset/quiet-turkeys-smell.md
@@ -0,0 +1,7 @@
+---
+'@commercetools-uikit/rich-text-utils': minor
+'@commercetools-uikit/checkbox-input': minor
+'@commercetools-uikit/icons': minor
+---
+
+Update handling of icons to reduce file size of each icon, update bundling of icons package so that each icon has its own entrypoint to allow for better tree shaking in consuming applications
diff --git a/.eslintrc.js b/.eslintrc.js
index a9b6f097b1..0899781393 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -7,6 +7,7 @@ const path = require('path');
*/
module.exports = {
extends: ['@commercetools-frontend/eslint-config-mc-app'],
+
rules: {
'testing-library/no-node-access': 'off',
'testing-library/no-container': 'off',
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 226e93083e..6abb680a16 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -123,7 +123,10 @@ If you want to modify an existing translation, you will need to manually edit th
To add new icons in the `@commercetools-uikit/icons` package:
1. Add the raw SVG file to the `packages/components/icons/src/svg` folder. Make sure the file name ends with `.react.svg`.
-2. Run the `yarn generate-icons` command to generate the React component files. The components are generated using the `svgo` CLI and the template file `packages/components/icons/src/templates/icon.styles.tsx`.
+2. Run the `yarn generate-icons` command to generate the React component files. The components are generated using the `svgr` CLI and the template file in `svgr/config.js`
+3. Run `yarn preconstruct dev` to generate the necessary entrypoint folders for the icon.
+
+See `packages/components/icons/src/CONTRIBUTING.md` for more details.
## Adding changesets
diff --git a/packages/components/icons/CONTRIBUTING.md b/packages/components/icons/CONTRIBUTING.md
new file mode 100644
index 0000000000..d81bdab29c
--- /dev/null
+++ b/packages/components/icons/CONTRIBUTING.md
@@ -0,0 +1,29 @@
+# Contributing SVG Icons
+
+## How svg's are defined and built
+
+All icons that are available in UI Kit are stored as `*.react.svg` files in the `src/svg` folder. This folder is meant to be the single source of truth for all icons.
+
+To make the svg files consumable by react applications, we run each icon in `src/svg` through [svgr](https://react-svgr.com/docs/cli/). Svgr uses a custom template defined in `svgr.config.js` to transpile each svg into a react component defined in `src/generated`.
+
+Each `tsx` file generated by svgr in `src/generated` is specified as an entrypoint in the `preconstruct.entrypoints` array in `./package.json` in order to allow for [tree shaking](https://webpack.js.org/guides/tree-shaking/) of individual icons in applications that consume them.
+
+For all icons to have an entrypoint in the `icons` package, there must be a folder in `./generated` for each icon that contains a `package.json` file and `dist/` folder. Preconstruct handles adding this folder for any `tsx` file that does not have one when you run `preconstruct dev` or `yarn build` from the root of this repository.
+
+### Adding an svg
+
+- Add the raw SVG file ending in `.react.svg` to `./src/svg`.
+- Run `yarn build` from the root of the application.
+- Say yes to the prompt that asks: `? @commercetools-uikit/icons/generated/AatestReact A package.json file does not exist for this entrypoint, would you like to create one automatically? (Y/n) `.
+
+### Updating an svg
+
+- update the svg file in `./src/svg`
+- run `yarn build` from the repository root
+
+### Deleting an svg
+
+- delete the raw svg from `./src/svg`
+- delete the `./generated` and `./src/generated` folders. This insures that the deleted icon does not persist in the generated files.
+- run `yarn build`
+- Hit `a` to select all packages when the prompt asks `🎁 ? A package.json file does not exist for this entrypoint, would you like to create one automatically? … `. This insures that there is an entrypoint package for each icon in `src/generated`.
diff --git a/packages/components/icons/generated/AngleDownReact/package.json b/packages/components/icons/generated/AngleDownReact/package.json
new file mode 100644
index 0000000000..3fc8da78e9
--- /dev/null
+++ b/packages/components/icons/generated/AngleDownReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-AngleDownReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-AngleDownReact.esm.js"
+}
diff --git a/packages/components/icons/generated/AngleLeftReact/package.json b/packages/components/icons/generated/AngleLeftReact/package.json
new file mode 100644
index 0000000000..3e8ee6e564
--- /dev/null
+++ b/packages/components/icons/generated/AngleLeftReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-AngleLeftReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-AngleLeftReact.esm.js"
+}
diff --git a/packages/components/icons/generated/AngleRightReact/package.json b/packages/components/icons/generated/AngleRightReact/package.json
new file mode 100644
index 0000000000..e13afc7314
--- /dev/null
+++ b/packages/components/icons/generated/AngleRightReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-AngleRightReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-AngleRightReact.esm.js"
+}
diff --git a/packages/components/icons/generated/AngleThinLeftReact/package.json b/packages/components/icons/generated/AngleThinLeftReact/package.json
new file mode 100644
index 0000000000..06a308d200
--- /dev/null
+++ b/packages/components/icons/generated/AngleThinLeftReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-AngleThinLeftReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-AngleThinLeftReact.esm.js"
+}
diff --git a/packages/components/icons/generated/AngleThinRightReact/package.json b/packages/components/icons/generated/AngleThinRightReact/package.json
new file mode 100644
index 0000000000..773876892e
--- /dev/null
+++ b/packages/components/icons/generated/AngleThinRightReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-AngleThinRightReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-AngleThinRightReact.esm.js"
+}
diff --git a/packages/components/icons/generated/AngleUpDownReact/package.json b/packages/components/icons/generated/AngleUpDownReact/package.json
new file mode 100644
index 0000000000..6892be5b9c
--- /dev/null
+++ b/packages/components/icons/generated/AngleUpDownReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-AngleUpDownReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-AngleUpDownReact.esm.js"
+}
diff --git a/packages/components/icons/generated/AngleUpReact/package.json b/packages/components/icons/generated/AngleUpReact/package.json
new file mode 100644
index 0000000000..d9244332b7
--- /dev/null
+++ b/packages/components/icons/generated/AngleUpReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-AngleUpReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-AngleUpReact.esm.js"
+}
diff --git a/packages/components/icons/generated/ArrowDownReact/package.json b/packages/components/icons/generated/ArrowDownReact/package.json
new file mode 100644
index 0000000000..09d3f1eeb7
--- /dev/null
+++ b/packages/components/icons/generated/ArrowDownReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-ArrowDownReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-ArrowDownReact.esm.js"
+}
diff --git a/packages/components/icons/generated/ArrowLeftReact/package.json b/packages/components/icons/generated/ArrowLeftReact/package.json
new file mode 100644
index 0000000000..9f5f9c3923
--- /dev/null
+++ b/packages/components/icons/generated/ArrowLeftReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-ArrowLeftReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-ArrowLeftReact.esm.js"
+}
diff --git a/packages/components/icons/generated/ArrowLongDownReact/package.json b/packages/components/icons/generated/ArrowLongDownReact/package.json
new file mode 100644
index 0000000000..0f72425e5c
--- /dev/null
+++ b/packages/components/icons/generated/ArrowLongDownReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-ArrowLongDownReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-ArrowLongDownReact.esm.js"
+}
diff --git a/packages/components/icons/generated/ArrowRightReact/package.json b/packages/components/icons/generated/ArrowRightReact/package.json
new file mode 100644
index 0000000000..538e95567e
--- /dev/null
+++ b/packages/components/icons/generated/ArrowRightReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-ArrowRightReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-ArrowRightReact.esm.js"
+}
diff --git a/packages/components/icons/generated/ArrowTriangleDownReact/package.json b/packages/components/icons/generated/ArrowTriangleDownReact/package.json
new file mode 100644
index 0000000000..beeef0b5c3
--- /dev/null
+++ b/packages/components/icons/generated/ArrowTriangleDownReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-ArrowTriangleDownReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-ArrowTriangleDownReact.esm.js"
+}
diff --git a/packages/components/icons/generated/ArrowTriangleUpReact/package.json b/packages/components/icons/generated/ArrowTriangleUpReact/package.json
new file mode 100644
index 0000000000..7cfa4ec8b1
--- /dev/null
+++ b/packages/components/icons/generated/ArrowTriangleUpReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-ArrowTriangleUpReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-ArrowTriangleUpReact.esm.js"
+}
diff --git a/packages/components/icons/generated/ArrowUpReact/package.json b/packages/components/icons/generated/ArrowUpReact/package.json
new file mode 100644
index 0000000000..9b9a0dc0da
--- /dev/null
+++ b/packages/components/icons/generated/ArrowUpReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-ArrowUpReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-ArrowUpReact.esm.js"
+}
diff --git a/packages/components/icons/generated/ArrowsMinimizeReact/package.json b/packages/components/icons/generated/ArrowsMinimizeReact/package.json
new file mode 100644
index 0000000000..090f6f9fd9
--- /dev/null
+++ b/packages/components/icons/generated/ArrowsMinimizeReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-ArrowsMinimizeReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-ArrowsMinimizeReact.esm.js"
+}
diff --git a/packages/components/icons/generated/ArrowsReact/package.json b/packages/components/icons/generated/ArrowsReact/package.json
new file mode 100644
index 0000000000..a6ba65d189
--- /dev/null
+++ b/packages/components/icons/generated/ArrowsReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-ArrowsReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-ArrowsReact.esm.js"
+}
diff --git a/packages/components/icons/generated/BackReact/package.json b/packages/components/icons/generated/BackReact/package.json
new file mode 100644
index 0000000000..5c9c697ad0
--- /dev/null
+++ b/packages/components/icons/generated/BackReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-BackReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-BackReact.esm.js"
+}
diff --git a/packages/components/icons/generated/BidirectionalArrowReact/package.json b/packages/components/icons/generated/BidirectionalArrowReact/package.json
new file mode 100644
index 0000000000..fca12d81aa
--- /dev/null
+++ b/packages/components/icons/generated/BidirectionalArrowReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-BidirectionalArrowReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-BidirectionalArrowReact.esm.js"
+}
diff --git a/packages/components/icons/generated/BinFilledReact/package.json b/packages/components/icons/generated/BinFilledReact/package.json
new file mode 100644
index 0000000000..4a11db7bae
--- /dev/null
+++ b/packages/components/icons/generated/BinFilledReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-BinFilledReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-BinFilledReact.esm.js"
+}
diff --git a/packages/components/icons/generated/BinLinearReact/package.json b/packages/components/icons/generated/BinLinearReact/package.json
new file mode 100644
index 0000000000..45dedb2c9f
--- /dev/null
+++ b/packages/components/icons/generated/BinLinearReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-BinLinearReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-BinLinearReact.esm.js"
+}
diff --git a/packages/components/icons/generated/BoxReact/package.json b/packages/components/icons/generated/BoxReact/package.json
new file mode 100644
index 0000000000..07a8536c23
--- /dev/null
+++ b/packages/components/icons/generated/BoxReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-BoxReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-BoxReact.esm.js"
+}
diff --git a/packages/components/icons/generated/BrainReact/package.json b/packages/components/icons/generated/BrainReact/package.json
new file mode 100644
index 0000000000..806fff2acc
--- /dev/null
+++ b/packages/components/icons/generated/BrainReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-BrainReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-BrainReact.esm.js"
+}
diff --git a/packages/components/icons/generated/CalendarReact/package.json b/packages/components/icons/generated/CalendarReact/package.json
new file mode 100644
index 0000000000..7c885fd001
--- /dev/null
+++ b/packages/components/icons/generated/CalendarReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-CalendarReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-CalendarReact.esm.js"
+}
diff --git a/packages/components/icons/generated/CameraReact/package.json b/packages/components/icons/generated/CameraReact/package.json
new file mode 100644
index 0000000000..f934044fae
--- /dev/null
+++ b/packages/components/icons/generated/CameraReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-CameraReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-CameraReact.esm.js"
+}
diff --git a/packages/components/icons/generated/CaretDownReact/package.json b/packages/components/icons/generated/CaretDownReact/package.json
new file mode 100644
index 0000000000..d44dbde680
--- /dev/null
+++ b/packages/components/icons/generated/CaretDownReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-CaretDownReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-CaretDownReact.esm.js"
+}
diff --git a/packages/components/icons/generated/CaretDownSmallReact/package.json b/packages/components/icons/generated/CaretDownSmallReact/package.json
new file mode 100644
index 0000000000..05d105cc3d
--- /dev/null
+++ b/packages/components/icons/generated/CaretDownSmallReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-CaretDownSmallReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-CaretDownSmallReact.esm.js"
+}
diff --git a/packages/components/icons/generated/CaretUpReact/package.json b/packages/components/icons/generated/CaretUpReact/package.json
new file mode 100644
index 0000000000..8f94b7d057
--- /dev/null
+++ b/packages/components/icons/generated/CaretUpReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-CaretUpReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-CaretUpReact.esm.js"
+}
diff --git a/packages/components/icons/generated/CaretUpSmallReact/package.json b/packages/components/icons/generated/CaretUpSmallReact/package.json
new file mode 100644
index 0000000000..65a636c4b8
--- /dev/null
+++ b/packages/components/icons/generated/CaretUpSmallReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-CaretUpSmallReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-CaretUpSmallReact.esm.js"
+}
diff --git a/packages/components/icons/generated/CartReact/package.json b/packages/components/icons/generated/CartReact/package.json
new file mode 100644
index 0000000000..098f2661af
--- /dev/null
+++ b/packages/components/icons/generated/CartReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-CartReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-CartReact.esm.js"
+}
diff --git a/packages/components/icons/generated/ChainBrokenReact/package.json b/packages/components/icons/generated/ChainBrokenReact/package.json
new file mode 100644
index 0000000000..812006189a
--- /dev/null
+++ b/packages/components/icons/generated/ChainBrokenReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-ChainBrokenReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-ChainBrokenReact.esm.js"
+}
diff --git a/packages/components/icons/generated/ChainReact/package.json b/packages/components/icons/generated/ChainReact/package.json
new file mode 100644
index 0000000000..99e521a241
--- /dev/null
+++ b/packages/components/icons/generated/ChainReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-ChainReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-ChainReact.esm.js"
+}
diff --git a/packages/components/icons/generated/CheckActiveReact/package.json b/packages/components/icons/generated/CheckActiveReact/package.json
new file mode 100644
index 0000000000..e24b504c55
--- /dev/null
+++ b/packages/components/icons/generated/CheckActiveReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-CheckActiveReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-CheckActiveReact.esm.js"
+}
diff --git a/packages/components/icons/generated/CheckBoldReact/package.json b/packages/components/icons/generated/CheckBoldReact/package.json
new file mode 100644
index 0000000000..1d6b4b2c2f
--- /dev/null
+++ b/packages/components/icons/generated/CheckBoldReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-CheckBoldReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-CheckBoldReact.esm.js"
+}
diff --git a/packages/components/icons/generated/CheckInactiveReact/package.json b/packages/components/icons/generated/CheckInactiveReact/package.json
new file mode 100644
index 0000000000..032b09b240
--- /dev/null
+++ b/packages/components/icons/generated/CheckInactiveReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-CheckInactiveReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-CheckInactiveReact.esm.js"
+}
diff --git a/packages/components/icons/generated/CheckThinReact/package.json b/packages/components/icons/generated/CheckThinReact/package.json
new file mode 100644
index 0000000000..473deb2733
--- /dev/null
+++ b/packages/components/icons/generated/CheckThinReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-CheckThinReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-CheckThinReact.esm.js"
+}
diff --git a/packages/components/icons/generated/CircleReact/package.json b/packages/components/icons/generated/CircleReact/package.json
new file mode 100644
index 0000000000..6a3591df6e
--- /dev/null
+++ b/packages/components/icons/generated/CircleReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-CircleReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-CircleReact.esm.js"
+}
diff --git a/packages/components/icons/generated/ClipboardReact/package.json b/packages/components/icons/generated/ClipboardReact/package.json
new file mode 100644
index 0000000000..d272aa2d79
--- /dev/null
+++ b/packages/components/icons/generated/ClipboardReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-ClipboardReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-ClipboardReact.esm.js"
+}
diff --git a/packages/components/icons/generated/ClockReact/package.json b/packages/components/icons/generated/ClockReact/package.json
new file mode 100644
index 0000000000..365ed48ccb
--- /dev/null
+++ b/packages/components/icons/generated/ClockReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-ClockReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-ClockReact.esm.js"
+}
diff --git a/packages/components/icons/generated/ClockWithArrowReact/package.json b/packages/components/icons/generated/ClockWithArrowReact/package.json
new file mode 100644
index 0000000000..8ac5c45b1b
--- /dev/null
+++ b/packages/components/icons/generated/ClockWithArrowReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-ClockWithArrowReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-ClockWithArrowReact.esm.js"
+}
diff --git a/packages/components/icons/generated/CloseBoldReact/package.json b/packages/components/icons/generated/CloseBoldReact/package.json
new file mode 100644
index 0000000000..7a84af93a0
--- /dev/null
+++ b/packages/components/icons/generated/CloseBoldReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-CloseBoldReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-CloseBoldReact.esm.js"
+}
diff --git a/packages/components/icons/generated/CloseReact/package.json b/packages/components/icons/generated/CloseReact/package.json
new file mode 100644
index 0000000000..edfb140cea
--- /dev/null
+++ b/packages/components/icons/generated/CloseReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-CloseReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-CloseReact.esm.js"
+}
diff --git a/packages/components/icons/generated/CodeViewReact/package.json b/packages/components/icons/generated/CodeViewReact/package.json
new file mode 100644
index 0000000000..be3eadf3b3
--- /dev/null
+++ b/packages/components/icons/generated/CodeViewReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-CodeViewReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-CodeViewReact.esm.js"
+}
diff --git a/packages/components/icons/generated/CoinsReact/package.json b/packages/components/icons/generated/CoinsReact/package.json
new file mode 100644
index 0000000000..386fcdace4
--- /dev/null
+++ b/packages/components/icons/generated/CoinsReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-CoinsReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-CoinsReact.esm.js"
+}
diff --git a/packages/components/icons/generated/ColumnsReact/package.json b/packages/components/icons/generated/ColumnsReact/package.json
new file mode 100644
index 0000000000..b70806cbba
--- /dev/null
+++ b/packages/components/icons/generated/ColumnsReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-ColumnsReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-ColumnsReact.esm.js"
+}
diff --git a/packages/components/icons/generated/ConnectedSquareReact/package.json b/packages/components/icons/generated/ConnectedSquareReact/package.json
new file mode 100644
index 0000000000..f735585d38
--- /dev/null
+++ b/packages/components/icons/generated/ConnectedSquareReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-ConnectedSquareReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-ConnectedSquareReact.esm.js"
+}
diff --git a/packages/components/icons/generated/ConnectedTriangleReact/package.json b/packages/components/icons/generated/ConnectedTriangleReact/package.json
new file mode 100644
index 0000000000..0d2b474674
--- /dev/null
+++ b/packages/components/icons/generated/ConnectedTriangleReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-ConnectedTriangleReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-ConnectedTriangleReact.esm.js"
+}
diff --git a/packages/components/icons/generated/CopyReact/package.json b/packages/components/icons/generated/CopyReact/package.json
new file mode 100644
index 0000000000..0229803fac
--- /dev/null
+++ b/packages/components/icons/generated/CopyReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-CopyReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-CopyReact.esm.js"
+}
diff --git a/packages/components/icons/generated/CtCheckoutReact/package.json b/packages/components/icons/generated/CtCheckoutReact/package.json
new file mode 100644
index 0000000000..84329d6633
--- /dev/null
+++ b/packages/components/icons/generated/CtCheckoutReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-CtCheckoutReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-CtCheckoutReact.esm.js"
+}
diff --git a/packages/components/icons/generated/CubeReact/package.json b/packages/components/icons/generated/CubeReact/package.json
new file mode 100644
index 0000000000..f6cc27f475
--- /dev/null
+++ b/packages/components/icons/generated/CubeReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-CubeReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-CubeReact.esm.js"
+}
diff --git a/packages/components/icons/generated/CubesReact/package.json b/packages/components/icons/generated/CubesReact/package.json
new file mode 100644
index 0000000000..9368f48e50
--- /dev/null
+++ b/packages/components/icons/generated/CubesReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-CubesReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-CubesReact.esm.js"
+}
diff --git a/packages/components/icons/generated/DiamondReact/package.json b/packages/components/icons/generated/DiamondReact/package.json
new file mode 100644
index 0000000000..16ed29a7a9
--- /dev/null
+++ b/packages/components/icons/generated/DiamondReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-DiamondReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-DiamondReact.esm.js"
+}
diff --git a/packages/components/icons/generated/DomainReact/package.json b/packages/components/icons/generated/DomainReact/package.json
new file mode 100644
index 0000000000..269dda6356
--- /dev/null
+++ b/packages/components/icons/generated/DomainReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-DomainReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-DomainReact.esm.js"
+}
diff --git a/packages/components/icons/generated/DotReact/package.json b/packages/components/icons/generated/DotReact/package.json
new file mode 100644
index 0000000000..9e5a5a1624
--- /dev/null
+++ b/packages/components/icons/generated/DotReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-DotReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-DotReact.esm.js"
+}
diff --git a/packages/components/icons/generated/DownloadReact/package.json b/packages/components/icons/generated/DownloadReact/package.json
new file mode 100644
index 0000000000..6a9ffbd5c5
--- /dev/null
+++ b/packages/components/icons/generated/DownloadReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-DownloadReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-DownloadReact.esm.js"
+}
diff --git a/packages/components/icons/generated/DragDropReact/package.json b/packages/components/icons/generated/DragDropReact/package.json
new file mode 100644
index 0000000000..75461d7eb1
--- /dev/null
+++ b/packages/components/icons/generated/DragDropReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-DragDropReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-DragDropReact.esm.js"
+}
diff --git a/packages/components/icons/generated/DragReact/package.json b/packages/components/icons/generated/DragReact/package.json
new file mode 100644
index 0000000000..12b0ad9a55
--- /dev/null
+++ b/packages/components/icons/generated/DragReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-DragReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-DragReact.esm.js"
+}
diff --git a/packages/components/icons/generated/EditReact/package.json b/packages/components/icons/generated/EditReact/package.json
new file mode 100644
index 0000000000..72162237e7
--- /dev/null
+++ b/packages/components/icons/generated/EditReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-EditReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-EditReact.esm.js"
+}
diff --git a/packages/components/icons/generated/ErrorReact/package.json b/packages/components/icons/generated/ErrorReact/package.json
new file mode 100644
index 0000000000..887f8c6d96
--- /dev/null
+++ b/packages/components/icons/generated/ErrorReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-ErrorReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-ErrorReact.esm.js"
+}
diff --git a/packages/components/icons/generated/ExpandReact/package.json b/packages/components/icons/generated/ExpandReact/package.json
new file mode 100644
index 0000000000..77b90b0da3
--- /dev/null
+++ b/packages/components/icons/generated/ExpandReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-ExpandReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-ExpandReact.esm.js"
+}
diff --git a/packages/components/icons/generated/ExportReact/package.json b/packages/components/icons/generated/ExportReact/package.json
new file mode 100644
index 0000000000..a85bbe1f15
--- /dev/null
+++ b/packages/components/icons/generated/ExportReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-ExportReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-ExportReact.esm.js"
+}
diff --git a/packages/components/icons/generated/ExternalLinkReact/package.json b/packages/components/icons/generated/ExternalLinkReact/package.json
new file mode 100644
index 0000000000..3b177173a6
--- /dev/null
+++ b/packages/components/icons/generated/ExternalLinkReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-ExternalLinkReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-ExternalLinkReact.esm.js"
+}
diff --git a/packages/components/icons/generated/EyeCrossedReact/package.json b/packages/components/icons/generated/EyeCrossedReact/package.json
new file mode 100644
index 0000000000..3a70d113d5
--- /dev/null
+++ b/packages/components/icons/generated/EyeCrossedReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-EyeCrossedReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-EyeCrossedReact.esm.js"
+}
diff --git a/packages/components/icons/generated/EyeReact/package.json b/packages/components/icons/generated/EyeReact/package.json
new file mode 100644
index 0000000000..b5debaa504
--- /dev/null
+++ b/packages/components/icons/generated/EyeReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-EyeReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-EyeReact.esm.js"
+}
diff --git a/packages/components/icons/generated/FilterAndListReact/package.json b/packages/components/icons/generated/FilterAndListReact/package.json
new file mode 100644
index 0000000000..fe436edb8b
--- /dev/null
+++ b/packages/components/icons/generated/FilterAndListReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-FilterAndListReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-FilterAndListReact.esm.js"
+}
diff --git a/packages/components/icons/generated/FilterReact/package.json b/packages/components/icons/generated/FilterReact/package.json
new file mode 100644
index 0000000000..a4e780c9b5
--- /dev/null
+++ b/packages/components/icons/generated/FilterReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-FilterReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-FilterReact.esm.js"
+}
diff --git a/packages/components/icons/generated/FlagFilledReact/package.json b/packages/components/icons/generated/FlagFilledReact/package.json
new file mode 100644
index 0000000000..843454c23c
--- /dev/null
+++ b/packages/components/icons/generated/FlagFilledReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-FlagFilledReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-FlagFilledReact.esm.js"
+}
diff --git a/packages/components/icons/generated/FlagLinearReact/package.json b/packages/components/icons/generated/FlagLinearReact/package.json
new file mode 100644
index 0000000000..8023b9b4b5
--- /dev/null
+++ b/packages/components/icons/generated/FlagLinearReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-FlagLinearReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-FlagLinearReact.esm.js"
+}
diff --git a/packages/components/icons/generated/FlameReact/package.json b/packages/components/icons/generated/FlameReact/package.json
new file mode 100644
index 0000000000..b0eff30ccd
--- /dev/null
+++ b/packages/components/icons/generated/FlameReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-FlameReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-FlameReact.esm.js"
+}
diff --git a/packages/components/icons/generated/FractionDigitsReact/package.json b/packages/components/icons/generated/FractionDigitsReact/package.json
new file mode 100644
index 0000000000..cd9b3027dd
--- /dev/null
+++ b/packages/components/icons/generated/FractionDigitsReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-FractionDigitsReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-FractionDigitsReact.esm.js"
+}
diff --git a/packages/components/icons/generated/GearReact/package.json b/packages/components/icons/generated/GearReact/package.json
new file mode 100644
index 0000000000..c215b9725a
--- /dev/null
+++ b/packages/components/icons/generated/GearReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-GearReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-GearReact.esm.js"
+}
diff --git a/packages/components/icons/generated/GraduationCapReact/package.json b/packages/components/icons/generated/GraduationCapReact/package.json
new file mode 100644
index 0000000000..90e8826088
--- /dev/null
+++ b/packages/components/icons/generated/GraduationCapReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-GraduationCapReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-GraduationCapReact.esm.js"
+}
diff --git a/packages/components/icons/generated/GraphReact/package.json b/packages/components/icons/generated/GraphReact/package.json
new file mode 100644
index 0000000000..b684bed502
--- /dev/null
+++ b/packages/components/icons/generated/GraphReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-GraphReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-GraphReact.esm.js"
+}
diff --git a/packages/components/icons/generated/GridReact/package.json b/packages/components/icons/generated/GridReact/package.json
new file mode 100644
index 0000000000..cdc1357544
--- /dev/null
+++ b/packages/components/icons/generated/GridReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-GridReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-GridReact.esm.js"
+}
diff --git a/packages/components/icons/generated/GroupAddReact/package.json b/packages/components/icons/generated/GroupAddReact/package.json
new file mode 100644
index 0000000000..af258d8b0f
--- /dev/null
+++ b/packages/components/icons/generated/GroupAddReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-GroupAddReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-GroupAddReact.esm.js"
+}
diff --git a/packages/components/icons/generated/HeartReact/package.json b/packages/components/icons/generated/HeartReact/package.json
new file mode 100644
index 0000000000..3689265be4
--- /dev/null
+++ b/packages/components/icons/generated/HeartReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-HeartReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-HeartReact.esm.js"
+}
diff --git a/packages/components/icons/generated/HomeReact/package.json b/packages/components/icons/generated/HomeReact/package.json
new file mode 100644
index 0000000000..14aae1c325
--- /dev/null
+++ b/packages/components/icons/generated/HomeReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-HomeReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-HomeReact.esm.js"
+}
diff --git a/packages/components/icons/generated/HubReact/package.json b/packages/components/icons/generated/HubReact/package.json
new file mode 100644
index 0000000000..b9204cf8e7
--- /dev/null
+++ b/packages/components/icons/generated/HubReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-HubReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-HubReact.esm.js"
+}
diff --git a/packages/components/icons/generated/ImportReact/package.json b/packages/components/icons/generated/ImportReact/package.json
new file mode 100644
index 0000000000..3247a46ea5
--- /dev/null
+++ b/packages/components/icons/generated/ImportReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-ImportReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-ImportReact.esm.js"
+}
diff --git a/packages/components/icons/generated/InfoReact/package.json b/packages/components/icons/generated/InfoReact/package.json
new file mode 100644
index 0000000000..2152535858
--- /dev/null
+++ b/packages/components/icons/generated/InfoReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-InfoReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-InfoReact.esm.js"
+}
diff --git a/packages/components/icons/generated/InformationReact/package.json b/packages/components/icons/generated/InformationReact/package.json
new file mode 100644
index 0000000000..15c18bb18e
--- /dev/null
+++ b/packages/components/icons/generated/InformationReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-InformationReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-InformationReact.esm.js"
+}
diff --git a/packages/components/icons/generated/LayersReact/package.json b/packages/components/icons/generated/LayersReact/package.json
new file mode 100644
index 0000000000..7fa6be67c4
--- /dev/null
+++ b/packages/components/icons/generated/LayersReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-LayersReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-LayersReact.esm.js"
+}
diff --git a/packages/components/icons/generated/ListReact/package.json b/packages/components/icons/generated/ListReact/package.json
new file mode 100644
index 0000000000..0a016d741b
--- /dev/null
+++ b/packages/components/icons/generated/ListReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-ListReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-ListReact.esm.js"
+}
diff --git a/packages/components/icons/generated/ListWithSearchReact/package.json b/packages/components/icons/generated/ListWithSearchReact/package.json
new file mode 100644
index 0000000000..4c4c2ea236
--- /dev/null
+++ b/packages/components/icons/generated/ListWithSearchReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-ListWithSearchReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-ListWithSearchReact.esm.js"
+}
diff --git a/packages/components/icons/generated/LockReact/package.json b/packages/components/icons/generated/LockReact/package.json
new file mode 100644
index 0000000000..705c576691
--- /dev/null
+++ b/packages/components/icons/generated/LockReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-LockReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-LockReact.esm.js"
+}
diff --git a/packages/components/icons/generated/LogoutReact/package.json b/packages/components/icons/generated/LogoutReact/package.json
new file mode 100644
index 0000000000..3a410be3bf
--- /dev/null
+++ b/packages/components/icons/generated/LogoutReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-LogoutReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-LogoutReact.esm.js"
+}
diff --git a/packages/components/icons/generated/MailReact/package.json b/packages/components/icons/generated/MailReact/package.json
new file mode 100644
index 0000000000..439e3d7cac
--- /dev/null
+++ b/packages/components/icons/generated/MailReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-MailReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-MailReact.esm.js"
+}
diff --git a/packages/components/icons/generated/MinimizeReact/package.json b/packages/components/icons/generated/MinimizeReact/package.json
new file mode 100644
index 0000000000..6fbb7c3b2c
--- /dev/null
+++ b/packages/components/icons/generated/MinimizeReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-MinimizeReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-MinimizeReact.esm.js"
+}
diff --git a/packages/components/icons/generated/NestedViewReact/package.json b/packages/components/icons/generated/NestedViewReact/package.json
new file mode 100644
index 0000000000..8c2ec96ec6
--- /dev/null
+++ b/packages/components/icons/generated/NestedViewReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-NestedViewReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-NestedViewReact.esm.js"
+}
diff --git a/packages/components/icons/generated/OperationsReact/package.json b/packages/components/icons/generated/OperationsReact/package.json
new file mode 100644
index 0000000000..1b38c13fbb
--- /dev/null
+++ b/packages/components/icons/generated/OperationsReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-OperationsReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-OperationsReact.esm.js"
+}
diff --git a/packages/components/icons/generated/PageGearReact/package.json b/packages/components/icons/generated/PageGearReact/package.json
new file mode 100644
index 0000000000..bb0dbe5ae3
--- /dev/null
+++ b/packages/components/icons/generated/PageGearReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-PageGearReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-PageGearReact.esm.js"
+}
diff --git a/packages/components/icons/generated/PagesReact/package.json b/packages/components/icons/generated/PagesReact/package.json
new file mode 100644
index 0000000000..56b3e67a9b
--- /dev/null
+++ b/packages/components/icons/generated/PagesReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-PagesReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-PagesReact.esm.js"
+}
diff --git a/packages/components/icons/generated/PaidReact/package.json b/packages/components/icons/generated/PaidReact/package.json
new file mode 100644
index 0000000000..e48d50c9b2
--- /dev/null
+++ b/packages/components/icons/generated/PaidReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-PaidReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-PaidReact.esm.js"
+}
diff --git a/packages/components/icons/generated/PaperBillInvertedReact/package.json b/packages/components/icons/generated/PaperBillInvertedReact/package.json
new file mode 100644
index 0000000000..ce1680aa35
--- /dev/null
+++ b/packages/components/icons/generated/PaperBillInvertedReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-PaperBillInvertedReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-PaperBillInvertedReact.esm.js"
+}
diff --git a/packages/components/icons/generated/PaperclipReact/package.json b/packages/components/icons/generated/PaperclipReact/package.json
new file mode 100644
index 0000000000..3fc0ba20be
--- /dev/null
+++ b/packages/components/icons/generated/PaperclipReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-PaperclipReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-PaperclipReact.esm.js"
+}
diff --git a/packages/components/icons/generated/PinFilledReact/package.json b/packages/components/icons/generated/PinFilledReact/package.json
new file mode 100644
index 0000000000..0fd2153367
--- /dev/null
+++ b/packages/components/icons/generated/PinFilledReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-PinFilledReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-PinFilledReact.esm.js"
+}
diff --git a/packages/components/icons/generated/PinGearReact/package.json b/packages/components/icons/generated/PinGearReact/package.json
new file mode 100644
index 0000000000..50e6b7afa1
--- /dev/null
+++ b/packages/components/icons/generated/PinGearReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-PinGearReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-PinGearReact.esm.js"
+}
diff --git a/packages/components/icons/generated/PinLinearReact/package.json b/packages/components/icons/generated/PinLinearReact/package.json
new file mode 100644
index 0000000000..ead8f883a7
--- /dev/null
+++ b/packages/components/icons/generated/PinLinearReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-PinLinearReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-PinLinearReact.esm.js"
+}
diff --git a/packages/components/icons/generated/PluginReact/package.json b/packages/components/icons/generated/PluginReact/package.json
new file mode 100644
index 0000000000..ad7299e831
--- /dev/null
+++ b/packages/components/icons/generated/PluginReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-PluginReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-PluginReact.esm.js"
+}
diff --git a/packages/components/icons/generated/PlusBoldReact/package.json b/packages/components/icons/generated/PlusBoldReact/package.json
new file mode 100644
index 0000000000..01d56620ef
--- /dev/null
+++ b/packages/components/icons/generated/PlusBoldReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-PlusBoldReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-PlusBoldReact.esm.js"
+}
diff --git a/packages/components/icons/generated/PlusThinReact/package.json b/packages/components/icons/generated/PlusThinReact/package.json
new file mode 100644
index 0000000000..c053f44491
--- /dev/null
+++ b/packages/components/icons/generated/PlusThinReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-PlusThinReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-PlusThinReact.esm.js"
+}
diff --git a/packages/components/icons/generated/RefreshReact/package.json b/packages/components/icons/generated/RefreshReact/package.json
new file mode 100644
index 0000000000..0ad866daa6
--- /dev/null
+++ b/packages/components/icons/generated/RefreshReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-RefreshReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-RefreshReact.esm.js"
+}
diff --git a/packages/components/icons/generated/RestoreReact/package.json b/packages/components/icons/generated/RestoreReact/package.json
new file mode 100644
index 0000000000..49fa4d094c
--- /dev/null
+++ b/packages/components/icons/generated/RestoreReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-RestoreReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-RestoreReact.esm.js"
+}
diff --git a/packages/components/icons/generated/RevertReact/package.json b/packages/components/icons/generated/RevertReact/package.json
new file mode 100644
index 0000000000..59da6278e2
--- /dev/null
+++ b/packages/components/icons/generated/RevertReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-RevertReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-RevertReact.esm.js"
+}
diff --git a/packages/components/icons/generated/ReviewReact/package.json b/packages/components/icons/generated/ReviewReact/package.json
new file mode 100644
index 0000000000..3d15812e30
--- /dev/null
+++ b/packages/components/icons/generated/ReviewReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-ReviewReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-ReviewReact.esm.js"
+}
diff --git a/packages/components/icons/generated/RightTriangleFilledReact/package.json b/packages/components/icons/generated/RightTriangleFilledReact/package.json
new file mode 100644
index 0000000000..0fc2d254d2
--- /dev/null
+++ b/packages/components/icons/generated/RightTriangleFilledReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-RightTriangleFilledReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-RightTriangleFilledReact.esm.js"
+}
diff --git a/packages/components/icons/generated/RightTriangleLinearReact/package.json b/packages/components/icons/generated/RightTriangleLinearReact/package.json
new file mode 100644
index 0000000000..43725326d3
--- /dev/null
+++ b/packages/components/icons/generated/RightTriangleLinearReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-RightTriangleLinearReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-RightTriangleLinearReact.esm.js"
+}
diff --git a/packages/components/icons/generated/RocketReact/package.json b/packages/components/icons/generated/RocketReact/package.json
new file mode 100644
index 0000000000..1b5ec9b293
--- /dev/null
+++ b/packages/components/icons/generated/RocketReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-RocketReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-RocketReact.esm.js"
+}
diff --git a/packages/components/icons/generated/ScreenGearReact/package.json b/packages/components/icons/generated/ScreenGearReact/package.json
new file mode 100644
index 0000000000..21466b8f7b
--- /dev/null
+++ b/packages/components/icons/generated/ScreenGearReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-ScreenGearReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-ScreenGearReact.esm.js"
+}
diff --git a/packages/components/icons/generated/ScreenUserReact/package.json b/packages/components/icons/generated/ScreenUserReact/package.json
new file mode 100644
index 0000000000..3876be2912
--- /dev/null
+++ b/packages/components/icons/generated/ScreenUserReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-ScreenUserReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-ScreenUserReact.esm.js"
+}
diff --git a/packages/components/icons/generated/SearchReact/package.json b/packages/components/icons/generated/SearchReact/package.json
new file mode 100644
index 0000000000..76c625c668
--- /dev/null
+++ b/packages/components/icons/generated/SearchReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-SearchReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-SearchReact.esm.js"
+}
diff --git a/packages/components/icons/generated/SidebarCollapseReact/package.json b/packages/components/icons/generated/SidebarCollapseReact/package.json
new file mode 100644
index 0000000000..22ae660a91
--- /dev/null
+++ b/packages/components/icons/generated/SidebarCollapseReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-SidebarCollapseReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-SidebarCollapseReact.esm.js"
+}
diff --git a/packages/components/icons/generated/SidebarExpandReact/package.json b/packages/components/icons/generated/SidebarExpandReact/package.json
new file mode 100644
index 0000000000..ff6d898125
--- /dev/null
+++ b/packages/components/icons/generated/SidebarExpandReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-SidebarExpandReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-SidebarExpandReact.esm.js"
+}
diff --git a/packages/components/icons/generated/SortingReact/package.json b/packages/components/icons/generated/SortingReact/package.json
new file mode 100644
index 0000000000..c03c3c9d46
--- /dev/null
+++ b/packages/components/icons/generated/SortingReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-SortingReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-SortingReact.esm.js"
+}
diff --git a/packages/components/icons/generated/SpeechBubbleReact/package.json b/packages/components/icons/generated/SpeechBubbleReact/package.json
new file mode 100644
index 0000000000..295e341431
--- /dev/null
+++ b/packages/components/icons/generated/SpeechBubbleReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-SpeechBubbleReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-SpeechBubbleReact.esm.js"
+}
diff --git a/packages/components/icons/generated/SpeedometerReact/package.json b/packages/components/icons/generated/SpeedometerReact/package.json
new file mode 100644
index 0000000000..54961d04ad
--- /dev/null
+++ b/packages/components/icons/generated/SpeedometerReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-SpeedometerReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-SpeedometerReact.esm.js"
+}
diff --git a/packages/components/icons/generated/SplitReact/package.json b/packages/components/icons/generated/SplitReact/package.json
new file mode 100644
index 0000000000..4b1aa47c20
--- /dev/null
+++ b/packages/components/icons/generated/SplitReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-SplitReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-SplitReact.esm.js"
+}
diff --git a/packages/components/icons/generated/StackReact/package.json b/packages/components/icons/generated/StackReact/package.json
new file mode 100644
index 0000000000..ad9206cc2a
--- /dev/null
+++ b/packages/components/icons/generated/StackReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-StackReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-StackReact.esm.js"
+}
diff --git a/packages/components/icons/generated/StarReact/package.json b/packages/components/icons/generated/StarReact/package.json
new file mode 100644
index 0000000000..6b7eff110f
--- /dev/null
+++ b/packages/components/icons/generated/StarReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-StarReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-StarReact.esm.js"
+}
diff --git a/packages/components/icons/generated/SubdirectoryArrowReact/package.json b/packages/components/icons/generated/SubdirectoryArrowReact/package.json
new file mode 100644
index 0000000000..36c84f7606
--- /dev/null
+++ b/packages/components/icons/generated/SubdirectoryArrowReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-SubdirectoryArrowReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-SubdirectoryArrowReact.esm.js"
+}
diff --git a/packages/components/icons/generated/SupportReact/package.json b/packages/components/icons/generated/SupportReact/package.json
new file mode 100644
index 0000000000..bfe5e65892
--- /dev/null
+++ b/packages/components/icons/generated/SupportReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-SupportReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-SupportReact.esm.js"
+}
diff --git a/packages/components/icons/generated/SwitcherReact/package.json b/packages/components/icons/generated/SwitcherReact/package.json
new file mode 100644
index 0000000000..14029927b4
--- /dev/null
+++ b/packages/components/icons/generated/SwitcherReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-SwitcherReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-SwitcherReact.esm.js"
+}
diff --git a/packages/components/icons/generated/TableReact/package.json b/packages/components/icons/generated/TableReact/package.json
new file mode 100644
index 0000000000..2bd9e49922
--- /dev/null
+++ b/packages/components/icons/generated/TableReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-TableReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-TableReact.esm.js"
+}
diff --git a/packages/components/icons/generated/TagMultiReact/package.json b/packages/components/icons/generated/TagMultiReact/package.json
new file mode 100644
index 0000000000..fd5ea11854
--- /dev/null
+++ b/packages/components/icons/generated/TagMultiReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-TagMultiReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-TagMultiReact.esm.js"
+}
diff --git a/packages/components/icons/generated/TagReact/package.json b/packages/components/icons/generated/TagReact/package.json
new file mode 100644
index 0000000000..54a939557d
--- /dev/null
+++ b/packages/components/icons/generated/TagReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-TagReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-TagReact.esm.js"
+}
diff --git a/packages/components/icons/generated/TagStackedReact/package.json b/packages/components/icons/generated/TagStackedReact/package.json
new file mode 100644
index 0000000000..512f4bcf9e
--- /dev/null
+++ b/packages/components/icons/generated/TagStackedReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-TagStackedReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-TagStackedReact.esm.js"
+}
diff --git a/packages/components/icons/generated/TerminalReact/package.json b/packages/components/icons/generated/TerminalReact/package.json
new file mode 100644
index 0000000000..be5f09a59d
--- /dev/null
+++ b/packages/components/icons/generated/TerminalReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-TerminalReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-TerminalReact.esm.js"
+}
diff --git a/packages/components/icons/generated/TreeStructureReact/package.json b/packages/components/icons/generated/TreeStructureReact/package.json
new file mode 100644
index 0000000000..e89153d78d
--- /dev/null
+++ b/packages/components/icons/generated/TreeStructureReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-TreeStructureReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-TreeStructureReact.esm.js"
+}
diff --git a/packages/components/icons/generated/TruckReact/package.json b/packages/components/icons/generated/TruckReact/package.json
new file mode 100644
index 0000000000..d593038f36
--- /dev/null
+++ b/packages/components/icons/generated/TruckReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-TruckReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-TruckReact.esm.js"
+}
diff --git a/packages/components/icons/generated/TuneReact/package.json b/packages/components/icons/generated/TuneReact/package.json
new file mode 100644
index 0000000000..5f7580c55f
--- /dev/null
+++ b/packages/components/icons/generated/TuneReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-TuneReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-TuneReact.esm.js"
+}
diff --git a/packages/components/icons/generated/UserFilledReact/package.json b/packages/components/icons/generated/UserFilledReact/package.json
new file mode 100644
index 0000000000..81908fec6c
--- /dev/null
+++ b/packages/components/icons/generated/UserFilledReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-UserFilledReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-UserFilledReact.esm.js"
+}
diff --git a/packages/components/icons/generated/UserLinearReact/package.json b/packages/components/icons/generated/UserLinearReact/package.json
new file mode 100644
index 0000000000..82deabec95
--- /dev/null
+++ b/packages/components/icons/generated/UserLinearReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-UserLinearReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-UserLinearReact.esm.js"
+}
diff --git a/packages/components/icons/generated/UsersReact/package.json b/packages/components/icons/generated/UsersReact/package.json
new file mode 100644
index 0000000000..273e4234f3
--- /dev/null
+++ b/packages/components/icons/generated/UsersReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-UsersReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-UsersReact.esm.js"
+}
diff --git a/packages/components/icons/generated/VerifiedReact/package.json b/packages/components/icons/generated/VerifiedReact/package.json
new file mode 100644
index 0000000000..74c642036a
--- /dev/null
+++ b/packages/components/icons/generated/VerifiedReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-VerifiedReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-VerifiedReact.esm.js"
+}
diff --git a/packages/components/icons/generated/ViewGridPlusReact/package.json b/packages/components/icons/generated/ViewGridPlusReact/package.json
new file mode 100644
index 0000000000..625eb32f00
--- /dev/null
+++ b/packages/components/icons/generated/ViewGridPlusReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-ViewGridPlusReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-ViewGridPlusReact.esm.js"
+}
diff --git a/packages/components/icons/generated/WarningReact/package.json b/packages/components/icons/generated/WarningReact/package.json
new file mode 100644
index 0000000000..291b8f76fb
--- /dev/null
+++ b/packages/components/icons/generated/WarningReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-WarningReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-WarningReact.esm.js"
+}
diff --git a/packages/components/icons/generated/WindowEyeReact/package.json b/packages/components/icons/generated/WindowEyeReact/package.json
new file mode 100644
index 0000000000..289a06a983
--- /dev/null
+++ b/packages/components/icons/generated/WindowEyeReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-WindowEyeReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-WindowEyeReact.esm.js"
+}
diff --git a/packages/components/icons/generated/WorldReact/package.json b/packages/components/icons/generated/WorldReact/package.json
new file mode 100644
index 0000000000..c05a4c5375
--- /dev/null
+++ b/packages/components/icons/generated/WorldReact/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/commercetools-uikit-icons-generated-WorldReact.cjs.js",
+ "module": "dist/commercetools-uikit-icons-generated-WorldReact.esm.js"
+}
diff --git a/packages/components/icons/package.json b/packages/components/icons/package.json
index cd4fa69b39..cb594cfa9f 100644
--- a/packages/components/icons/package.json
+++ b/packages/components/icons/package.json
@@ -22,10 +22,17 @@
"./index.ts",
"./custom-icon/index.ts",
"./inline-svg/index.ts",
- "./leading-icon/index.ts"
+ "./leading-icon/index.ts",
+ "./generated/*.tsx"
]
},
- "files": ["dist", "custom-icon", "inline-svg", "leading-icon"],
+ "files": [
+ "dist",
+ "custom-icon",
+ "inline-svg",
+ "leading-icon",
+ "generated/**"
+ ],
"scripts": {
"generate-icons": "svgr -d src/generated -- src/svg"
},
diff --git a/packages/components/icons/src/generated/AngleDownReact.tsx b/packages/components/icons/src/generated/AngleDownReact.tsx
index 399505cd94..c5c282b009 100644
--- a/packages/components/icons/src/generated/AngleDownReact.tsx
+++ b/packages/components/icons/src/generated/AngleDownReact.tsx
@@ -1,134 +1,13 @@
// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
// This file is created with 'yarn generate-icons'.
// Original SVG file: src/svg/angle-down.react.svg
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { warning } from '@commercetools-uikit/utils';
-import { css, ClassNames } from '@emotion/react';
-import { designTokens } from '@commercetools-uikit/design-system';
-export type Props = {
- color?:
- | 'solid'
- | 'neutral60'
- | 'surface'
- | 'info'
- | 'primary'
- | 'primary40'
- | 'warning'
- | 'error'
- | 'success';
- /**
- * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'.
- */
- size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40';
-};
-export type SVGProps = Props & {
- className: string;
-};
-const iconSizes = {
- small: 12,
- medium: 16,
- big: 24,
- '10': 12,
- '20': 16,
- '30': 20,
- '40': 24,
-} as const;
-const getSizeDimensions = (size: Props['size']) => {
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgAngleDown = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgAngleDown = (props: TSVGProps) => (
);
SvgAngleDown.displayName = 'SvgAngleDown';
-const AngleDownIcon = (props: Props) => (
+const AngleDownIcon = (props: TIconProps) => (
{({ css: createClass }) => (
diff --git a/packages/components/icons/src/generated/AngleLeftReact.tsx b/packages/components/icons/src/generated/AngleLeftReact.tsx
index 5a0640d204..87503f3687 100644
--- a/packages/components/icons/src/generated/AngleLeftReact.tsx
+++ b/packages/components/icons/src/generated/AngleLeftReact.tsx
@@ -1,134 +1,13 @@
// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
// This file is created with 'yarn generate-icons'.
// Original SVG file: src/svg/angle-left.react.svg
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { warning } from '@commercetools-uikit/utils';
-import { css, ClassNames } from '@emotion/react';
-import { designTokens } from '@commercetools-uikit/design-system';
-export type Props = {
- color?:
- | 'solid'
- | 'neutral60'
- | 'surface'
- | 'info'
- | 'primary'
- | 'primary40'
- | 'warning'
- | 'error'
- | 'success';
- /**
- * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'.
- */
- size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40';
-};
-export type SVGProps = Props & {
- className: string;
-};
-const iconSizes = {
- small: 12,
- medium: 16,
- big: 24,
- '10': 12,
- '20': 16,
- '30': 20,
- '40': 24,
-} as const;
-const getSizeDimensions = (size: Props['size']) => {
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgAngleLeft = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgAngleLeft = (props: TSVGProps) => (
);
SvgAngleLeft.displayName = 'SvgAngleLeft';
-const AngleLeftIcon = (props: Props) => (
+const AngleLeftIcon = (props: TIconProps) => (
{({ css: createClass }) => (
diff --git a/packages/components/icons/src/generated/AngleRightReact.tsx b/packages/components/icons/src/generated/AngleRightReact.tsx
index a12ae8e7e6..fe4b28dd6f 100644
--- a/packages/components/icons/src/generated/AngleRightReact.tsx
+++ b/packages/components/icons/src/generated/AngleRightReact.tsx
@@ -1,134 +1,13 @@
// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
// This file is created with 'yarn generate-icons'.
// Original SVG file: src/svg/angle-right.react.svg
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { warning } from '@commercetools-uikit/utils';
-import { css, ClassNames } from '@emotion/react';
-import { designTokens } from '@commercetools-uikit/design-system';
-export type Props = {
- color?:
- | 'solid'
- | 'neutral60'
- | 'surface'
- | 'info'
- | 'primary'
- | 'primary40'
- | 'warning'
- | 'error'
- | 'success';
- /**
- * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'.
- */
- size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40';
-};
-export type SVGProps = Props & {
- className: string;
-};
-const iconSizes = {
- small: 12,
- medium: 16,
- big: 24,
- '10': 12,
- '20': 16,
- '30': 20,
- '40': 24,
-} as const;
-const getSizeDimensions = (size: Props['size']) => {
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgAngleRight = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgAngleRight = (props: TSVGProps) => (
);
SvgAngleRight.displayName = 'SvgAngleRight';
-const AngleRightIcon = (props: Props) => (
+const AngleRightIcon = (props: TIconProps) => (
{({ css: createClass }) => (
diff --git a/packages/components/icons/src/generated/AngleThinLeftReact.tsx b/packages/components/icons/src/generated/AngleThinLeftReact.tsx
index adebd89b66..25137b9a8b 100644
--- a/packages/components/icons/src/generated/AngleThinLeftReact.tsx
+++ b/packages/components/icons/src/generated/AngleThinLeftReact.tsx
@@ -1,134 +1,13 @@
// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
// This file is created with 'yarn generate-icons'.
// Original SVG file: src/svg/angle-thin-left.react.svg
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { warning } from '@commercetools-uikit/utils';
-import { css, ClassNames } from '@emotion/react';
-import { designTokens } from '@commercetools-uikit/design-system';
-export type Props = {
- color?:
- | 'solid'
- | 'neutral60'
- | 'surface'
- | 'info'
- | 'primary'
- | 'primary40'
- | 'warning'
- | 'error'
- | 'success';
- /**
- * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'.
- */
- size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40';
-};
-export type SVGProps = Props & {
- className: string;
-};
-const iconSizes = {
- small: 12,
- medium: 16,
- big: 24,
- '10': 12,
- '20': 16,
- '30': 20,
- '40': 24,
-} as const;
-const getSizeDimensions = (size: Props['size']) => {
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgAngleThinLeft = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgAngleThinLeft = (props: TSVGProps) => (
);
SvgAngleThinLeft.displayName = 'SvgAngleThinLeft';
-const AngleThinLeftIcon = (props: Props) => (
+const AngleThinLeftIcon = (props: TIconProps) => (
{({ css: createClass }) => (
{
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgAngleThinRight = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgAngleThinRight = (props: TSVGProps) => (
);
SvgAngleThinRight.displayName = 'SvgAngleThinRight';
-const AngleThinRightIcon = (props: Props) => (
+const AngleThinRightIcon = (props: TIconProps) => (
{({ css: createClass }) => (
{
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgAngleUpDown = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgAngleUpDown = (props: TSVGProps) => (
);
SvgAngleUpDown.displayName = 'SvgAngleUpDown';
-const AngleUpDownIcon = (props: Props) => (
+const AngleUpDownIcon = (props: TIconProps) => (
{({ css: createClass }) => (
{
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgAngleUp = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgAngleUp = (props: TSVGProps) => (
);
SvgAngleUp.displayName = 'SvgAngleUp';
-const AngleUpIcon = (props: Props) => (
+const AngleUpIcon = (props: TIconProps) => (
{({ css: createClass }) => (
diff --git a/packages/components/icons/src/generated/ArrowDownReact.tsx b/packages/components/icons/src/generated/ArrowDownReact.tsx
index a81bd12aae..085f47af7f 100644
--- a/packages/components/icons/src/generated/ArrowDownReact.tsx
+++ b/packages/components/icons/src/generated/ArrowDownReact.tsx
@@ -1,134 +1,13 @@
// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
// This file is created with 'yarn generate-icons'.
// Original SVG file: src/svg/arrow-down.react.svg
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { warning } from '@commercetools-uikit/utils';
-import { css, ClassNames } from '@emotion/react';
-import { designTokens } from '@commercetools-uikit/design-system';
-export type Props = {
- color?:
- | 'solid'
- | 'neutral60'
- | 'surface'
- | 'info'
- | 'primary'
- | 'primary40'
- | 'warning'
- | 'error'
- | 'success';
- /**
- * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'.
- */
- size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40';
-};
-export type SVGProps = Props & {
- className: string;
-};
-const iconSizes = {
- small: 12,
- medium: 16,
- big: 24,
- '10': 12,
- '20': 16,
- '30': 20,
- '40': 24,
-} as const;
-const getSizeDimensions = (size: Props['size']) => {
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgArrowDown = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgArrowDown = (props: TSVGProps) => (
);
SvgArrowDown.displayName = 'SvgArrowDown';
-const ArrowDownIcon = (props: Props) => (
+const ArrowDownIcon = (props: TIconProps) => (
{({ css: createClass }) => (
diff --git a/packages/components/icons/src/generated/ArrowLeftReact.tsx b/packages/components/icons/src/generated/ArrowLeftReact.tsx
index 70929910b8..fd89a32cf2 100644
--- a/packages/components/icons/src/generated/ArrowLeftReact.tsx
+++ b/packages/components/icons/src/generated/ArrowLeftReact.tsx
@@ -1,134 +1,13 @@
// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
// This file is created with 'yarn generate-icons'.
// Original SVG file: src/svg/arrow-left.react.svg
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { warning } from '@commercetools-uikit/utils';
-import { css, ClassNames } from '@emotion/react';
-import { designTokens } from '@commercetools-uikit/design-system';
-export type Props = {
- color?:
- | 'solid'
- | 'neutral60'
- | 'surface'
- | 'info'
- | 'primary'
- | 'primary40'
- | 'warning'
- | 'error'
- | 'success';
- /**
- * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'.
- */
- size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40';
-};
-export type SVGProps = Props & {
- className: string;
-};
-const iconSizes = {
- small: 12,
- medium: 16,
- big: 24,
- '10': 12,
- '20': 16,
- '30': 20,
- '40': 24,
-} as const;
-const getSizeDimensions = (size: Props['size']) => {
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgArrowLeft = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgArrowLeft = (props: TSVGProps) => (
);
SvgArrowLeft.displayName = 'SvgArrowLeft';
-const ArrowLeftIcon = (props: Props) => (
+const ArrowLeftIcon = (props: TIconProps) => (
{({ css: createClass }) => (
diff --git a/packages/components/icons/src/generated/ArrowLongDownReact.tsx b/packages/components/icons/src/generated/ArrowLongDownReact.tsx
index d81fcf4b8b..043e3a7494 100644
--- a/packages/components/icons/src/generated/ArrowLongDownReact.tsx
+++ b/packages/components/icons/src/generated/ArrowLongDownReact.tsx
@@ -1,134 +1,13 @@
// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
// This file is created with 'yarn generate-icons'.
// Original SVG file: src/svg/arrow-long-down.react.svg
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { warning } from '@commercetools-uikit/utils';
-import { css, ClassNames } from '@emotion/react';
-import { designTokens } from '@commercetools-uikit/design-system';
-export type Props = {
- color?:
- | 'solid'
- | 'neutral60'
- | 'surface'
- | 'info'
- | 'primary'
- | 'primary40'
- | 'warning'
- | 'error'
- | 'success';
- /**
- * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'.
- */
- size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40';
-};
-export type SVGProps = Props & {
- className: string;
-};
-const iconSizes = {
- small: 12,
- medium: 16,
- big: 24,
- '10': 12,
- '20': 16,
- '30': 20,
- '40': 24,
-} as const;
-const getSizeDimensions = (size: Props['size']) => {
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgArrowLongDown = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgArrowLongDown = (props: TSVGProps) => (
);
SvgArrowLongDown.displayName = 'SvgArrowLongDown';
-const ArrowLongDownIcon = (props: Props) => (
+const ArrowLongDownIcon = (props: TIconProps) => (
{({ css: createClass }) => (
{
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgArrowRight = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgArrowRight = (props: TSVGProps) => (
);
SvgArrowRight.displayName = 'SvgArrowRight';
-const ArrowRightIcon = (props: Props) => (
+const ArrowRightIcon = (props: TIconProps) => (
{({ css: createClass }) => (
diff --git a/packages/components/icons/src/generated/ArrowTriangleDownReact.tsx b/packages/components/icons/src/generated/ArrowTriangleDownReact.tsx
index fa8442434d..e0e9d22d81 100644
--- a/packages/components/icons/src/generated/ArrowTriangleDownReact.tsx
+++ b/packages/components/icons/src/generated/ArrowTriangleDownReact.tsx
@@ -1,134 +1,13 @@
// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
// This file is created with 'yarn generate-icons'.
// Original SVG file: src/svg/arrow-triangle-down.react.svg
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { warning } from '@commercetools-uikit/utils';
-import { css, ClassNames } from '@emotion/react';
-import { designTokens } from '@commercetools-uikit/design-system';
-export type Props = {
- color?:
- | 'solid'
- | 'neutral60'
- | 'surface'
- | 'info'
- | 'primary'
- | 'primary40'
- | 'warning'
- | 'error'
- | 'success';
- /**
- * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'.
- */
- size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40';
-};
-export type SVGProps = Props & {
- className: string;
-};
-const iconSizes = {
- small: 12,
- medium: 16,
- big: 24,
- '10': 12,
- '20': 16,
- '30': 20,
- '40': 24,
-} as const;
-const getSizeDimensions = (size: Props['size']) => {
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgArrowTriangleDown = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgArrowTriangleDown = (props: TSVGProps) => (
);
SvgArrowTriangleDown.displayName = 'SvgArrowTriangleDown';
-const ArrowTriangleDownIcon = (props: Props) => (
+const ArrowTriangleDownIcon = (props: TIconProps) => (
{({ css: createClass }) => (
{
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgArrowTriangleUp = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgArrowTriangleUp = (props: TSVGProps) => (
);
SvgArrowTriangleUp.displayName = 'SvgArrowTriangleUp';
-const ArrowTriangleUpIcon = (props: Props) => (
+const ArrowTriangleUpIcon = (props: TIconProps) => (
{({ css: createClass }) => (
{
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgArrowUp = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgArrowUp = (props: TSVGProps) => (
);
SvgArrowUp.displayName = 'SvgArrowUp';
-const ArrowUpIcon = (props: Props) => (
+const ArrowUpIcon = (props: TIconProps) => (
{({ css: createClass }) => (
diff --git a/packages/components/icons/src/generated/ArrowsMinimizeReact.tsx b/packages/components/icons/src/generated/ArrowsMinimizeReact.tsx
index b01ea50e26..df0aa4b9f8 100644
--- a/packages/components/icons/src/generated/ArrowsMinimizeReact.tsx
+++ b/packages/components/icons/src/generated/ArrowsMinimizeReact.tsx
@@ -1,134 +1,13 @@
// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
// This file is created with 'yarn generate-icons'.
// Original SVG file: src/svg/arrows-minimize.react.svg
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { warning } from '@commercetools-uikit/utils';
-import { css, ClassNames } from '@emotion/react';
-import { designTokens } from '@commercetools-uikit/design-system';
-export type Props = {
- color?:
- | 'solid'
- | 'neutral60'
- | 'surface'
- | 'info'
- | 'primary'
- | 'primary40'
- | 'warning'
- | 'error'
- | 'success';
- /**
- * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'.
- */
- size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40';
-};
-export type SVGProps = Props & {
- className: string;
-};
-const iconSizes = {
- small: 12,
- medium: 16,
- big: 24,
- '10': 12,
- '20': 16,
- '30': 20,
- '40': 24,
-} as const;
-const getSizeDimensions = (size: Props['size']) => {
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgArrowsMinimize = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgArrowsMinimize = (props: TSVGProps) => (
);
SvgArrowsMinimize.displayName = 'SvgArrowsMinimize';
-const ArrowsMinimizeIcon = (props: Props) => (
+const ArrowsMinimizeIcon = (props: TIconProps) => (
{({ css: createClass }) => (
{
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgArrows = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgArrows = (props: TSVGProps) => (
);
SvgArrows.displayName = 'SvgArrows';
-const ArrowsIcon = (props: Props) => (
+const ArrowsIcon = (props: TIconProps) => (
{({ css: createClass }) => (
diff --git a/packages/components/icons/src/generated/BackReact.tsx b/packages/components/icons/src/generated/BackReact.tsx
index 40b4b91ac1..2fa24bed53 100644
--- a/packages/components/icons/src/generated/BackReact.tsx
+++ b/packages/components/icons/src/generated/BackReact.tsx
@@ -1,134 +1,13 @@
// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
// This file is created with 'yarn generate-icons'.
// Original SVG file: src/svg/back.react.svg
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { warning } from '@commercetools-uikit/utils';
-import { css, ClassNames } from '@emotion/react';
-import { designTokens } from '@commercetools-uikit/design-system';
-export type Props = {
- color?:
- | 'solid'
- | 'neutral60'
- | 'surface'
- | 'info'
- | 'primary'
- | 'primary40'
- | 'warning'
- | 'error'
- | 'success';
- /**
- * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'.
- */
- size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40';
-};
-export type SVGProps = Props & {
- className: string;
-};
-const iconSizes = {
- small: 12,
- medium: 16,
- big: 24,
- '10': 12,
- '20': 16,
- '30': 20,
- '40': 24,
-} as const;
-const getSizeDimensions = (size: Props['size']) => {
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgBack = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgBack = (props: TSVGProps) => (
);
SvgBack.displayName = 'SvgBack';
-const BackIcon = (props: Props) => (
+const BackIcon = (props: TIconProps) => (
{({ css: createClass }) => (
diff --git a/packages/components/icons/src/generated/BidirectionalArrowReact.tsx b/packages/components/icons/src/generated/BidirectionalArrowReact.tsx
index a74ca8755f..0ffe30a7af 100644
--- a/packages/components/icons/src/generated/BidirectionalArrowReact.tsx
+++ b/packages/components/icons/src/generated/BidirectionalArrowReact.tsx
@@ -1,134 +1,13 @@
// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
// This file is created with 'yarn generate-icons'.
// Original SVG file: src/svg/bidirectional-arrow.react.svg
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { warning } from '@commercetools-uikit/utils';
-import { css, ClassNames } from '@emotion/react';
-import { designTokens } from '@commercetools-uikit/design-system';
-export type Props = {
- color?:
- | 'solid'
- | 'neutral60'
- | 'surface'
- | 'info'
- | 'primary'
- | 'primary40'
- | 'warning'
- | 'error'
- | 'success';
- /**
- * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'.
- */
- size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40';
-};
-export type SVGProps = Props & {
- className: string;
-};
-const iconSizes = {
- small: 12,
- medium: 16,
- big: 24,
- '10': 12,
- '20': 16,
- '30': 20,
- '40': 24,
-} as const;
-const getSizeDimensions = (size: Props['size']) => {
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgBidirectionalArrow = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgBidirectionalArrow = (props: TSVGProps) => (
);
SvgBidirectionalArrow.displayName = 'SvgBidirectionalArrow';
-const BidirectionalArrowIcon = (props: Props) => (
+const BidirectionalArrowIcon = (props: TIconProps) => (
{({ css: createClass }) => (
{
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgBinFilled = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgBinFilled = (props: TSVGProps) => (
);
SvgBinFilled.displayName = 'SvgBinFilled';
-const BinFilledIcon = (props: Props) => (
+const BinFilledIcon = (props: TIconProps) => (
{({ css: createClass }) => (
diff --git a/packages/components/icons/src/generated/BinLinearReact.tsx b/packages/components/icons/src/generated/BinLinearReact.tsx
index 3038746738..db15f23d43 100644
--- a/packages/components/icons/src/generated/BinLinearReact.tsx
+++ b/packages/components/icons/src/generated/BinLinearReact.tsx
@@ -1,134 +1,13 @@
// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
// This file is created with 'yarn generate-icons'.
// Original SVG file: src/svg/bin-linear.react.svg
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { warning } from '@commercetools-uikit/utils';
-import { css, ClassNames } from '@emotion/react';
-import { designTokens } from '@commercetools-uikit/design-system';
-export type Props = {
- color?:
- | 'solid'
- | 'neutral60'
- | 'surface'
- | 'info'
- | 'primary'
- | 'primary40'
- | 'warning'
- | 'error'
- | 'success';
- /**
- * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'.
- */
- size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40';
-};
-export type SVGProps = Props & {
- className: string;
-};
-const iconSizes = {
- small: 12,
- medium: 16,
- big: 24,
- '10': 12,
- '20': 16,
- '30': 20,
- '40': 24,
-} as const;
-const getSizeDimensions = (size: Props['size']) => {
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgBinLinear = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgBinLinear = (props: TSVGProps) => (
);
SvgBinLinear.displayName = 'SvgBinLinear';
-const BinLinearIcon = (props: Props) => (
+const BinLinearIcon = (props: TIconProps) => (
{({ css: createClass }) => (
diff --git a/packages/components/icons/src/generated/BoxReact.tsx b/packages/components/icons/src/generated/BoxReact.tsx
index a21d8e692a..d3628f715b 100644
--- a/packages/components/icons/src/generated/BoxReact.tsx
+++ b/packages/components/icons/src/generated/BoxReact.tsx
@@ -1,134 +1,13 @@
// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
// This file is created with 'yarn generate-icons'.
// Original SVG file: src/svg/box.react.svg
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { warning } from '@commercetools-uikit/utils';
-import { css, ClassNames } from '@emotion/react';
-import { designTokens } from '@commercetools-uikit/design-system';
-export type Props = {
- color?:
- | 'solid'
- | 'neutral60'
- | 'surface'
- | 'info'
- | 'primary'
- | 'primary40'
- | 'warning'
- | 'error'
- | 'success';
- /**
- * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'.
- */
- size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40';
-};
-export type SVGProps = Props & {
- className: string;
-};
-const iconSizes = {
- small: 12,
- medium: 16,
- big: 24,
- '10': 12,
- '20': 16,
- '30': 20,
- '40': 24,
-} as const;
-const getSizeDimensions = (size: Props['size']) => {
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgBox = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgBox = (props: TSVGProps) => (
);
SvgBox.displayName = 'SvgBox';
-const BoxIcon = (props: Props) => (
+const BoxIcon = (props: TIconProps) => (
{({ css: createClass }) => (
diff --git a/packages/components/icons/src/generated/BrainReact.tsx b/packages/components/icons/src/generated/BrainReact.tsx
index 621ffb0ca8..8ee25d8dd7 100644
--- a/packages/components/icons/src/generated/BrainReact.tsx
+++ b/packages/components/icons/src/generated/BrainReact.tsx
@@ -1,134 +1,13 @@
// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
// This file is created with 'yarn generate-icons'.
// Original SVG file: src/svg/brain.react.svg
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { warning } from '@commercetools-uikit/utils';
-import { css, ClassNames } from '@emotion/react';
-import { designTokens } from '@commercetools-uikit/design-system';
-export type Props = {
- color?:
- | 'solid'
- | 'neutral60'
- | 'surface'
- | 'info'
- | 'primary'
- | 'primary40'
- | 'warning'
- | 'error'
- | 'success';
- /**
- * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'.
- */
- size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40';
-};
-export type SVGProps = Props & {
- className: string;
-};
-const iconSizes = {
- small: 12,
- medium: 16,
- big: 24,
- '10': 12,
- '20': 16,
- '30': 20,
- '40': 24,
-} as const;
-const getSizeDimensions = (size: Props['size']) => {
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgBrain = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgBrain = (props: TSVGProps) => (
);
SvgBrain.displayName = 'SvgBrain';
-const BrainIcon = (props: Props) => (
+const BrainIcon = (props: TIconProps) => (
{({ css: createClass }) => (
diff --git a/packages/components/icons/src/generated/CalendarReact.tsx b/packages/components/icons/src/generated/CalendarReact.tsx
index ae40c76b43..972e1cc4a0 100644
--- a/packages/components/icons/src/generated/CalendarReact.tsx
+++ b/packages/components/icons/src/generated/CalendarReact.tsx
@@ -1,134 +1,13 @@
// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
// This file is created with 'yarn generate-icons'.
// Original SVG file: src/svg/calendar.react.svg
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { warning } from '@commercetools-uikit/utils';
-import { css, ClassNames } from '@emotion/react';
-import { designTokens } from '@commercetools-uikit/design-system';
-export type Props = {
- color?:
- | 'solid'
- | 'neutral60'
- | 'surface'
- | 'info'
- | 'primary'
- | 'primary40'
- | 'warning'
- | 'error'
- | 'success';
- /**
- * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'.
- */
- size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40';
-};
-export type SVGProps = Props & {
- className: string;
-};
-const iconSizes = {
- small: 12,
- medium: 16,
- big: 24,
- '10': 12,
- '20': 16,
- '30': 20,
- '40': 24,
-} as const;
-const getSizeDimensions = (size: Props['size']) => {
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgCalendar = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgCalendar = (props: TSVGProps) => (
);
SvgCalendar.displayName = 'SvgCalendar';
-const CalendarIcon = (props: Props) => (
+const CalendarIcon = (props: TIconProps) => (
{({ css: createClass }) => (
diff --git a/packages/components/icons/src/generated/CameraReact.tsx b/packages/components/icons/src/generated/CameraReact.tsx
index e1eaf2053f..a7d515692b 100644
--- a/packages/components/icons/src/generated/CameraReact.tsx
+++ b/packages/components/icons/src/generated/CameraReact.tsx
@@ -1,134 +1,13 @@
// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
// This file is created with 'yarn generate-icons'.
// Original SVG file: src/svg/camera.react.svg
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { warning } from '@commercetools-uikit/utils';
-import { css, ClassNames } from '@emotion/react';
-import { designTokens } from '@commercetools-uikit/design-system';
-export type Props = {
- color?:
- | 'solid'
- | 'neutral60'
- | 'surface'
- | 'info'
- | 'primary'
- | 'primary40'
- | 'warning'
- | 'error'
- | 'success';
- /**
- * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'.
- */
- size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40';
-};
-export type SVGProps = Props & {
- className: string;
-};
-const iconSizes = {
- small: 12,
- medium: 16,
- big: 24,
- '10': 12,
- '20': 16,
- '30': 20,
- '40': 24,
-} as const;
-const getSizeDimensions = (size: Props['size']) => {
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgCamera = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgCamera = (props: TSVGProps) => (
);
SvgCamera.displayName = 'SvgCamera';
-const CameraIcon = (props: Props) => (
+const CameraIcon = (props: TIconProps) => (
{({ css: createClass }) => (
diff --git a/packages/components/icons/src/generated/CaretDownReact.tsx b/packages/components/icons/src/generated/CaretDownReact.tsx
index 633286e971..468d9ea02f 100644
--- a/packages/components/icons/src/generated/CaretDownReact.tsx
+++ b/packages/components/icons/src/generated/CaretDownReact.tsx
@@ -1,134 +1,13 @@
// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
// This file is created with 'yarn generate-icons'.
// Original SVG file: src/svg/caret-down.react.svg
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { warning } from '@commercetools-uikit/utils';
-import { css, ClassNames } from '@emotion/react';
-import { designTokens } from '@commercetools-uikit/design-system';
-export type Props = {
- color?:
- | 'solid'
- | 'neutral60'
- | 'surface'
- | 'info'
- | 'primary'
- | 'primary40'
- | 'warning'
- | 'error'
- | 'success';
- /**
- * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'.
- */
- size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40';
-};
-export type SVGProps = Props & {
- className: string;
-};
-const iconSizes = {
- small: 12,
- medium: 16,
- big: 24,
- '10': 12,
- '20': 16,
- '30': 20,
- '40': 24,
-} as const;
-const getSizeDimensions = (size: Props['size']) => {
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgCaretDown = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgCaretDown = (props: TSVGProps) => (
);
SvgCaretDown.displayName = 'SvgCaretDown';
-const CaretDownIcon = (props: Props) => (
+const CaretDownIcon = (props: TIconProps) => (
{({ css: createClass }) => (
diff --git a/packages/components/icons/src/generated/CaretDownSmallReact.tsx b/packages/components/icons/src/generated/CaretDownSmallReact.tsx
index 45902b5edb..ce738f34c5 100644
--- a/packages/components/icons/src/generated/CaretDownSmallReact.tsx
+++ b/packages/components/icons/src/generated/CaretDownSmallReact.tsx
@@ -1,134 +1,13 @@
// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
// This file is created with 'yarn generate-icons'.
// Original SVG file: src/svg/caret-down-small.react.svg
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { warning } from '@commercetools-uikit/utils';
-import { css, ClassNames } from '@emotion/react';
-import { designTokens } from '@commercetools-uikit/design-system';
-export type Props = {
- color?:
- | 'solid'
- | 'neutral60'
- | 'surface'
- | 'info'
- | 'primary'
- | 'primary40'
- | 'warning'
- | 'error'
- | 'success';
- /**
- * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'.
- */
- size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40';
-};
-export type SVGProps = Props & {
- className: string;
-};
-const iconSizes = {
- small: 12,
- medium: 16,
- big: 24,
- '10': 12,
- '20': 16,
- '30': 20,
- '40': 24,
-} as const;
-const getSizeDimensions = (size: Props['size']) => {
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgCaretDownSmall = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgCaretDownSmall = (props: TSVGProps) => (
);
SvgCaretDownSmall.displayName = 'SvgCaretDownSmall';
-const CaretDownSmallIcon = (props: Props) => (
+const CaretDownSmallIcon = (props: TIconProps) => (
{({ css: createClass }) => (
{
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgCaretUp = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgCaretUp = (props: TSVGProps) => (
);
SvgCaretUp.displayName = 'SvgCaretUp';
-const CaretUpIcon = (props: Props) => (
+const CaretUpIcon = (props: TIconProps) => (
{({ css: createClass }) => (
diff --git a/packages/components/icons/src/generated/CaretUpSmallReact.tsx b/packages/components/icons/src/generated/CaretUpSmallReact.tsx
index 36ab70ecde..64b92da8ed 100644
--- a/packages/components/icons/src/generated/CaretUpSmallReact.tsx
+++ b/packages/components/icons/src/generated/CaretUpSmallReact.tsx
@@ -1,134 +1,13 @@
// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
// This file is created with 'yarn generate-icons'.
// Original SVG file: src/svg/caret-up-small.react.svg
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { warning } from '@commercetools-uikit/utils';
-import { css, ClassNames } from '@emotion/react';
-import { designTokens } from '@commercetools-uikit/design-system';
-export type Props = {
- color?:
- | 'solid'
- | 'neutral60'
- | 'surface'
- | 'info'
- | 'primary'
- | 'primary40'
- | 'warning'
- | 'error'
- | 'success';
- /**
- * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'.
- */
- size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40';
-};
-export type SVGProps = Props & {
- className: string;
-};
-const iconSizes = {
- small: 12,
- medium: 16,
- big: 24,
- '10': 12,
- '20': 16,
- '30': 20,
- '40': 24,
-} as const;
-const getSizeDimensions = (size: Props['size']) => {
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgCaretUpSmall = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgCaretUpSmall = (props: TSVGProps) => (
);
SvgCaretUpSmall.displayName = 'SvgCaretUpSmall';
-const CaretUpSmallIcon = (props: Props) => (
+const CaretUpSmallIcon = (props: TIconProps) => (
{({ css: createClass }) => (
{
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgCart = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgCart = (props: TSVGProps) => (
);
SvgCart.displayName = 'SvgCart';
-const CartIcon = (props: Props) => (
+const CartIcon = (props: TIconProps) => (
{({ css: createClass }) => (
diff --git a/packages/components/icons/src/generated/ChainBrokenReact.tsx b/packages/components/icons/src/generated/ChainBrokenReact.tsx
index 4f91241c23..7b68b71d94 100644
--- a/packages/components/icons/src/generated/ChainBrokenReact.tsx
+++ b/packages/components/icons/src/generated/ChainBrokenReact.tsx
@@ -1,134 +1,13 @@
// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
// This file is created with 'yarn generate-icons'.
// Original SVG file: src/svg/chain-broken.react.svg
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { warning } from '@commercetools-uikit/utils';
-import { css, ClassNames } from '@emotion/react';
-import { designTokens } from '@commercetools-uikit/design-system';
-export type Props = {
- color?:
- | 'solid'
- | 'neutral60'
- | 'surface'
- | 'info'
- | 'primary'
- | 'primary40'
- | 'warning'
- | 'error'
- | 'success';
- /**
- * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'.
- */
- size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40';
-};
-export type SVGProps = Props & {
- className: string;
-};
-const iconSizes = {
- small: 12,
- medium: 16,
- big: 24,
- '10': 12,
- '20': 16,
- '30': 20,
- '40': 24,
-} as const;
-const getSizeDimensions = (size: Props['size']) => {
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgChainBroken = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgChainBroken = (props: TSVGProps) => (
);
SvgChainBroken.displayName = 'SvgChainBroken';
-const ChainBrokenIcon = (props: Props) => (
+const ChainBrokenIcon = (props: TIconProps) => (
{({ css: createClass }) => (
{
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgChain = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgChain = (props: TSVGProps) => (
);
SvgChain.displayName = 'SvgChain';
-const ChainIcon = (props: Props) => (
+const ChainIcon = (props: TIconProps) => (
{({ css: createClass }) => (
diff --git a/packages/components/icons/src/generated/CheckActiveReact.tsx b/packages/components/icons/src/generated/CheckActiveReact.tsx
index e8192581ad..6b6651d3bd 100644
--- a/packages/components/icons/src/generated/CheckActiveReact.tsx
+++ b/packages/components/icons/src/generated/CheckActiveReact.tsx
@@ -1,134 +1,13 @@
// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
// This file is created with 'yarn generate-icons'.
// Original SVG file: src/svg/check-active.react.svg
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { warning } from '@commercetools-uikit/utils';
-import { css, ClassNames } from '@emotion/react';
-import { designTokens } from '@commercetools-uikit/design-system';
-export type Props = {
- color?:
- | 'solid'
- | 'neutral60'
- | 'surface'
- | 'info'
- | 'primary'
- | 'primary40'
- | 'warning'
- | 'error'
- | 'success';
- /**
- * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'.
- */
- size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40';
-};
-export type SVGProps = Props & {
- className: string;
-};
-const iconSizes = {
- small: 12,
- medium: 16,
- big: 24,
- '10': 12,
- '20': 16,
- '30': 20,
- '40': 24,
-} as const;
-const getSizeDimensions = (size: Props['size']) => {
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgCheckActive = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgCheckActive = (props: TSVGProps) => (
);
SvgCheckActive.displayName = 'SvgCheckActive';
-const CheckActiveIcon = (props: Props) => (
+const CheckActiveIcon = (props: TIconProps) => (
{({ css: createClass }) => (
{
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgCheckBold = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgCheckBold = (props: TSVGProps) => (
);
SvgCheckBold.displayName = 'SvgCheckBold';
-const CheckBoldIcon = (props: Props) => (
+const CheckBoldIcon = (props: TIconProps) => (
{({ css: createClass }) => (
diff --git a/packages/components/icons/src/generated/CheckInactiveReact.tsx b/packages/components/icons/src/generated/CheckInactiveReact.tsx
index fd517a9d84..58b5f3c5cb 100644
--- a/packages/components/icons/src/generated/CheckInactiveReact.tsx
+++ b/packages/components/icons/src/generated/CheckInactiveReact.tsx
@@ -1,134 +1,13 @@
// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
// This file is created with 'yarn generate-icons'.
// Original SVG file: src/svg/check-inactive.react.svg
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { warning } from '@commercetools-uikit/utils';
-import { css, ClassNames } from '@emotion/react';
-import { designTokens } from '@commercetools-uikit/design-system';
-export type Props = {
- color?:
- | 'solid'
- | 'neutral60'
- | 'surface'
- | 'info'
- | 'primary'
- | 'primary40'
- | 'warning'
- | 'error'
- | 'success';
- /**
- * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'.
- */
- size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40';
-};
-export type SVGProps = Props & {
- className: string;
-};
-const iconSizes = {
- small: 12,
- medium: 16,
- big: 24,
- '10': 12,
- '20': 16,
- '30': 20,
- '40': 24,
-} as const;
-const getSizeDimensions = (size: Props['size']) => {
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgCheckInactive = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgCheckInactive = (props: TSVGProps) => (
);
SvgCheckInactive.displayName = 'SvgCheckInactive';
-const CheckInactiveIcon = (props: Props) => (
+const CheckInactiveIcon = (props: TIconProps) => (
{({ css: createClass }) => (
{
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgCheckThin = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgCheckThin = (props: TSVGProps) => (
);
SvgCheckThin.displayName = 'SvgCheckThin';
-const CheckThinIcon = (props: Props) => (
+const CheckThinIcon = (props: TIconProps) => (
{({ css: createClass }) => (
diff --git a/packages/components/icons/src/generated/CircleReact.tsx b/packages/components/icons/src/generated/CircleReact.tsx
index bb7c7a066e..9f1127c70b 100644
--- a/packages/components/icons/src/generated/CircleReact.tsx
+++ b/packages/components/icons/src/generated/CircleReact.tsx
@@ -1,134 +1,13 @@
// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
// This file is created with 'yarn generate-icons'.
// Original SVG file: src/svg/circle.react.svg
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { warning } from '@commercetools-uikit/utils';
-import { css, ClassNames } from '@emotion/react';
-import { designTokens } from '@commercetools-uikit/design-system';
-export type Props = {
- color?:
- | 'solid'
- | 'neutral60'
- | 'surface'
- | 'info'
- | 'primary'
- | 'primary40'
- | 'warning'
- | 'error'
- | 'success';
- /**
- * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'.
- */
- size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40';
-};
-export type SVGProps = Props & {
- className: string;
-};
-const iconSizes = {
- small: 12,
- medium: 16,
- big: 24,
- '10': 12,
- '20': 16,
- '30': 20,
- '40': 24,
-} as const;
-const getSizeDimensions = (size: Props['size']) => {
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgCircle = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgCircle = (props: TSVGProps) => (
);
SvgCircle.displayName = 'SvgCircle';
-const CircleIcon = (props: Props) => (
+const CircleIcon = (props: TIconProps) => (
{({ css: createClass }) => (
diff --git a/packages/components/icons/src/generated/ClipboardReact.tsx b/packages/components/icons/src/generated/ClipboardReact.tsx
index b296aa5c74..aa681f2660 100644
--- a/packages/components/icons/src/generated/ClipboardReact.tsx
+++ b/packages/components/icons/src/generated/ClipboardReact.tsx
@@ -1,134 +1,13 @@
// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
// This file is created with 'yarn generate-icons'.
// Original SVG file: src/svg/clipboard.react.svg
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { warning } from '@commercetools-uikit/utils';
-import { css, ClassNames } from '@emotion/react';
-import { designTokens } from '@commercetools-uikit/design-system';
-export type Props = {
- color?:
- | 'solid'
- | 'neutral60'
- | 'surface'
- | 'info'
- | 'primary'
- | 'primary40'
- | 'warning'
- | 'error'
- | 'success';
- /**
- * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'.
- */
- size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40';
-};
-export type SVGProps = Props & {
- className: string;
-};
-const iconSizes = {
- small: 12,
- medium: 16,
- big: 24,
- '10': 12,
- '20': 16,
- '30': 20,
- '40': 24,
-} as const;
-const getSizeDimensions = (size: Props['size']) => {
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgClipboard = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgClipboard = (props: TSVGProps) => (
);
SvgClipboard.displayName = 'SvgClipboard';
-const ClipboardIcon = (props: Props) => (
+const ClipboardIcon = (props: TIconProps) => (
{({ css: createClass }) => (
diff --git a/packages/components/icons/src/generated/ClockReact.tsx b/packages/components/icons/src/generated/ClockReact.tsx
index fa87039a05..9995c3495b 100644
--- a/packages/components/icons/src/generated/ClockReact.tsx
+++ b/packages/components/icons/src/generated/ClockReact.tsx
@@ -1,134 +1,13 @@
// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
// This file is created with 'yarn generate-icons'.
// Original SVG file: src/svg/clock.react.svg
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { warning } from '@commercetools-uikit/utils';
-import { css, ClassNames } from '@emotion/react';
-import { designTokens } from '@commercetools-uikit/design-system';
-export type Props = {
- color?:
- | 'solid'
- | 'neutral60'
- | 'surface'
- | 'info'
- | 'primary'
- | 'primary40'
- | 'warning'
- | 'error'
- | 'success';
- /**
- * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'.
- */
- size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40';
-};
-export type SVGProps = Props & {
- className: string;
-};
-const iconSizes = {
- small: 12,
- medium: 16,
- big: 24,
- '10': 12,
- '20': 16,
- '30': 20,
- '40': 24,
-} as const;
-const getSizeDimensions = (size: Props['size']) => {
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgClock = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgClock = (props: TSVGProps) => (
);
SvgClock.displayName = 'SvgClock';
-const ClockIcon = (props: Props) => (
+const ClockIcon = (props: TIconProps) => (
{({ css: createClass }) => (
diff --git a/packages/components/icons/src/generated/ClockWithArrowReact.tsx b/packages/components/icons/src/generated/ClockWithArrowReact.tsx
index 1f1388ce35..3927945eb0 100644
--- a/packages/components/icons/src/generated/ClockWithArrowReact.tsx
+++ b/packages/components/icons/src/generated/ClockWithArrowReact.tsx
@@ -1,134 +1,13 @@
// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
// This file is created with 'yarn generate-icons'.
// Original SVG file: src/svg/clock-with-arrow.react.svg
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { warning } from '@commercetools-uikit/utils';
-import { css, ClassNames } from '@emotion/react';
-import { designTokens } from '@commercetools-uikit/design-system';
-export type Props = {
- color?:
- | 'solid'
- | 'neutral60'
- | 'surface'
- | 'info'
- | 'primary'
- | 'primary40'
- | 'warning'
- | 'error'
- | 'success';
- /**
- * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'.
- */
- size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40';
-};
-export type SVGProps = Props & {
- className: string;
-};
-const iconSizes = {
- small: 12,
- medium: 16,
- big: 24,
- '10': 12,
- '20': 16,
- '30': 20,
- '40': 24,
-} as const;
-const getSizeDimensions = (size: Props['size']) => {
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgClockWithArrow = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgClockWithArrow = (props: TSVGProps) => (
);
SvgClockWithArrow.displayName = 'SvgClockWithArrow';
-const ClockWithArrowIcon = (props: Props) => (
+const ClockWithArrowIcon = (props: TIconProps) => (
{({ css: createClass }) => (
{
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgCloseBold = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgCloseBold = (props: TSVGProps) => (
);
SvgCloseBold.displayName = 'SvgCloseBold';
-const CloseBoldIcon = (props: Props) => (
+const CloseBoldIcon = (props: TIconProps) => (
{({ css: createClass }) => (
diff --git a/packages/components/icons/src/generated/CloseReact.tsx b/packages/components/icons/src/generated/CloseReact.tsx
index 46ddbf8ecb..8decea434f 100644
--- a/packages/components/icons/src/generated/CloseReact.tsx
+++ b/packages/components/icons/src/generated/CloseReact.tsx
@@ -1,134 +1,13 @@
// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
// This file is created with 'yarn generate-icons'.
// Original SVG file: src/svg/close.react.svg
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { warning } from '@commercetools-uikit/utils';
-import { css, ClassNames } from '@emotion/react';
-import { designTokens } from '@commercetools-uikit/design-system';
-export type Props = {
- color?:
- | 'solid'
- | 'neutral60'
- | 'surface'
- | 'info'
- | 'primary'
- | 'primary40'
- | 'warning'
- | 'error'
- | 'success';
- /**
- * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'.
- */
- size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40';
-};
-export type SVGProps = Props & {
- className: string;
-};
-const iconSizes = {
- small: 12,
- medium: 16,
- big: 24,
- '10': 12,
- '20': 16,
- '30': 20,
- '40': 24,
-} as const;
-const getSizeDimensions = (size: Props['size']) => {
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgClose = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgClose = (props: TSVGProps) => (
);
SvgClose.displayName = 'SvgClose';
-const CloseIcon = (props: Props) => (
+const CloseIcon = (props: TIconProps) => (
{({ css: createClass }) => (
diff --git a/packages/components/icons/src/generated/CodeViewReact.tsx b/packages/components/icons/src/generated/CodeViewReact.tsx
index d5e25a9dd5..af896514cd 100644
--- a/packages/components/icons/src/generated/CodeViewReact.tsx
+++ b/packages/components/icons/src/generated/CodeViewReact.tsx
@@ -1,134 +1,13 @@
// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
// This file is created with 'yarn generate-icons'.
// Original SVG file: src/svg/code-view.react.svg
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { warning } from '@commercetools-uikit/utils';
-import { css, ClassNames } from '@emotion/react';
-import { designTokens } from '@commercetools-uikit/design-system';
-export type Props = {
- color?:
- | 'solid'
- | 'neutral60'
- | 'surface'
- | 'info'
- | 'primary'
- | 'primary40'
- | 'warning'
- | 'error'
- | 'success';
- /**
- * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'.
- */
- size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40';
-};
-export type SVGProps = Props & {
- className: string;
-};
-const iconSizes = {
- small: 12,
- medium: 16,
- big: 24,
- '10': 12,
- '20': 16,
- '30': 20,
- '40': 24,
-} as const;
-const getSizeDimensions = (size: Props['size']) => {
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgCodeView = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgCodeView = (props: TSVGProps) => (
);
SvgCodeView.displayName = 'SvgCodeView';
-const CodeViewIcon = (props: Props) => (
+const CodeViewIcon = (props: TIconProps) => (
{({ css: createClass }) => (
diff --git a/packages/components/icons/src/generated/CoinsReact.tsx b/packages/components/icons/src/generated/CoinsReact.tsx
index 29b2e2a0cb..db8ede6b5c 100644
--- a/packages/components/icons/src/generated/CoinsReact.tsx
+++ b/packages/components/icons/src/generated/CoinsReact.tsx
@@ -1,134 +1,13 @@
// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
// This file is created with 'yarn generate-icons'.
// Original SVG file: src/svg/coins.react.svg
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { warning } from '@commercetools-uikit/utils';
-import { css, ClassNames } from '@emotion/react';
-import { designTokens } from '@commercetools-uikit/design-system';
-export type Props = {
- color?:
- | 'solid'
- | 'neutral60'
- | 'surface'
- | 'info'
- | 'primary'
- | 'primary40'
- | 'warning'
- | 'error'
- | 'success';
- /**
- * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'.
- */
- size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40';
-};
-export type SVGProps = Props & {
- className: string;
-};
-const iconSizes = {
- small: 12,
- medium: 16,
- big: 24,
- '10': 12,
- '20': 16,
- '30': 20,
- '40': 24,
-} as const;
-const getSizeDimensions = (size: Props['size']) => {
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgCoins = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgCoins = (props: TSVGProps) => (
);
SvgCoins.displayName = 'SvgCoins';
-const CoinsIcon = (props: Props) => (
+const CoinsIcon = (props: TIconProps) => (
{({ css: createClass }) => (
diff --git a/packages/components/icons/src/generated/ColumnsReact.tsx b/packages/components/icons/src/generated/ColumnsReact.tsx
index b5de3daaf7..7c6eb5045a 100644
--- a/packages/components/icons/src/generated/ColumnsReact.tsx
+++ b/packages/components/icons/src/generated/ColumnsReact.tsx
@@ -1,134 +1,13 @@
// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
// This file is created with 'yarn generate-icons'.
// Original SVG file: src/svg/columns.react.svg
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { warning } from '@commercetools-uikit/utils';
-import { css, ClassNames } from '@emotion/react';
-import { designTokens } from '@commercetools-uikit/design-system';
-export type Props = {
- color?:
- | 'solid'
- | 'neutral60'
- | 'surface'
- | 'info'
- | 'primary'
- | 'primary40'
- | 'warning'
- | 'error'
- | 'success';
- /**
- * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'.
- */
- size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40';
-};
-export type SVGProps = Props & {
- className: string;
-};
-const iconSizes = {
- small: 12,
- medium: 16,
- big: 24,
- '10': 12,
- '20': 16,
- '30': 20,
- '40': 24,
-} as const;
-const getSizeDimensions = (size: Props['size']) => {
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgColumns = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgColumns = (props: TSVGProps) => (
);
SvgColumns.displayName = 'SvgColumns';
-const ColumnsIcon = (props: Props) => (
+const ColumnsIcon = (props: TIconProps) => (
{({ css: createClass }) => (
diff --git a/packages/components/icons/src/generated/ConnectedSquareReact.tsx b/packages/components/icons/src/generated/ConnectedSquareReact.tsx
index 1840e59fa9..ab493c9b90 100644
--- a/packages/components/icons/src/generated/ConnectedSquareReact.tsx
+++ b/packages/components/icons/src/generated/ConnectedSquareReact.tsx
@@ -1,134 +1,13 @@
// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
// This file is created with 'yarn generate-icons'.
// Original SVG file: src/svg/connected-square.react.svg
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { warning } from '@commercetools-uikit/utils';
-import { css, ClassNames } from '@emotion/react';
-import { designTokens } from '@commercetools-uikit/design-system';
-export type Props = {
- color?:
- | 'solid'
- | 'neutral60'
- | 'surface'
- | 'info'
- | 'primary'
- | 'primary40'
- | 'warning'
- | 'error'
- | 'success';
- /**
- * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'.
- */
- size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40';
-};
-export type SVGProps = Props & {
- className: string;
-};
-const iconSizes = {
- small: 12,
- medium: 16,
- big: 24,
- '10': 12,
- '20': 16,
- '30': 20,
- '40': 24,
-} as const;
-const getSizeDimensions = (size: Props['size']) => {
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgConnectedSquare = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgConnectedSquare = (props: TSVGProps) => (
);
SvgConnectedSquare.displayName = 'SvgConnectedSquare';
-const ConnectedSquareIcon = (props: Props) => (
+const ConnectedSquareIcon = (props: TIconProps) => (
{({ css: createClass }) => (
{
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgConnectedTriangle = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgConnectedTriangle = (props: TSVGProps) => (
);
SvgConnectedTriangle.displayName = 'SvgConnectedTriangle';
-const ConnectedTriangleIcon = (props: Props) => (
+const ConnectedTriangleIcon = (props: TIconProps) => (
{({ css: createClass }) => (
{
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgCopy = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgCopy = (props: TSVGProps) => (
);
SvgCopy.displayName = 'SvgCopy';
-const CopyIcon = (props: Props) => (
+const CopyIcon = (props: TIconProps) => (
{({ css: createClass }) => (
diff --git a/packages/components/icons/src/generated/CtCheckoutReact.tsx b/packages/components/icons/src/generated/CtCheckoutReact.tsx
index 31052b8f8b..457500c1a7 100644
--- a/packages/components/icons/src/generated/CtCheckoutReact.tsx
+++ b/packages/components/icons/src/generated/CtCheckoutReact.tsx
@@ -1,134 +1,13 @@
// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
// This file is created with 'yarn generate-icons'.
// Original SVG file: src/svg/ct-checkout.react.svg
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { warning } from '@commercetools-uikit/utils';
-import { css, ClassNames } from '@emotion/react';
-import { designTokens } from '@commercetools-uikit/design-system';
-export type Props = {
- color?:
- | 'solid'
- | 'neutral60'
- | 'surface'
- | 'info'
- | 'primary'
- | 'primary40'
- | 'warning'
- | 'error'
- | 'success';
- /**
- * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'.
- */
- size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40';
-};
-export type SVGProps = Props & {
- className: string;
-};
-const iconSizes = {
- small: 12,
- medium: 16,
- big: 24,
- '10': 12,
- '20': 16,
- '30': 20,
- '40': 24,
-} as const;
-const getSizeDimensions = (size: Props['size']) => {
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgCtCheckout = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgCtCheckout = (props: TSVGProps) => (
);
SvgCtCheckout.displayName = 'SvgCtCheckout';
-const CtCheckoutIcon = (props: Props) => (
+const CtCheckoutIcon = (props: TIconProps) => (
{({ css: createClass }) => (
diff --git a/packages/components/icons/src/generated/CubeReact.tsx b/packages/components/icons/src/generated/CubeReact.tsx
index 168ae3c77c..708c654595 100644
--- a/packages/components/icons/src/generated/CubeReact.tsx
+++ b/packages/components/icons/src/generated/CubeReact.tsx
@@ -1,134 +1,13 @@
// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
// This file is created with 'yarn generate-icons'.
// Original SVG file: src/svg/cube.react.svg
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { warning } from '@commercetools-uikit/utils';
-import { css, ClassNames } from '@emotion/react';
-import { designTokens } from '@commercetools-uikit/design-system';
-export type Props = {
- color?:
- | 'solid'
- | 'neutral60'
- | 'surface'
- | 'info'
- | 'primary'
- | 'primary40'
- | 'warning'
- | 'error'
- | 'success';
- /**
- * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'.
- */
- size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40';
-};
-export type SVGProps = Props & {
- className: string;
-};
-const iconSizes = {
- small: 12,
- medium: 16,
- big: 24,
- '10': 12,
- '20': 16,
- '30': 20,
- '40': 24,
-} as const;
-const getSizeDimensions = (size: Props['size']) => {
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgCube = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgCube = (props: TSVGProps) => (
);
SvgCube.displayName = 'SvgCube';
-const CubeIcon = (props: Props) => (
+const CubeIcon = (props: TIconProps) => (
{({ css: createClass }) => (
diff --git a/packages/components/icons/src/generated/CubesReact.tsx b/packages/components/icons/src/generated/CubesReact.tsx
index 80edf5cafb..75263e0e55 100644
--- a/packages/components/icons/src/generated/CubesReact.tsx
+++ b/packages/components/icons/src/generated/CubesReact.tsx
@@ -1,134 +1,13 @@
// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
// This file is created with 'yarn generate-icons'.
// Original SVG file: src/svg/cubes.react.svg
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { warning } from '@commercetools-uikit/utils';
-import { css, ClassNames } from '@emotion/react';
-import { designTokens } from '@commercetools-uikit/design-system';
-export type Props = {
- color?:
- | 'solid'
- | 'neutral60'
- | 'surface'
- | 'info'
- | 'primary'
- | 'primary40'
- | 'warning'
- | 'error'
- | 'success';
- /**
- * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'.
- */
- size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40';
-};
-export type SVGProps = Props & {
- className: string;
-};
-const iconSizes = {
- small: 12,
- medium: 16,
- big: 24,
- '10': 12,
- '20': 16,
- '30': 20,
- '40': 24,
-} as const;
-const getSizeDimensions = (size: Props['size']) => {
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgCubes = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgCubes = (props: TSVGProps) => (
);
SvgCubes.displayName = 'SvgCubes';
-const CubesIcon = (props: Props) => (
+const CubesIcon = (props: TIconProps) => (
{({ css: createClass }) => (
diff --git a/packages/components/icons/src/generated/DiamondReact.tsx b/packages/components/icons/src/generated/DiamondReact.tsx
index 07d1514741..8b1070f40e 100644
--- a/packages/components/icons/src/generated/DiamondReact.tsx
+++ b/packages/components/icons/src/generated/DiamondReact.tsx
@@ -1,134 +1,13 @@
// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
// This file is created with 'yarn generate-icons'.
// Original SVG file: src/svg/diamond.react.svg
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { warning } from '@commercetools-uikit/utils';
-import { css, ClassNames } from '@emotion/react';
-import { designTokens } from '@commercetools-uikit/design-system';
-export type Props = {
- color?:
- | 'solid'
- | 'neutral60'
- | 'surface'
- | 'info'
- | 'primary'
- | 'primary40'
- | 'warning'
- | 'error'
- | 'success';
- /**
- * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'.
- */
- size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40';
-};
-export type SVGProps = Props & {
- className: string;
-};
-const iconSizes = {
- small: 12,
- medium: 16,
- big: 24,
- '10': 12,
- '20': 16,
- '30': 20,
- '40': 24,
-} as const;
-const getSizeDimensions = (size: Props['size']) => {
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgDiamond = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgDiamond = (props: TSVGProps) => (
);
SvgDiamond.displayName = 'SvgDiamond';
-const DiamondIcon = (props: Props) => (
+const DiamondIcon = (props: TIconProps) => (
{({ css: createClass }) => (
diff --git a/packages/components/icons/src/generated/DomainReact.tsx b/packages/components/icons/src/generated/DomainReact.tsx
index 513058ec25..eb329880dd 100644
--- a/packages/components/icons/src/generated/DomainReact.tsx
+++ b/packages/components/icons/src/generated/DomainReact.tsx
@@ -1,134 +1,13 @@
// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
// This file is created with 'yarn generate-icons'.
// Original SVG file: src/svg/domain.react.svg
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { warning } from '@commercetools-uikit/utils';
-import { css, ClassNames } from '@emotion/react';
-import { designTokens } from '@commercetools-uikit/design-system';
-export type Props = {
- color?:
- | 'solid'
- | 'neutral60'
- | 'surface'
- | 'info'
- | 'primary'
- | 'primary40'
- | 'warning'
- | 'error'
- | 'success';
- /**
- * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'.
- */
- size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40';
-};
-export type SVGProps = Props & {
- className: string;
-};
-const iconSizes = {
- small: 12,
- medium: 16,
- big: 24,
- '10': 12,
- '20': 16,
- '30': 20,
- '40': 24,
-} as const;
-const getSizeDimensions = (size: Props['size']) => {
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgDomain = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgDomain = (props: TSVGProps) => (
);
SvgDomain.displayName = 'SvgDomain';
-const DomainIcon = (props: Props) => (
+const DomainIcon = (props: TIconProps) => (
{({ css: createClass }) => (
diff --git a/packages/components/icons/src/generated/DotReact.tsx b/packages/components/icons/src/generated/DotReact.tsx
index 0464906545..b6cdd76e53 100644
--- a/packages/components/icons/src/generated/DotReact.tsx
+++ b/packages/components/icons/src/generated/DotReact.tsx
@@ -1,134 +1,13 @@
// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
// This file is created with 'yarn generate-icons'.
// Original SVG file: src/svg/dot.react.svg
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { warning } from '@commercetools-uikit/utils';
-import { css, ClassNames } from '@emotion/react';
-import { designTokens } from '@commercetools-uikit/design-system';
-export type Props = {
- color?:
- | 'solid'
- | 'neutral60'
- | 'surface'
- | 'info'
- | 'primary'
- | 'primary40'
- | 'warning'
- | 'error'
- | 'success';
- /**
- * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'.
- */
- size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40';
-};
-export type SVGProps = Props & {
- className: string;
-};
-const iconSizes = {
- small: 12,
- medium: 16,
- big: 24,
- '10': 12,
- '20': 16,
- '30': 20,
- '40': 24,
-} as const;
-const getSizeDimensions = (size: Props['size']) => {
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgDot = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgDot = (props: TSVGProps) => (
);
SvgDot.displayName = 'SvgDot';
-const DotIcon = (props: Props) => (
+const DotIcon = (props: TIconProps) => (
{({ css: createClass }) => (
diff --git a/packages/components/icons/src/generated/DownloadReact.tsx b/packages/components/icons/src/generated/DownloadReact.tsx
index cef77d94dd..3eeebab519 100644
--- a/packages/components/icons/src/generated/DownloadReact.tsx
+++ b/packages/components/icons/src/generated/DownloadReact.tsx
@@ -1,134 +1,13 @@
// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
// This file is created with 'yarn generate-icons'.
// Original SVG file: src/svg/download.react.svg
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { warning } from '@commercetools-uikit/utils';
-import { css, ClassNames } from '@emotion/react';
-import { designTokens } from '@commercetools-uikit/design-system';
-export type Props = {
- color?:
- | 'solid'
- | 'neutral60'
- | 'surface'
- | 'info'
- | 'primary'
- | 'primary40'
- | 'warning'
- | 'error'
- | 'success';
- /**
- * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'.
- */
- size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40';
-};
-export type SVGProps = Props & {
- className: string;
-};
-const iconSizes = {
- small: 12,
- medium: 16,
- big: 24,
- '10': 12,
- '20': 16,
- '30': 20,
- '40': 24,
-} as const;
-const getSizeDimensions = (size: Props['size']) => {
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgDownload = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgDownload = (props: TSVGProps) => (
);
SvgDownload.displayName = 'SvgDownload';
-const DownloadIcon = (props: Props) => (
+const DownloadIcon = (props: TIconProps) => (
{({ css: createClass }) => (
diff --git a/packages/components/icons/src/generated/DragDropReact.tsx b/packages/components/icons/src/generated/DragDropReact.tsx
index 17c5fb9e5f..21084962b0 100644
--- a/packages/components/icons/src/generated/DragDropReact.tsx
+++ b/packages/components/icons/src/generated/DragDropReact.tsx
@@ -1,134 +1,13 @@
// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
// This file is created with 'yarn generate-icons'.
// Original SVG file: src/svg/drag-drop.react.svg
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { warning } from '@commercetools-uikit/utils';
-import { css, ClassNames } from '@emotion/react';
-import { designTokens } from '@commercetools-uikit/design-system';
-export type Props = {
- color?:
- | 'solid'
- | 'neutral60'
- | 'surface'
- | 'info'
- | 'primary'
- | 'primary40'
- | 'warning'
- | 'error'
- | 'success';
- /**
- * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'.
- */
- size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40';
-};
-export type SVGProps = Props & {
- className: string;
-};
-const iconSizes = {
- small: 12,
- medium: 16,
- big: 24,
- '10': 12,
- '20': 16,
- '30': 20,
- '40': 24,
-} as const;
-const getSizeDimensions = (size: Props['size']) => {
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgDragDrop = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgDragDrop = (props: TSVGProps) => (
);
SvgDragDrop.displayName = 'SvgDragDrop';
-const DragDropIcon = (props: Props) => (
+const DragDropIcon = (props: TIconProps) => (
{({ css: createClass }) => (
diff --git a/packages/components/icons/src/generated/DragReact.tsx b/packages/components/icons/src/generated/DragReact.tsx
index 78d351f70e..140aafba1e 100644
--- a/packages/components/icons/src/generated/DragReact.tsx
+++ b/packages/components/icons/src/generated/DragReact.tsx
@@ -1,134 +1,13 @@
// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
// This file is created with 'yarn generate-icons'.
// Original SVG file: src/svg/drag.react.svg
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { warning } from '@commercetools-uikit/utils';
-import { css, ClassNames } from '@emotion/react';
-import { designTokens } from '@commercetools-uikit/design-system';
-export type Props = {
- color?:
- | 'solid'
- | 'neutral60'
- | 'surface'
- | 'info'
- | 'primary'
- | 'primary40'
- | 'warning'
- | 'error'
- | 'success';
- /**
- * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'.
- */
- size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40';
-};
-export type SVGProps = Props & {
- className: string;
-};
-const iconSizes = {
- small: 12,
- medium: 16,
- big: 24,
- '10': 12,
- '20': 16,
- '30': 20,
- '40': 24,
-} as const;
-const getSizeDimensions = (size: Props['size']) => {
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgDrag = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgDrag = (props: TSVGProps) => (
);
SvgDrag.displayName = 'SvgDrag';
-const DragIcon = (props: Props) => (
+const DragIcon = (props: TIconProps) => (
{({ css: createClass }) => (
diff --git a/packages/components/icons/src/generated/EditReact.tsx b/packages/components/icons/src/generated/EditReact.tsx
index 854aca6aee..822510ccc8 100644
--- a/packages/components/icons/src/generated/EditReact.tsx
+++ b/packages/components/icons/src/generated/EditReact.tsx
@@ -1,134 +1,13 @@
// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
// This file is created with 'yarn generate-icons'.
// Original SVG file: src/svg/edit.react.svg
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { warning } from '@commercetools-uikit/utils';
-import { css, ClassNames } from '@emotion/react';
-import { designTokens } from '@commercetools-uikit/design-system';
-export type Props = {
- color?:
- | 'solid'
- | 'neutral60'
- | 'surface'
- | 'info'
- | 'primary'
- | 'primary40'
- | 'warning'
- | 'error'
- | 'success';
- /**
- * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'.
- */
- size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40';
-};
-export type SVGProps = Props & {
- className: string;
-};
-const iconSizes = {
- small: 12,
- medium: 16,
- big: 24,
- '10': 12,
- '20': 16,
- '30': 20,
- '40': 24,
-} as const;
-const getSizeDimensions = (size: Props['size']) => {
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgEdit = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgEdit = (props: TSVGProps) => (
);
SvgEdit.displayName = 'SvgEdit';
-const EditIcon = (props: Props) => (
+const EditIcon = (props: TIconProps) => (
{({ css: createClass }) => (
diff --git a/packages/components/icons/src/generated/ErrorReact.tsx b/packages/components/icons/src/generated/ErrorReact.tsx
index 918cc0099e..263254a437 100644
--- a/packages/components/icons/src/generated/ErrorReact.tsx
+++ b/packages/components/icons/src/generated/ErrorReact.tsx
@@ -1,134 +1,13 @@
// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
// This file is created with 'yarn generate-icons'.
// Original SVG file: src/svg/error.react.svg
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { warning } from '@commercetools-uikit/utils';
-import { css, ClassNames } from '@emotion/react';
-import { designTokens } from '@commercetools-uikit/design-system';
-export type Props = {
- color?:
- | 'solid'
- | 'neutral60'
- | 'surface'
- | 'info'
- | 'primary'
- | 'primary40'
- | 'warning'
- | 'error'
- | 'success';
- /**
- * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'.
- */
- size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40';
-};
-export type SVGProps = Props & {
- className: string;
-};
-const iconSizes = {
- small: 12,
- medium: 16,
- big: 24,
- '10': 12,
- '20': 16,
- '30': 20,
- '40': 24,
-} as const;
-const getSizeDimensions = (size: Props['size']) => {
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgError = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgError = (props: TSVGProps) => (
);
SvgError.displayName = 'SvgError';
-const ErrorIcon = (props: Props) => (
+const ErrorIcon = (props: TIconProps) => (
{({ css: createClass }) => (
diff --git a/packages/components/icons/src/generated/ExpandReact.tsx b/packages/components/icons/src/generated/ExpandReact.tsx
index 94137cc666..8e9b03fe73 100644
--- a/packages/components/icons/src/generated/ExpandReact.tsx
+++ b/packages/components/icons/src/generated/ExpandReact.tsx
@@ -1,134 +1,13 @@
// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
// This file is created with 'yarn generate-icons'.
// Original SVG file: src/svg/expand.react.svg
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { warning } from '@commercetools-uikit/utils';
-import { css, ClassNames } from '@emotion/react';
-import { designTokens } from '@commercetools-uikit/design-system';
-export type Props = {
- color?:
- | 'solid'
- | 'neutral60'
- | 'surface'
- | 'info'
- | 'primary'
- | 'primary40'
- | 'warning'
- | 'error'
- | 'success';
- /**
- * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'.
- */
- size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40';
-};
-export type SVGProps = Props & {
- className: string;
-};
-const iconSizes = {
- small: 12,
- medium: 16,
- big: 24,
- '10': 12,
- '20': 16,
- '30': 20,
- '40': 24,
-} as const;
-const getSizeDimensions = (size: Props['size']) => {
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgExpand = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgExpand = (props: TSVGProps) => (
);
SvgExpand.displayName = 'SvgExpand';
-const ExpandIcon = (props: Props) => (
+const ExpandIcon = (props: TIconProps) => (
{({ css: createClass }) => (
diff --git a/packages/components/icons/src/generated/ExportReact.tsx b/packages/components/icons/src/generated/ExportReact.tsx
index e1906375db..3dbf8b6da6 100644
--- a/packages/components/icons/src/generated/ExportReact.tsx
+++ b/packages/components/icons/src/generated/ExportReact.tsx
@@ -1,134 +1,13 @@
// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
// This file is created with 'yarn generate-icons'.
// Original SVG file: src/svg/export.react.svg
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { warning } from '@commercetools-uikit/utils';
-import { css, ClassNames } from '@emotion/react';
-import { designTokens } from '@commercetools-uikit/design-system';
-export type Props = {
- color?:
- | 'solid'
- | 'neutral60'
- | 'surface'
- | 'info'
- | 'primary'
- | 'primary40'
- | 'warning'
- | 'error'
- | 'success';
- /**
- * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'.
- */
- size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40';
-};
-export type SVGProps = Props & {
- className: string;
-};
-const iconSizes = {
- small: 12,
- medium: 16,
- big: 24,
- '10': 12,
- '20': 16,
- '30': 20,
- '40': 24,
-} as const;
-const getSizeDimensions = (size: Props['size']) => {
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgExport = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgExport = (props: TSVGProps) => (
);
SvgExport.displayName = 'SvgExport';
-const ExportIcon = (props: Props) => (
+const ExportIcon = (props: TIconProps) => (
{({ css: createClass }) => (
diff --git a/packages/components/icons/src/generated/ExternalLinkReact.tsx b/packages/components/icons/src/generated/ExternalLinkReact.tsx
index cb675348c3..8acf7c7d44 100644
--- a/packages/components/icons/src/generated/ExternalLinkReact.tsx
+++ b/packages/components/icons/src/generated/ExternalLinkReact.tsx
@@ -1,134 +1,13 @@
// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
// This file is created with 'yarn generate-icons'.
// Original SVG file: src/svg/external-link.react.svg
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { warning } from '@commercetools-uikit/utils';
-import { css, ClassNames } from '@emotion/react';
-import { designTokens } from '@commercetools-uikit/design-system';
-export type Props = {
- color?:
- | 'solid'
- | 'neutral60'
- | 'surface'
- | 'info'
- | 'primary'
- | 'primary40'
- | 'warning'
- | 'error'
- | 'success';
- /**
- * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'.
- */
- size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40';
-};
-export type SVGProps = Props & {
- className: string;
-};
-const iconSizes = {
- small: 12,
- medium: 16,
- big: 24,
- '10': 12,
- '20': 16,
- '30': 20,
- '40': 24,
-} as const;
-const getSizeDimensions = (size: Props['size']) => {
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgExternalLink = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgExternalLink = (props: TSVGProps) => (
);
SvgExternalLink.displayName = 'SvgExternalLink';
-const ExternalLinkIcon = (props: Props) => (
+const ExternalLinkIcon = (props: TIconProps) => (
{({ css: createClass }) => (
{
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgEyeCrossed = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgEyeCrossed = (props: TSVGProps) => (
);
SvgEyeCrossed.displayName = 'SvgEyeCrossed';
-const EyeCrossedIcon = (props: Props) => (
+const EyeCrossedIcon = (props: TIconProps) => (
{({ css: createClass }) => (
diff --git a/packages/components/icons/src/generated/EyeReact.tsx b/packages/components/icons/src/generated/EyeReact.tsx
index 117dbdeb54..aad6fc86e2 100644
--- a/packages/components/icons/src/generated/EyeReact.tsx
+++ b/packages/components/icons/src/generated/EyeReact.tsx
@@ -1,134 +1,13 @@
// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
// This file is created with 'yarn generate-icons'.
// Original SVG file: src/svg/eye.react.svg
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { warning } from '@commercetools-uikit/utils';
-import { css, ClassNames } from '@emotion/react';
-import { designTokens } from '@commercetools-uikit/design-system';
-export type Props = {
- color?:
- | 'solid'
- | 'neutral60'
- | 'surface'
- | 'info'
- | 'primary'
- | 'primary40'
- | 'warning'
- | 'error'
- | 'success';
- /**
- * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'.
- */
- size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40';
-};
-export type SVGProps = Props & {
- className: string;
-};
-const iconSizes = {
- small: 12,
- medium: 16,
- big: 24,
- '10': 12,
- '20': 16,
- '30': 20,
- '40': 24,
-} as const;
-const getSizeDimensions = (size: Props['size']) => {
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgEye = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgEye = (props: TSVGProps) => (
);
SvgEye.displayName = 'SvgEye';
-const EyeIcon = (props: Props) => (
+const EyeIcon = (props: TIconProps) => (
{({ css: createClass }) => (
diff --git a/packages/components/icons/src/generated/FilterAndListReact.tsx b/packages/components/icons/src/generated/FilterAndListReact.tsx
index 7cb3a3a83b..a2942c56f4 100644
--- a/packages/components/icons/src/generated/FilterAndListReact.tsx
+++ b/packages/components/icons/src/generated/FilterAndListReact.tsx
@@ -1,134 +1,13 @@
// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
// This file is created with 'yarn generate-icons'.
// Original SVG file: src/svg/filter-and-list.react.svg
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { warning } from '@commercetools-uikit/utils';
-import { css, ClassNames } from '@emotion/react';
-import { designTokens } from '@commercetools-uikit/design-system';
-export type Props = {
- color?:
- | 'solid'
- | 'neutral60'
- | 'surface'
- | 'info'
- | 'primary'
- | 'primary40'
- | 'warning'
- | 'error'
- | 'success';
- /**
- * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'.
- */
- size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40';
-};
-export type SVGProps = Props & {
- className: string;
-};
-const iconSizes = {
- small: 12,
- medium: 16,
- big: 24,
- '10': 12,
- '20': 16,
- '30': 20,
- '40': 24,
-} as const;
-const getSizeDimensions = (size: Props['size']) => {
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgFilterAndList = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgFilterAndList = (props: TSVGProps) => (
);
SvgFilterAndList.displayName = 'SvgFilterAndList';
-const FilterAndListIcon = (props: Props) => (
+const FilterAndListIcon = (props: TIconProps) => (
{({ css: createClass }) => (
{
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgFilter = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgFilter = (props: TSVGProps) => (
);
SvgFilter.displayName = 'SvgFilter';
-const FilterIcon = (props: Props) => (
+const FilterIcon = (props: TIconProps) => (
{({ css: createClass }) => (
diff --git a/packages/components/icons/src/generated/FlagFilledReact.tsx b/packages/components/icons/src/generated/FlagFilledReact.tsx
index a6a935018f..aafd71fdab 100644
--- a/packages/components/icons/src/generated/FlagFilledReact.tsx
+++ b/packages/components/icons/src/generated/FlagFilledReact.tsx
@@ -1,134 +1,13 @@
// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
// This file is created with 'yarn generate-icons'.
// Original SVG file: src/svg/flag-filled.react.svg
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { warning } from '@commercetools-uikit/utils';
-import { css, ClassNames } from '@emotion/react';
-import { designTokens } from '@commercetools-uikit/design-system';
-export type Props = {
- color?:
- | 'solid'
- | 'neutral60'
- | 'surface'
- | 'info'
- | 'primary'
- | 'primary40'
- | 'warning'
- | 'error'
- | 'success';
- /**
- * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'.
- */
- size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40';
-};
-export type SVGProps = Props & {
- className: string;
-};
-const iconSizes = {
- small: 12,
- medium: 16,
- big: 24,
- '10': 12,
- '20': 16,
- '30': 20,
- '40': 24,
-} as const;
-const getSizeDimensions = (size: Props['size']) => {
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgFlagFilled = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgFlagFilled = (props: TSVGProps) => (
);
SvgFlagFilled.displayName = 'SvgFlagFilled';
-const FlagFilledIcon = (props: Props) => (
+const FlagFilledIcon = (props: TIconProps) => (
{({ css: createClass }) => (
diff --git a/packages/components/icons/src/generated/FlagLinearReact.tsx b/packages/components/icons/src/generated/FlagLinearReact.tsx
index 9dc0a83d4f..c931b00bdf 100644
--- a/packages/components/icons/src/generated/FlagLinearReact.tsx
+++ b/packages/components/icons/src/generated/FlagLinearReact.tsx
@@ -1,134 +1,13 @@
// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
// This file is created with 'yarn generate-icons'.
// Original SVG file: src/svg/flag-linear.react.svg
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { warning } from '@commercetools-uikit/utils';
-import { css, ClassNames } from '@emotion/react';
-import { designTokens } from '@commercetools-uikit/design-system';
-export type Props = {
- color?:
- | 'solid'
- | 'neutral60'
- | 'surface'
- | 'info'
- | 'primary'
- | 'primary40'
- | 'warning'
- | 'error'
- | 'success';
- /**
- * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'.
- */
- size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40';
-};
-export type SVGProps = Props & {
- className: string;
-};
-const iconSizes = {
- small: 12,
- medium: 16,
- big: 24,
- '10': 12,
- '20': 16,
- '30': 20,
- '40': 24,
-} as const;
-const getSizeDimensions = (size: Props['size']) => {
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgFlagLinear = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgFlagLinear = (props: TSVGProps) => (
);
SvgFlagLinear.displayName = 'SvgFlagLinear';
-const FlagLinearIcon = (props: Props) => (
+const FlagLinearIcon = (props: TIconProps) => (
{({ css: createClass }) => (
diff --git a/packages/components/icons/src/generated/FlameReact.tsx b/packages/components/icons/src/generated/FlameReact.tsx
index 80cf0eacb4..56eae926e7 100644
--- a/packages/components/icons/src/generated/FlameReact.tsx
+++ b/packages/components/icons/src/generated/FlameReact.tsx
@@ -1,134 +1,13 @@
// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
// This file is created with 'yarn generate-icons'.
// Original SVG file: src/svg/flame.react.svg
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { warning } from '@commercetools-uikit/utils';
-import { css, ClassNames } from '@emotion/react';
-import { designTokens } from '@commercetools-uikit/design-system';
-export type Props = {
- color?:
- | 'solid'
- | 'neutral60'
- | 'surface'
- | 'info'
- | 'primary'
- | 'primary40'
- | 'warning'
- | 'error'
- | 'success';
- /**
- * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'.
- */
- size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40';
-};
-export type SVGProps = Props & {
- className: string;
-};
-const iconSizes = {
- small: 12,
- medium: 16,
- big: 24,
- '10': 12,
- '20': 16,
- '30': 20,
- '40': 24,
-} as const;
-const getSizeDimensions = (size: Props['size']) => {
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgFlame = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgFlame = (props: TSVGProps) => (
);
SvgFlame.displayName = 'SvgFlame';
-const FlameIcon = (props: Props) => (
+const FlameIcon = (props: TIconProps) => (
{({ css: createClass }) => (
diff --git a/packages/components/icons/src/generated/FractionDigitsReact.tsx b/packages/components/icons/src/generated/FractionDigitsReact.tsx
index 83e01859ff..d2edee4111 100644
--- a/packages/components/icons/src/generated/FractionDigitsReact.tsx
+++ b/packages/components/icons/src/generated/FractionDigitsReact.tsx
@@ -1,134 +1,13 @@
// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
// This file is created with 'yarn generate-icons'.
// Original SVG file: src/svg/fraction-digits.react.svg
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { warning } from '@commercetools-uikit/utils';
-import { css, ClassNames } from '@emotion/react';
-import { designTokens } from '@commercetools-uikit/design-system';
-export type Props = {
- color?:
- | 'solid'
- | 'neutral60'
- | 'surface'
- | 'info'
- | 'primary'
- | 'primary40'
- | 'warning'
- | 'error'
- | 'success';
- /**
- * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'.
- */
- size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40';
-};
-export type SVGProps = Props & {
- className: string;
-};
-const iconSizes = {
- small: 12,
- medium: 16,
- big: 24,
- '10': 12,
- '20': 16,
- '30': 20,
- '40': 24,
-} as const;
-const getSizeDimensions = (size: Props['size']) => {
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgFractionDigits = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgFractionDigits = (props: TSVGProps) => (
);
SvgFractionDigits.displayName = 'SvgFractionDigits';
-const FractionDigitsIcon = (props: Props) => (
+const FractionDigitsIcon = (props: TIconProps) => (
{({ css: createClass }) => (
{
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgGear = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgGear = (props: TSVGProps) => (
);
SvgGear.displayName = 'SvgGear';
-const GearIcon = (props: Props) => (
+const GearIcon = (props: TIconProps) => (
{({ css: createClass }) => (
diff --git a/packages/components/icons/src/generated/GraduationCapReact.tsx b/packages/components/icons/src/generated/GraduationCapReact.tsx
index c240bc6187..3548d97b9d 100644
--- a/packages/components/icons/src/generated/GraduationCapReact.tsx
+++ b/packages/components/icons/src/generated/GraduationCapReact.tsx
@@ -1,134 +1,13 @@
// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
// This file is created with 'yarn generate-icons'.
// Original SVG file: src/svg/graduation-cap.react.svg
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { warning } from '@commercetools-uikit/utils';
-import { css, ClassNames } from '@emotion/react';
-import { designTokens } from '@commercetools-uikit/design-system';
-export type Props = {
- color?:
- | 'solid'
- | 'neutral60'
- | 'surface'
- | 'info'
- | 'primary'
- | 'primary40'
- | 'warning'
- | 'error'
- | 'success';
- /**
- * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'.
- */
- size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40';
-};
-export type SVGProps = Props & {
- className: string;
-};
-const iconSizes = {
- small: 12,
- medium: 16,
- big: 24,
- '10': 12,
- '20': 16,
- '30': 20,
- '40': 24,
-} as const;
-const getSizeDimensions = (size: Props['size']) => {
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgGraduationCap = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgGraduationCap = (props: TSVGProps) => (
);
SvgGraduationCap.displayName = 'SvgGraduationCap';
-const GraduationCapIcon = (props: Props) => (
+const GraduationCapIcon = (props: TIconProps) => (
{({ css: createClass }) => (
{
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgGraph = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgGraph = (props: TSVGProps) => (
);
SvgGraph.displayName = 'SvgGraph';
-const GraphIcon = (props: Props) => (
+const GraphIcon = (props: TIconProps) => (
{({ css: createClass }) => (
diff --git a/packages/components/icons/src/generated/GridReact.tsx b/packages/components/icons/src/generated/GridReact.tsx
index 00579d37dd..27edd4d99f 100644
--- a/packages/components/icons/src/generated/GridReact.tsx
+++ b/packages/components/icons/src/generated/GridReact.tsx
@@ -1,134 +1,13 @@
// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
// This file is created with 'yarn generate-icons'.
// Original SVG file: src/svg/grid.react.svg
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { warning } from '@commercetools-uikit/utils';
-import { css, ClassNames } from '@emotion/react';
-import { designTokens } from '@commercetools-uikit/design-system';
-export type Props = {
- color?:
- | 'solid'
- | 'neutral60'
- | 'surface'
- | 'info'
- | 'primary'
- | 'primary40'
- | 'warning'
- | 'error'
- | 'success';
- /**
- * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'.
- */
- size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40';
-};
-export type SVGProps = Props & {
- className: string;
-};
-const iconSizes = {
- small: 12,
- medium: 16,
- big: 24,
- '10': 12,
- '20': 16,
- '30': 20,
- '40': 24,
-} as const;
-const getSizeDimensions = (size: Props['size']) => {
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgGrid = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgGrid = (props: TSVGProps) => (
);
SvgGrid.displayName = 'SvgGrid';
-const GridIcon = (props: Props) => (
+const GridIcon = (props: TIconProps) => (
{({ css: createClass }) => (
diff --git a/packages/components/icons/src/generated/GroupAddReact.tsx b/packages/components/icons/src/generated/GroupAddReact.tsx
index 0c04fcbd2b..790a358496 100644
--- a/packages/components/icons/src/generated/GroupAddReact.tsx
+++ b/packages/components/icons/src/generated/GroupAddReact.tsx
@@ -1,134 +1,13 @@
// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
// This file is created with 'yarn generate-icons'.
// Original SVG file: src/svg/group-add.react.svg
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { warning } from '@commercetools-uikit/utils';
-import { css, ClassNames } from '@emotion/react';
-import { designTokens } from '@commercetools-uikit/design-system';
-export type Props = {
- color?:
- | 'solid'
- | 'neutral60'
- | 'surface'
- | 'info'
- | 'primary'
- | 'primary40'
- | 'warning'
- | 'error'
- | 'success';
- /**
- * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'.
- */
- size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40';
-};
-export type SVGProps = Props & {
- className: string;
-};
-const iconSizes = {
- small: 12,
- medium: 16,
- big: 24,
- '10': 12,
- '20': 16,
- '30': 20,
- '40': 24,
-} as const;
-const getSizeDimensions = (size: Props['size']) => {
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgGroupAdd = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgGroupAdd = (props: TSVGProps) => (
);
SvgGroupAdd.displayName = 'SvgGroupAdd';
-const GroupAddIcon = (props: Props) => (
+const GroupAddIcon = (props: TIconProps) => (
{({ css: createClass }) => (
diff --git a/packages/components/icons/src/generated/HeartReact.tsx b/packages/components/icons/src/generated/HeartReact.tsx
index 09f293879f..06d51d13ba 100644
--- a/packages/components/icons/src/generated/HeartReact.tsx
+++ b/packages/components/icons/src/generated/HeartReact.tsx
@@ -1,134 +1,13 @@
// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
// This file is created with 'yarn generate-icons'.
// Original SVG file: src/svg/heart.react.svg
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { warning } from '@commercetools-uikit/utils';
-import { css, ClassNames } from '@emotion/react';
-import { designTokens } from '@commercetools-uikit/design-system';
-export type Props = {
- color?:
- | 'solid'
- | 'neutral60'
- | 'surface'
- | 'info'
- | 'primary'
- | 'primary40'
- | 'warning'
- | 'error'
- | 'success';
- /**
- * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'.
- */
- size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40';
-};
-export type SVGProps = Props & {
- className: string;
-};
-const iconSizes = {
- small: 12,
- medium: 16,
- big: 24,
- '10': 12,
- '20': 16,
- '30': 20,
- '40': 24,
-} as const;
-const getSizeDimensions = (size: Props['size']) => {
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgHeart = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgHeart = (props: TSVGProps) => (
);
SvgHeart.displayName = 'SvgHeart';
-const HeartIcon = (props: Props) => (
+const HeartIcon = (props: TIconProps) => (
{({ css: createClass }) => (
diff --git a/packages/components/icons/src/generated/HomeReact.tsx b/packages/components/icons/src/generated/HomeReact.tsx
index 0472551c42..d146bb8cc5 100644
--- a/packages/components/icons/src/generated/HomeReact.tsx
+++ b/packages/components/icons/src/generated/HomeReact.tsx
@@ -1,134 +1,13 @@
// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
// This file is created with 'yarn generate-icons'.
// Original SVG file: src/svg/home.react.svg
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { warning } from '@commercetools-uikit/utils';
-import { css, ClassNames } from '@emotion/react';
-import { designTokens } from '@commercetools-uikit/design-system';
-export type Props = {
- color?:
- | 'solid'
- | 'neutral60'
- | 'surface'
- | 'info'
- | 'primary'
- | 'primary40'
- | 'warning'
- | 'error'
- | 'success';
- /**
- * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'.
- */
- size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40';
-};
-export type SVGProps = Props & {
- className: string;
-};
-const iconSizes = {
- small: 12,
- medium: 16,
- big: 24,
- '10': 12,
- '20': 16,
- '30': 20,
- '40': 24,
-} as const;
-const getSizeDimensions = (size: Props['size']) => {
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgHome = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgHome = (props: TSVGProps) => (
);
SvgHome.displayName = 'SvgHome';
-const HomeIcon = (props: Props) => (
+const HomeIcon = (props: TIconProps) => (
{({ css: createClass }) => (
diff --git a/packages/components/icons/src/generated/HubReact.tsx b/packages/components/icons/src/generated/HubReact.tsx
index 150690e729..db89ffe995 100644
--- a/packages/components/icons/src/generated/HubReact.tsx
+++ b/packages/components/icons/src/generated/HubReact.tsx
@@ -1,134 +1,13 @@
// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
// This file is created with 'yarn generate-icons'.
// Original SVG file: src/svg/hub.react.svg
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { warning } from '@commercetools-uikit/utils';
-import { css, ClassNames } from '@emotion/react';
-import { designTokens } from '@commercetools-uikit/design-system';
-export type Props = {
- color?:
- | 'solid'
- | 'neutral60'
- | 'surface'
- | 'info'
- | 'primary'
- | 'primary40'
- | 'warning'
- | 'error'
- | 'success';
- /**
- * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'.
- */
- size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40';
-};
-export type SVGProps = Props & {
- className: string;
-};
-const iconSizes = {
- small: 12,
- medium: 16,
- big: 24,
- '10': 12,
- '20': 16,
- '30': 20,
- '40': 24,
-} as const;
-const getSizeDimensions = (size: Props['size']) => {
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgHub = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgHub = (props: TSVGProps) => (
);
SvgHub.displayName = 'SvgHub';
-const HubIcon = (props: Props) => (
+const HubIcon = (props: TIconProps) => (
{({ css: createClass }) => (
diff --git a/packages/components/icons/src/generated/ImportReact.tsx b/packages/components/icons/src/generated/ImportReact.tsx
index 873f9ee621..049c7c8fa5 100644
--- a/packages/components/icons/src/generated/ImportReact.tsx
+++ b/packages/components/icons/src/generated/ImportReact.tsx
@@ -1,134 +1,13 @@
// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
// This file is created with 'yarn generate-icons'.
// Original SVG file: src/svg/import.react.svg
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { warning } from '@commercetools-uikit/utils';
-import { css, ClassNames } from '@emotion/react';
-import { designTokens } from '@commercetools-uikit/design-system';
-export type Props = {
- color?:
- | 'solid'
- | 'neutral60'
- | 'surface'
- | 'info'
- | 'primary'
- | 'primary40'
- | 'warning'
- | 'error'
- | 'success';
- /**
- * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'.
- */
- size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40';
-};
-export type SVGProps = Props & {
- className: string;
-};
-const iconSizes = {
- small: 12,
- medium: 16,
- big: 24,
- '10': 12,
- '20': 16,
- '30': 20,
- '40': 24,
-} as const;
-const getSizeDimensions = (size: Props['size']) => {
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgImport = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgImport = (props: TSVGProps) => (
);
SvgImport.displayName = 'SvgImport';
-const ImportIcon = (props: Props) => (
+const ImportIcon = (props: TIconProps) => (
{({ css: createClass }) => (
diff --git a/packages/components/icons/src/generated/InfoReact.tsx b/packages/components/icons/src/generated/InfoReact.tsx
index 5a79c29a94..412c578dcb 100644
--- a/packages/components/icons/src/generated/InfoReact.tsx
+++ b/packages/components/icons/src/generated/InfoReact.tsx
@@ -1,134 +1,13 @@
// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
// This file is created with 'yarn generate-icons'.
// Original SVG file: src/svg/info.react.svg
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { warning } from '@commercetools-uikit/utils';
-import { css, ClassNames } from '@emotion/react';
-import { designTokens } from '@commercetools-uikit/design-system';
-export type Props = {
- color?:
- | 'solid'
- | 'neutral60'
- | 'surface'
- | 'info'
- | 'primary'
- | 'primary40'
- | 'warning'
- | 'error'
- | 'success';
- /**
- * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'.
- */
- size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40';
-};
-export type SVGProps = Props & {
- className: string;
-};
-const iconSizes = {
- small: 12,
- medium: 16,
- big: 24,
- '10': 12,
- '20': 16,
- '30': 20,
- '40': 24,
-} as const;
-const getSizeDimensions = (size: Props['size']) => {
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgInfo = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgInfo = (props: TSVGProps) => (
);
SvgInfo.displayName = 'SvgInfo';
-const InfoIcon = (props: Props) => (
+const InfoIcon = (props: TIconProps) => (
{({ css: createClass }) => (
diff --git a/packages/components/icons/src/generated/InformationReact.tsx b/packages/components/icons/src/generated/InformationReact.tsx
index d8669a6925..78efa314b3 100644
--- a/packages/components/icons/src/generated/InformationReact.tsx
+++ b/packages/components/icons/src/generated/InformationReact.tsx
@@ -1,134 +1,13 @@
// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
// This file is created with 'yarn generate-icons'.
// Original SVG file: src/svg/information.react.svg
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { warning } from '@commercetools-uikit/utils';
-import { css, ClassNames } from '@emotion/react';
-import { designTokens } from '@commercetools-uikit/design-system';
-export type Props = {
- color?:
- | 'solid'
- | 'neutral60'
- | 'surface'
- | 'info'
- | 'primary'
- | 'primary40'
- | 'warning'
- | 'error'
- | 'success';
- /**
- * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'.
- */
- size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40';
-};
-export type SVGProps = Props & {
- className: string;
-};
-const iconSizes = {
- small: 12,
- medium: 16,
- big: 24,
- '10': 12,
- '20': 16,
- '30': 20,
- '40': 24,
-} as const;
-const getSizeDimensions = (size: Props['size']) => {
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgInformation = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgInformation = (props: TSVGProps) => (
);
SvgInformation.displayName = 'SvgInformation';
-const InformationIcon = (props: Props) => (
+const InformationIcon = (props: TIconProps) => (
{({ css: createClass }) => (
{
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgLayers = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgLayers = (props: TSVGProps) => (
);
SvgLayers.displayName = 'SvgLayers';
-const LayersIcon = (props: Props) => (
+const LayersIcon = (props: TIconProps) => (
{({ css: createClass }) => (
diff --git a/packages/components/icons/src/generated/ListReact.tsx b/packages/components/icons/src/generated/ListReact.tsx
index 23c2017fd8..b65ded2d17 100644
--- a/packages/components/icons/src/generated/ListReact.tsx
+++ b/packages/components/icons/src/generated/ListReact.tsx
@@ -1,134 +1,13 @@
// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
// This file is created with 'yarn generate-icons'.
// Original SVG file: src/svg/list.react.svg
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { warning } from '@commercetools-uikit/utils';
-import { css, ClassNames } from '@emotion/react';
-import { designTokens } from '@commercetools-uikit/design-system';
-export type Props = {
- color?:
- | 'solid'
- | 'neutral60'
- | 'surface'
- | 'info'
- | 'primary'
- | 'primary40'
- | 'warning'
- | 'error'
- | 'success';
- /**
- * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'.
- */
- size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40';
-};
-export type SVGProps = Props & {
- className: string;
-};
-const iconSizes = {
- small: 12,
- medium: 16,
- big: 24,
- '10': 12,
- '20': 16,
- '30': 20,
- '40': 24,
-} as const;
-const getSizeDimensions = (size: Props['size']) => {
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgList = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgList = (props: TSVGProps) => (
);
SvgList.displayName = 'SvgList';
-const ListIcon = (props: Props) => (
+const ListIcon = (props: TIconProps) => (
{({ css: createClass }) => (
diff --git a/packages/components/icons/src/generated/ListWithSearchReact.tsx b/packages/components/icons/src/generated/ListWithSearchReact.tsx
index 64effcce1e..ecda1facb8 100644
--- a/packages/components/icons/src/generated/ListWithSearchReact.tsx
+++ b/packages/components/icons/src/generated/ListWithSearchReact.tsx
@@ -1,134 +1,13 @@
// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
// This file is created with 'yarn generate-icons'.
// Original SVG file: src/svg/list-with-search.react.svg
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { warning } from '@commercetools-uikit/utils';
-import { css, ClassNames } from '@emotion/react';
-import { designTokens } from '@commercetools-uikit/design-system';
-export type Props = {
- color?:
- | 'solid'
- | 'neutral60'
- | 'surface'
- | 'info'
- | 'primary'
- | 'primary40'
- | 'warning'
- | 'error'
- | 'success';
- /**
- * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'.
- */
- size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40';
-};
-export type SVGProps = Props & {
- className: string;
-};
-const iconSizes = {
- small: 12,
- medium: 16,
- big: 24,
- '10': 12,
- '20': 16,
- '30': 20,
- '40': 24,
-} as const;
-const getSizeDimensions = (size: Props['size']) => {
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgListWithSearch = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgListWithSearch = (props: TSVGProps) => (
);
SvgListWithSearch.displayName = 'SvgListWithSearch';
-const ListWithSearchIcon = (props: Props) => (
+const ListWithSearchIcon = (props: TIconProps) => (
{({ css: createClass }) => (
{
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgLock = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgLock = (props: TSVGProps) => (
);
SvgLock.displayName = 'SvgLock';
-const LockIcon = (props: Props) => (
+const LockIcon = (props: TIconProps) => (
{({ css: createClass }) => (
diff --git a/packages/components/icons/src/generated/LogoutReact.tsx b/packages/components/icons/src/generated/LogoutReact.tsx
index 8dba55b90e..bbe3316835 100644
--- a/packages/components/icons/src/generated/LogoutReact.tsx
+++ b/packages/components/icons/src/generated/LogoutReact.tsx
@@ -1,134 +1,13 @@
// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
// This file is created with 'yarn generate-icons'.
// Original SVG file: src/svg/logout.react.svg
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { warning } from '@commercetools-uikit/utils';
-import { css, ClassNames } from '@emotion/react';
-import { designTokens } from '@commercetools-uikit/design-system';
-export type Props = {
- color?:
- | 'solid'
- | 'neutral60'
- | 'surface'
- | 'info'
- | 'primary'
- | 'primary40'
- | 'warning'
- | 'error'
- | 'success';
- /**
- * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'.
- */
- size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40';
-};
-export type SVGProps = Props & {
- className: string;
-};
-const iconSizes = {
- small: 12,
- medium: 16,
- big: 24,
- '10': 12,
- '20': 16,
- '30': 20,
- '40': 24,
-} as const;
-const getSizeDimensions = (size: Props['size']) => {
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgLogout = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgLogout = (props: TSVGProps) => (
);
SvgLogout.displayName = 'SvgLogout';
-const LogoutIcon = (props: Props) => (
+const LogoutIcon = (props: TIconProps) => (
{({ css: createClass }) => (
diff --git a/packages/components/icons/src/generated/MailReact.tsx b/packages/components/icons/src/generated/MailReact.tsx
index df8da59ec8..cca95c843c 100644
--- a/packages/components/icons/src/generated/MailReact.tsx
+++ b/packages/components/icons/src/generated/MailReact.tsx
@@ -1,134 +1,13 @@
// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
// This file is created with 'yarn generate-icons'.
// Original SVG file: src/svg/mail.react.svg
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { warning } from '@commercetools-uikit/utils';
-import { css, ClassNames } from '@emotion/react';
-import { designTokens } from '@commercetools-uikit/design-system';
-export type Props = {
- color?:
- | 'solid'
- | 'neutral60'
- | 'surface'
- | 'info'
- | 'primary'
- | 'primary40'
- | 'warning'
- | 'error'
- | 'success';
- /**
- * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'.
- */
- size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40';
-};
-export type SVGProps = Props & {
- className: string;
-};
-const iconSizes = {
- small: 12,
- medium: 16,
- big: 24,
- '10': 12,
- '20': 16,
- '30': 20,
- '40': 24,
-} as const;
-const getSizeDimensions = (size: Props['size']) => {
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgMail = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgMail = (props: TSVGProps) => (
);
SvgMail.displayName = 'SvgMail';
-const MailIcon = (props: Props) => (
+const MailIcon = (props: TIconProps) => (
{({ css: createClass }) => (
diff --git a/packages/components/icons/src/generated/MinimizeReact.tsx b/packages/components/icons/src/generated/MinimizeReact.tsx
index 1ce6b17104..05a4c34d50 100644
--- a/packages/components/icons/src/generated/MinimizeReact.tsx
+++ b/packages/components/icons/src/generated/MinimizeReact.tsx
@@ -1,134 +1,13 @@
// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
// This file is created with 'yarn generate-icons'.
// Original SVG file: src/svg/minimize.react.svg
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { warning } from '@commercetools-uikit/utils';
-import { css, ClassNames } from '@emotion/react';
-import { designTokens } from '@commercetools-uikit/design-system';
-export type Props = {
- color?:
- | 'solid'
- | 'neutral60'
- | 'surface'
- | 'info'
- | 'primary'
- | 'primary40'
- | 'warning'
- | 'error'
- | 'success';
- /**
- * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'.
- */
- size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40';
-};
-export type SVGProps = Props & {
- className: string;
-};
-const iconSizes = {
- small: 12,
- medium: 16,
- big: 24,
- '10': 12,
- '20': 16,
- '30': 20,
- '40': 24,
-} as const;
-const getSizeDimensions = (size: Props['size']) => {
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgMinimize = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgMinimize = (props: TSVGProps) => (
);
SvgMinimize.displayName = 'SvgMinimize';
-const MinimizeIcon = (props: Props) => (
+const MinimizeIcon = (props: TIconProps) => (
{({ css: createClass }) => (
diff --git a/packages/components/icons/src/generated/NestedViewReact.tsx b/packages/components/icons/src/generated/NestedViewReact.tsx
index 686ce2ec77..88d4389c5a 100644
--- a/packages/components/icons/src/generated/NestedViewReact.tsx
+++ b/packages/components/icons/src/generated/NestedViewReact.tsx
@@ -1,134 +1,13 @@
// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
// This file is created with 'yarn generate-icons'.
// Original SVG file: src/svg/nested-view.react.svg
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { warning } from '@commercetools-uikit/utils';
-import { css, ClassNames } from '@emotion/react';
-import { designTokens } from '@commercetools-uikit/design-system';
-export type Props = {
- color?:
- | 'solid'
- | 'neutral60'
- | 'surface'
- | 'info'
- | 'primary'
- | 'primary40'
- | 'warning'
- | 'error'
- | 'success';
- /**
- * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'.
- */
- size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40';
-};
-export type SVGProps = Props & {
- className: string;
-};
-const iconSizes = {
- small: 12,
- medium: 16,
- big: 24,
- '10': 12,
- '20': 16,
- '30': 20,
- '40': 24,
-} as const;
-const getSizeDimensions = (size: Props['size']) => {
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgNestedView = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgNestedView = (props: TSVGProps) => (
);
SvgNestedView.displayName = 'SvgNestedView';
-const NestedViewIcon = (props: Props) => (
+const NestedViewIcon = (props: TIconProps) => (
{({ css: createClass }) => (
diff --git a/packages/components/icons/src/generated/OperationsReact.tsx b/packages/components/icons/src/generated/OperationsReact.tsx
index c09eb93563..6b723a03bd 100644
--- a/packages/components/icons/src/generated/OperationsReact.tsx
+++ b/packages/components/icons/src/generated/OperationsReact.tsx
@@ -1,134 +1,13 @@
// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
// This file is created with 'yarn generate-icons'.
// Original SVG file: src/svg/operations.react.svg
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { warning } from '@commercetools-uikit/utils';
-import { css, ClassNames } from '@emotion/react';
-import { designTokens } from '@commercetools-uikit/design-system';
-export type Props = {
- color?:
- | 'solid'
- | 'neutral60'
- | 'surface'
- | 'info'
- | 'primary'
- | 'primary40'
- | 'warning'
- | 'error'
- | 'success';
- /**
- * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'.
- */
- size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40';
-};
-export type SVGProps = Props & {
- className: string;
-};
-const iconSizes = {
- small: 12,
- medium: 16,
- big: 24,
- '10': 12,
- '20': 16,
- '30': 20,
- '40': 24,
-} as const;
-const getSizeDimensions = (size: Props['size']) => {
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgOperations = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgOperations = (props: TSVGProps) => (
);
SvgOperations.displayName = 'SvgOperations';
-const OperationsIcon = (props: Props) => (
+const OperationsIcon = (props: TIconProps) => (
{({ css: createClass }) => (
diff --git a/packages/components/icons/src/generated/PageGearReact.tsx b/packages/components/icons/src/generated/PageGearReact.tsx
index df50efbcd4..144d5fc503 100644
--- a/packages/components/icons/src/generated/PageGearReact.tsx
+++ b/packages/components/icons/src/generated/PageGearReact.tsx
@@ -1,134 +1,13 @@
// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
// This file is created with 'yarn generate-icons'.
// Original SVG file: src/svg/page-gear.react.svg
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { warning } from '@commercetools-uikit/utils';
-import { css, ClassNames } from '@emotion/react';
-import { designTokens } from '@commercetools-uikit/design-system';
-export type Props = {
- color?:
- | 'solid'
- | 'neutral60'
- | 'surface'
- | 'info'
- | 'primary'
- | 'primary40'
- | 'warning'
- | 'error'
- | 'success';
- /**
- * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'.
- */
- size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40';
-};
-export type SVGProps = Props & {
- className: string;
-};
-const iconSizes = {
- small: 12,
- medium: 16,
- big: 24,
- '10': 12,
- '20': 16,
- '30': 20,
- '40': 24,
-} as const;
-const getSizeDimensions = (size: Props['size']) => {
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgPageGear = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgPageGear = (props: TSVGProps) => (
);
SvgPageGear.displayName = 'SvgPageGear';
-const PageGearIcon = (props: Props) => (
+const PageGearIcon = (props: TIconProps) => (
{({ css: createClass }) => (
diff --git a/packages/components/icons/src/generated/PagesReact.tsx b/packages/components/icons/src/generated/PagesReact.tsx
index 08416bdb56..75cbba19fd 100644
--- a/packages/components/icons/src/generated/PagesReact.tsx
+++ b/packages/components/icons/src/generated/PagesReact.tsx
@@ -1,134 +1,13 @@
// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
// This file is created with 'yarn generate-icons'.
// Original SVG file: src/svg/pages.react.svg
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { warning } from '@commercetools-uikit/utils';
-import { css, ClassNames } from '@emotion/react';
-import { designTokens } from '@commercetools-uikit/design-system';
-export type Props = {
- color?:
- | 'solid'
- | 'neutral60'
- | 'surface'
- | 'info'
- | 'primary'
- | 'primary40'
- | 'warning'
- | 'error'
- | 'success';
- /**
- * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'.
- */
- size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40';
-};
-export type SVGProps = Props & {
- className: string;
-};
-const iconSizes = {
- small: 12,
- medium: 16,
- big: 24,
- '10': 12,
- '20': 16,
- '30': 20,
- '40': 24,
-} as const;
-const getSizeDimensions = (size: Props['size']) => {
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgPages = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgPages = (props: TSVGProps) => (
);
SvgPages.displayName = 'SvgPages';
-const PagesIcon = (props: Props) => (
+const PagesIcon = (props: TIconProps) => (
{({ css: createClass }) => (
diff --git a/packages/components/icons/src/generated/PaidReact.tsx b/packages/components/icons/src/generated/PaidReact.tsx
index 7d658161be..4800c79eaf 100644
--- a/packages/components/icons/src/generated/PaidReact.tsx
+++ b/packages/components/icons/src/generated/PaidReact.tsx
@@ -1,134 +1,13 @@
// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
// This file is created with 'yarn generate-icons'.
// Original SVG file: src/svg/paid.react.svg
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { warning } from '@commercetools-uikit/utils';
-import { css, ClassNames } from '@emotion/react';
-import { designTokens } from '@commercetools-uikit/design-system';
-export type Props = {
- color?:
- | 'solid'
- | 'neutral60'
- | 'surface'
- | 'info'
- | 'primary'
- | 'primary40'
- | 'warning'
- | 'error'
- | 'success';
- /**
- * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'.
- */
- size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40';
-};
-export type SVGProps = Props & {
- className: string;
-};
-const iconSizes = {
- small: 12,
- medium: 16,
- big: 24,
- '10': 12,
- '20': 16,
- '30': 20,
- '40': 24,
-} as const;
-const getSizeDimensions = (size: Props['size']) => {
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgPaid = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgPaid = (props: TSVGProps) => (
);
SvgPaid.displayName = 'SvgPaid';
-const PaidIcon = (props: Props) => (
+const PaidIcon = (props: TIconProps) => (
{({ css: createClass }) => (
diff --git a/packages/components/icons/src/generated/PaperBillInvertedReact.tsx b/packages/components/icons/src/generated/PaperBillInvertedReact.tsx
index ecfd83d10c..cbca2b5091 100644
--- a/packages/components/icons/src/generated/PaperBillInvertedReact.tsx
+++ b/packages/components/icons/src/generated/PaperBillInvertedReact.tsx
@@ -1,134 +1,13 @@
// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
// This file is created with 'yarn generate-icons'.
// Original SVG file: src/svg/paper-bill-inverted.react.svg
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { warning } from '@commercetools-uikit/utils';
-import { css, ClassNames } from '@emotion/react';
-import { designTokens } from '@commercetools-uikit/design-system';
-export type Props = {
- color?:
- | 'solid'
- | 'neutral60'
- | 'surface'
- | 'info'
- | 'primary'
- | 'primary40'
- | 'warning'
- | 'error'
- | 'success';
- /**
- * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'.
- */
- size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40';
-};
-export type SVGProps = Props & {
- className: string;
-};
-const iconSizes = {
- small: 12,
- medium: 16,
- big: 24,
- '10': 12,
- '20': 16,
- '30': 20,
- '40': 24,
-} as const;
-const getSizeDimensions = (size: Props['size']) => {
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgPaperBillInverted = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgPaperBillInverted = (props: TSVGProps) => (
);
SvgPaperBillInverted.displayName = 'SvgPaperBillInverted';
-const PaperBillInvertedIcon = (props: Props) => (
+const PaperBillInvertedIcon = (props: TIconProps) => (
{({ css: createClass }) => (
{
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgPaperclip = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgPaperclip = (props: TSVGProps) => (
);
SvgPaperclip.displayName = 'SvgPaperclip';
-const PaperclipIcon = (props: Props) => (
+const PaperclipIcon = (props: TIconProps) => (
{({ css: createClass }) => (
diff --git a/packages/components/icons/src/generated/PinFilledReact.tsx b/packages/components/icons/src/generated/PinFilledReact.tsx
index fa1111b80a..a73606a633 100644
--- a/packages/components/icons/src/generated/PinFilledReact.tsx
+++ b/packages/components/icons/src/generated/PinFilledReact.tsx
@@ -1,134 +1,13 @@
// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
// This file is created with 'yarn generate-icons'.
// Original SVG file: src/svg/pin-filled.react.svg
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { warning } from '@commercetools-uikit/utils';
-import { css, ClassNames } from '@emotion/react';
-import { designTokens } from '@commercetools-uikit/design-system';
-export type Props = {
- color?:
- | 'solid'
- | 'neutral60'
- | 'surface'
- | 'info'
- | 'primary'
- | 'primary40'
- | 'warning'
- | 'error'
- | 'success';
- /**
- * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'.
- */
- size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40';
-};
-export type SVGProps = Props & {
- className: string;
-};
-const iconSizes = {
- small: 12,
- medium: 16,
- big: 24,
- '10': 12,
- '20': 16,
- '30': 20,
- '40': 24,
-} as const;
-const getSizeDimensions = (size: Props['size']) => {
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgPinFilled = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgPinFilled = (props: TSVGProps) => (
);
SvgPinFilled.displayName = 'SvgPinFilled';
-const PinFilledIcon = (props: Props) => (
+const PinFilledIcon = (props: TIconProps) => (
{({ css: createClass }) => (
diff --git a/packages/components/icons/src/generated/PinGearReact.tsx b/packages/components/icons/src/generated/PinGearReact.tsx
index 8ddd67f575..4d16222940 100644
--- a/packages/components/icons/src/generated/PinGearReact.tsx
+++ b/packages/components/icons/src/generated/PinGearReact.tsx
@@ -1,134 +1,13 @@
// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
// This file is created with 'yarn generate-icons'.
// Original SVG file: src/svg/pin-gear.react.svg
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { warning } from '@commercetools-uikit/utils';
-import { css, ClassNames } from '@emotion/react';
-import { designTokens } from '@commercetools-uikit/design-system';
-export type Props = {
- color?:
- | 'solid'
- | 'neutral60'
- | 'surface'
- | 'info'
- | 'primary'
- | 'primary40'
- | 'warning'
- | 'error'
- | 'success';
- /**
- * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'.
- */
- size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40';
-};
-export type SVGProps = Props & {
- className: string;
-};
-const iconSizes = {
- small: 12,
- medium: 16,
- big: 24,
- '10': 12,
- '20': 16,
- '30': 20,
- '40': 24,
-} as const;
-const getSizeDimensions = (size: Props['size']) => {
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgPinGear = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgPinGear = (props: TSVGProps) => (
);
SvgPinGear.displayName = 'SvgPinGear';
-const PinGearIcon = (props: Props) => (
+const PinGearIcon = (props: TIconProps) => (
{({ css: createClass }) => (
diff --git a/packages/components/icons/src/generated/PinLinearReact.tsx b/packages/components/icons/src/generated/PinLinearReact.tsx
index bbc999d6a9..ffd5b99f82 100644
--- a/packages/components/icons/src/generated/PinLinearReact.tsx
+++ b/packages/components/icons/src/generated/PinLinearReact.tsx
@@ -1,134 +1,13 @@
// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
// This file is created with 'yarn generate-icons'.
// Original SVG file: src/svg/pin-linear.react.svg
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { warning } from '@commercetools-uikit/utils';
-import { css, ClassNames } from '@emotion/react';
-import { designTokens } from '@commercetools-uikit/design-system';
-export type Props = {
- color?:
- | 'solid'
- | 'neutral60'
- | 'surface'
- | 'info'
- | 'primary'
- | 'primary40'
- | 'warning'
- | 'error'
- | 'success';
- /**
- * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'.
- */
- size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40';
-};
-export type SVGProps = Props & {
- className: string;
-};
-const iconSizes = {
- small: 12,
- medium: 16,
- big: 24,
- '10': 12,
- '20': 16,
- '30': 20,
- '40': 24,
-} as const;
-const getSizeDimensions = (size: Props['size']) => {
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgPinLinear = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgPinLinear = (props: TSVGProps) => (
);
SvgPinLinear.displayName = 'SvgPinLinear';
-const PinLinearIcon = (props: Props) => (
+const PinLinearIcon = (props: TIconProps) => (
{({ css: createClass }) => (
diff --git a/packages/components/icons/src/generated/PluginReact.tsx b/packages/components/icons/src/generated/PluginReact.tsx
index 7a7322ed9b..61faace2f3 100644
--- a/packages/components/icons/src/generated/PluginReact.tsx
+++ b/packages/components/icons/src/generated/PluginReact.tsx
@@ -1,134 +1,13 @@
// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
// This file is created with 'yarn generate-icons'.
// Original SVG file: src/svg/plugin.react.svg
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { warning } from '@commercetools-uikit/utils';
-import { css, ClassNames } from '@emotion/react';
-import { designTokens } from '@commercetools-uikit/design-system';
-export type Props = {
- color?:
- | 'solid'
- | 'neutral60'
- | 'surface'
- | 'info'
- | 'primary'
- | 'primary40'
- | 'warning'
- | 'error'
- | 'success';
- /**
- * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'.
- */
- size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40';
-};
-export type SVGProps = Props & {
- className: string;
-};
-const iconSizes = {
- small: 12,
- medium: 16,
- big: 24,
- '10': 12,
- '20': 16,
- '30': 20,
- '40': 24,
-} as const;
-const getSizeDimensions = (size: Props['size']) => {
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgPlugin = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgPlugin = (props: TSVGProps) => (
);
SvgPlugin.displayName = 'SvgPlugin';
-const PluginIcon = (props: Props) => (
+const PluginIcon = (props: TIconProps) => (
{({ css: createClass }) => (
diff --git a/packages/components/icons/src/generated/PlusBoldReact.tsx b/packages/components/icons/src/generated/PlusBoldReact.tsx
index 0b1dc572ea..0208ee6f5a 100644
--- a/packages/components/icons/src/generated/PlusBoldReact.tsx
+++ b/packages/components/icons/src/generated/PlusBoldReact.tsx
@@ -1,134 +1,13 @@
// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
// This file is created with 'yarn generate-icons'.
// Original SVG file: src/svg/plus-bold.react.svg
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { warning } from '@commercetools-uikit/utils';
-import { css, ClassNames } from '@emotion/react';
-import { designTokens } from '@commercetools-uikit/design-system';
-export type Props = {
- color?:
- | 'solid'
- | 'neutral60'
- | 'surface'
- | 'info'
- | 'primary'
- | 'primary40'
- | 'warning'
- | 'error'
- | 'success';
- /**
- * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'.
- */
- size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40';
-};
-export type SVGProps = Props & {
- className: string;
-};
-const iconSizes = {
- small: 12,
- medium: 16,
- big: 24,
- '10': 12,
- '20': 16,
- '30': 20,
- '40': 24,
-} as const;
-const getSizeDimensions = (size: Props['size']) => {
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgPlusBold = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgPlusBold = (props: TSVGProps) => (
);
SvgPlusBold.displayName = 'SvgPlusBold';
-const PlusBoldIcon = (props: Props) => (
+const PlusBoldIcon = (props: TIconProps) => (
{({ css: createClass }) => (
diff --git a/packages/components/icons/src/generated/PlusThinReact.tsx b/packages/components/icons/src/generated/PlusThinReact.tsx
index 1fdc21c4e5..de998e5e14 100644
--- a/packages/components/icons/src/generated/PlusThinReact.tsx
+++ b/packages/components/icons/src/generated/PlusThinReact.tsx
@@ -1,134 +1,13 @@
// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
// This file is created with 'yarn generate-icons'.
// Original SVG file: src/svg/plus-thin.react.svg
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { warning } from '@commercetools-uikit/utils';
-import { css, ClassNames } from '@emotion/react';
-import { designTokens } from '@commercetools-uikit/design-system';
-export type Props = {
- color?:
- | 'solid'
- | 'neutral60'
- | 'surface'
- | 'info'
- | 'primary'
- | 'primary40'
- | 'warning'
- | 'error'
- | 'success';
- /**
- * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'.
- */
- size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40';
-};
-export type SVGProps = Props & {
- className: string;
-};
-const iconSizes = {
- small: 12,
- medium: 16,
- big: 24,
- '10': 12,
- '20': 16,
- '30': 20,
- '40': 24,
-} as const;
-const getSizeDimensions = (size: Props['size']) => {
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgPlusThin = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgPlusThin = (props: TSVGProps) => (
);
SvgPlusThin.displayName = 'SvgPlusThin';
-const PlusThinIcon = (props: Props) => (
+const PlusThinIcon = (props: TIconProps) => (
{({ css: createClass }) => (
diff --git a/packages/components/icons/src/generated/RefreshReact.tsx b/packages/components/icons/src/generated/RefreshReact.tsx
index e33579becc..2ba8211a82 100644
--- a/packages/components/icons/src/generated/RefreshReact.tsx
+++ b/packages/components/icons/src/generated/RefreshReact.tsx
@@ -1,134 +1,13 @@
// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
// This file is created with 'yarn generate-icons'.
// Original SVG file: src/svg/refresh.react.svg
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { warning } from '@commercetools-uikit/utils';
-import { css, ClassNames } from '@emotion/react';
-import { designTokens } from '@commercetools-uikit/design-system';
-export type Props = {
- color?:
- | 'solid'
- | 'neutral60'
- | 'surface'
- | 'info'
- | 'primary'
- | 'primary40'
- | 'warning'
- | 'error'
- | 'success';
- /**
- * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'.
- */
- size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40';
-};
-export type SVGProps = Props & {
- className: string;
-};
-const iconSizes = {
- small: 12,
- medium: 16,
- big: 24,
- '10': 12,
- '20': 16,
- '30': 20,
- '40': 24,
-} as const;
-const getSizeDimensions = (size: Props['size']) => {
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgRefresh = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgRefresh = (props: TSVGProps) => (
);
SvgRefresh.displayName = 'SvgRefresh';
-const RefreshIcon = (props: Props) => (
+const RefreshIcon = (props: TIconProps) => (
{({ css: createClass }) => (
diff --git a/packages/components/icons/src/generated/RestoreReact.tsx b/packages/components/icons/src/generated/RestoreReact.tsx
index 1ebdcf1e01..dd21c6a20b 100644
--- a/packages/components/icons/src/generated/RestoreReact.tsx
+++ b/packages/components/icons/src/generated/RestoreReact.tsx
@@ -1,134 +1,13 @@
// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
// This file is created with 'yarn generate-icons'.
// Original SVG file: src/svg/restore.react.svg
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { warning } from '@commercetools-uikit/utils';
-import { css, ClassNames } from '@emotion/react';
-import { designTokens } from '@commercetools-uikit/design-system';
-export type Props = {
- color?:
- | 'solid'
- | 'neutral60'
- | 'surface'
- | 'info'
- | 'primary'
- | 'primary40'
- | 'warning'
- | 'error'
- | 'success';
- /**
- * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'.
- */
- size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40';
-};
-export type SVGProps = Props & {
- className: string;
-};
-const iconSizes = {
- small: 12,
- medium: 16,
- big: 24,
- '10': 12,
- '20': 16,
- '30': 20,
- '40': 24,
-} as const;
-const getSizeDimensions = (size: Props['size']) => {
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgRestore = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgRestore = (props: TSVGProps) => (
);
SvgRestore.displayName = 'SvgRestore';
-const RestoreIcon = (props: Props) => (
+const RestoreIcon = (props: TIconProps) => (
{({ css: createClass }) => (
diff --git a/packages/components/icons/src/generated/RevertReact.tsx b/packages/components/icons/src/generated/RevertReact.tsx
index e90623eee9..b76141a17c 100644
--- a/packages/components/icons/src/generated/RevertReact.tsx
+++ b/packages/components/icons/src/generated/RevertReact.tsx
@@ -1,134 +1,13 @@
// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
// This file is created with 'yarn generate-icons'.
// Original SVG file: src/svg/revert.react.svg
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { warning } from '@commercetools-uikit/utils';
-import { css, ClassNames } from '@emotion/react';
-import { designTokens } from '@commercetools-uikit/design-system';
-export type Props = {
- color?:
- | 'solid'
- | 'neutral60'
- | 'surface'
- | 'info'
- | 'primary'
- | 'primary40'
- | 'warning'
- | 'error'
- | 'success';
- /**
- * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'.
- */
- size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40';
-};
-export type SVGProps = Props & {
- className: string;
-};
-const iconSizes = {
- small: 12,
- medium: 16,
- big: 24,
- '10': 12,
- '20': 16,
- '30': 20,
- '40': 24,
-} as const;
-const getSizeDimensions = (size: Props['size']) => {
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgRevert = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgRevert = (props: TSVGProps) => (
);
SvgRevert.displayName = 'SvgRevert';
-const RevertIcon = (props: Props) => (
+const RevertIcon = (props: TIconProps) => (
{({ css: createClass }) => (
diff --git a/packages/components/icons/src/generated/ReviewReact.tsx b/packages/components/icons/src/generated/ReviewReact.tsx
index 58f969b495..74b08f8308 100644
--- a/packages/components/icons/src/generated/ReviewReact.tsx
+++ b/packages/components/icons/src/generated/ReviewReact.tsx
@@ -1,134 +1,13 @@
// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
// This file is created with 'yarn generate-icons'.
// Original SVG file: src/svg/review.react.svg
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { warning } from '@commercetools-uikit/utils';
-import { css, ClassNames } from '@emotion/react';
-import { designTokens } from '@commercetools-uikit/design-system';
-export type Props = {
- color?:
- | 'solid'
- | 'neutral60'
- | 'surface'
- | 'info'
- | 'primary'
- | 'primary40'
- | 'warning'
- | 'error'
- | 'success';
- /**
- * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'.
- */
- size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40';
-};
-export type SVGProps = Props & {
- className: string;
-};
-const iconSizes = {
- small: 12,
- medium: 16,
- big: 24,
- '10': 12,
- '20': 16,
- '30': 20,
- '40': 24,
-} as const;
-const getSizeDimensions = (size: Props['size']) => {
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgReview = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgReview = (props: TSVGProps) => (
);
SvgReview.displayName = 'SvgReview';
-const ReviewIcon = (props: Props) => (
+const ReviewIcon = (props: TIconProps) => (
{({ css: createClass }) => (
diff --git a/packages/components/icons/src/generated/RightTriangleFilledReact.tsx b/packages/components/icons/src/generated/RightTriangleFilledReact.tsx
index f71c7b437d..663930d0de 100644
--- a/packages/components/icons/src/generated/RightTriangleFilledReact.tsx
+++ b/packages/components/icons/src/generated/RightTriangleFilledReact.tsx
@@ -1,134 +1,13 @@
// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
// This file is created with 'yarn generate-icons'.
// Original SVG file: src/svg/right-triangle-filled.react.svg
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { warning } from '@commercetools-uikit/utils';
-import { css, ClassNames } from '@emotion/react';
-import { designTokens } from '@commercetools-uikit/design-system';
-export type Props = {
- color?:
- | 'solid'
- | 'neutral60'
- | 'surface'
- | 'info'
- | 'primary'
- | 'primary40'
- | 'warning'
- | 'error'
- | 'success';
- /**
- * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'.
- */
- size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40';
-};
-export type SVGProps = Props & {
- className: string;
-};
-const iconSizes = {
- small: 12,
- medium: 16,
- big: 24,
- '10': 12,
- '20': 16,
- '30': 20,
- '40': 24,
-} as const;
-const getSizeDimensions = (size: Props['size']) => {
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgRightTriangleFilled = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgRightTriangleFilled = (props: TSVGProps) => (
);
SvgRightTriangleFilled.displayName = 'SvgRightTriangleFilled';
-const RightTriangleFilledIcon = (props: Props) => (
+const RightTriangleFilledIcon = (props: TIconProps) => (
{({ css: createClass }) => (
{
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgRightTriangleLinear = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgRightTriangleLinear = (props: TSVGProps) => (
);
SvgRightTriangleLinear.displayName = 'SvgRightTriangleLinear';
-const RightTriangleLinearIcon = (props: Props) => (
+const RightTriangleLinearIcon = (props: TIconProps) => (
{({ css: createClass }) => (
{
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgRocket = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgRocket = (props: TSVGProps) => (
);
SvgRocket.displayName = 'SvgRocket';
-const RocketIcon = (props: Props) => (
+const RocketIcon = (props: TIconProps) => (
{({ css: createClass }) => (
diff --git a/packages/components/icons/src/generated/ScreenGearReact.tsx b/packages/components/icons/src/generated/ScreenGearReact.tsx
index 5e2e674ed0..8385398250 100644
--- a/packages/components/icons/src/generated/ScreenGearReact.tsx
+++ b/packages/components/icons/src/generated/ScreenGearReact.tsx
@@ -1,134 +1,13 @@
// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
// This file is created with 'yarn generate-icons'.
// Original SVG file: src/svg/screen-gear.react.svg
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { warning } from '@commercetools-uikit/utils';
-import { css, ClassNames } from '@emotion/react';
-import { designTokens } from '@commercetools-uikit/design-system';
-export type Props = {
- color?:
- | 'solid'
- | 'neutral60'
- | 'surface'
- | 'info'
- | 'primary'
- | 'primary40'
- | 'warning'
- | 'error'
- | 'success';
- /**
- * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'.
- */
- size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40';
-};
-export type SVGProps = Props & {
- className: string;
-};
-const iconSizes = {
- small: 12,
- medium: 16,
- big: 24,
- '10': 12,
- '20': 16,
- '30': 20,
- '40': 24,
-} as const;
-const getSizeDimensions = (size: Props['size']) => {
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgScreenGear = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgScreenGear = (props: TSVGProps) => (
);
SvgScreenGear.displayName = 'SvgScreenGear';
-const ScreenGearIcon = (props: Props) => (
+const ScreenGearIcon = (props: TIconProps) => (
{({ css: createClass }) => (
diff --git a/packages/components/icons/src/generated/ScreenUserReact.tsx b/packages/components/icons/src/generated/ScreenUserReact.tsx
index e1dccd406e..bb55c2d906 100644
--- a/packages/components/icons/src/generated/ScreenUserReact.tsx
+++ b/packages/components/icons/src/generated/ScreenUserReact.tsx
@@ -1,134 +1,13 @@
// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
// This file is created with 'yarn generate-icons'.
// Original SVG file: src/svg/screen-user.react.svg
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { warning } from '@commercetools-uikit/utils';
-import { css, ClassNames } from '@emotion/react';
-import { designTokens } from '@commercetools-uikit/design-system';
-export type Props = {
- color?:
- | 'solid'
- | 'neutral60'
- | 'surface'
- | 'info'
- | 'primary'
- | 'primary40'
- | 'warning'
- | 'error'
- | 'success';
- /**
- * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'.
- */
- size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40';
-};
-export type SVGProps = Props & {
- className: string;
-};
-const iconSizes = {
- small: 12,
- medium: 16,
- big: 24,
- '10': 12,
- '20': 16,
- '30': 20,
- '40': 24,
-} as const;
-const getSizeDimensions = (size: Props['size']) => {
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgScreenUser = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgScreenUser = (props: TSVGProps) => (
);
SvgScreenUser.displayName = 'SvgScreenUser';
-const ScreenUserIcon = (props: Props) => (
+const ScreenUserIcon = (props: TIconProps) => (
{({ css: createClass }) => (
diff --git a/packages/components/icons/src/generated/SearchReact.tsx b/packages/components/icons/src/generated/SearchReact.tsx
index a8bb1bb9fb..56dbc1a781 100644
--- a/packages/components/icons/src/generated/SearchReact.tsx
+++ b/packages/components/icons/src/generated/SearchReact.tsx
@@ -1,134 +1,13 @@
// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
// This file is created with 'yarn generate-icons'.
// Original SVG file: src/svg/search.react.svg
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { warning } from '@commercetools-uikit/utils';
-import { css, ClassNames } from '@emotion/react';
-import { designTokens } from '@commercetools-uikit/design-system';
-export type Props = {
- color?:
- | 'solid'
- | 'neutral60'
- | 'surface'
- | 'info'
- | 'primary'
- | 'primary40'
- | 'warning'
- | 'error'
- | 'success';
- /**
- * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'.
- */
- size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40';
-};
-export type SVGProps = Props & {
- className: string;
-};
-const iconSizes = {
- small: 12,
- medium: 16,
- big: 24,
- '10': 12,
- '20': 16,
- '30': 20,
- '40': 24,
-} as const;
-const getSizeDimensions = (size: Props['size']) => {
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgSearch = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgSearch = (props: TSVGProps) => (
);
SvgSearch.displayName = 'SvgSearch';
-const SearchIcon = (props: Props) => (
+const SearchIcon = (props: TIconProps) => (
{({ css: createClass }) => (
diff --git a/packages/components/icons/src/generated/SidebarCollapseReact.tsx b/packages/components/icons/src/generated/SidebarCollapseReact.tsx
index eed8a36d01..f9a1c3bf87 100644
--- a/packages/components/icons/src/generated/SidebarCollapseReact.tsx
+++ b/packages/components/icons/src/generated/SidebarCollapseReact.tsx
@@ -1,134 +1,13 @@
// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
// This file is created with 'yarn generate-icons'.
// Original SVG file: src/svg/sidebar-collapse.react.svg
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { warning } from '@commercetools-uikit/utils';
-import { css, ClassNames } from '@emotion/react';
-import { designTokens } from '@commercetools-uikit/design-system';
-export type Props = {
- color?:
- | 'solid'
- | 'neutral60'
- | 'surface'
- | 'info'
- | 'primary'
- | 'primary40'
- | 'warning'
- | 'error'
- | 'success';
- /**
- * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'.
- */
- size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40';
-};
-export type SVGProps = Props & {
- className: string;
-};
-const iconSizes = {
- small: 12,
- medium: 16,
- big: 24,
- '10': 12,
- '20': 16,
- '30': 20,
- '40': 24,
-} as const;
-const getSizeDimensions = (size: Props['size']) => {
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgSidebarCollapse = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgSidebarCollapse = (props: TSVGProps) => (
);
SvgSidebarCollapse.displayName = 'SvgSidebarCollapse';
-const SidebarCollapseIcon = (props: Props) => (
+const SidebarCollapseIcon = (props: TIconProps) => (
{({ css: createClass }) => (
{
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgSidebarExpand = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgSidebarExpand = (props: TSVGProps) => (
);
SvgSidebarExpand.displayName = 'SvgSidebarExpand';
-const SidebarExpandIcon = (props: Props) => (
+const SidebarExpandIcon = (props: TIconProps) => (
{({ css: createClass }) => (
{
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgSorting = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgSorting = (props: TSVGProps) => (
);
SvgSorting.displayName = 'SvgSorting';
-const SortingIcon = (props: Props) => (
+const SortingIcon = (props: TIconProps) => (
{({ css: createClass }) => (
diff --git a/packages/components/icons/src/generated/SpeechBubbleReact.tsx b/packages/components/icons/src/generated/SpeechBubbleReact.tsx
index cbe2481c4b..7c5c56bdbd 100644
--- a/packages/components/icons/src/generated/SpeechBubbleReact.tsx
+++ b/packages/components/icons/src/generated/SpeechBubbleReact.tsx
@@ -1,134 +1,13 @@
// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
// This file is created with 'yarn generate-icons'.
// Original SVG file: src/svg/speech-bubble.react.svg
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { warning } from '@commercetools-uikit/utils';
-import { css, ClassNames } from '@emotion/react';
-import { designTokens } from '@commercetools-uikit/design-system';
-export type Props = {
- color?:
- | 'solid'
- | 'neutral60'
- | 'surface'
- | 'info'
- | 'primary'
- | 'primary40'
- | 'warning'
- | 'error'
- | 'success';
- /**
- * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'.
- */
- size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40';
-};
-export type SVGProps = Props & {
- className: string;
-};
-const iconSizes = {
- small: 12,
- medium: 16,
- big: 24,
- '10': 12,
- '20': 16,
- '30': 20,
- '40': 24,
-} as const;
-const getSizeDimensions = (size: Props['size']) => {
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgSpeechBubble = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgSpeechBubble = (props: TSVGProps) => (
);
SvgSpeechBubble.displayName = 'SvgSpeechBubble';
-const SpeechBubbleIcon = (props: Props) => (
+const SpeechBubbleIcon = (props: TIconProps) => (
{({ css: createClass }) => (
{
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgSpeedometer = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgSpeedometer = (props: TSVGProps) => (
);
SvgSpeedometer.displayName = 'SvgSpeedometer';
-const SpeedometerIcon = (props: Props) => (
+const SpeedometerIcon = (props: TIconProps) => (
{({ css: createClass }) => (
{
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgSplit = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgSplit = (props: TSVGProps) => (
);
SvgSplit.displayName = 'SvgSplit';
-const SplitIcon = (props: Props) => (
+const SplitIcon = (props: TIconProps) => (
{({ css: createClass }) => (
diff --git a/packages/components/icons/src/generated/StackReact.tsx b/packages/components/icons/src/generated/StackReact.tsx
index b24b296696..9a9e77af83 100644
--- a/packages/components/icons/src/generated/StackReact.tsx
+++ b/packages/components/icons/src/generated/StackReact.tsx
@@ -1,134 +1,13 @@
// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
// This file is created with 'yarn generate-icons'.
// Original SVG file: src/svg/stack.react.svg
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { warning } from '@commercetools-uikit/utils';
-import { css, ClassNames } from '@emotion/react';
-import { designTokens } from '@commercetools-uikit/design-system';
-export type Props = {
- color?:
- | 'solid'
- | 'neutral60'
- | 'surface'
- | 'info'
- | 'primary'
- | 'primary40'
- | 'warning'
- | 'error'
- | 'success';
- /**
- * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'.
- */
- size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40';
-};
-export type SVGProps = Props & {
- className: string;
-};
-const iconSizes = {
- small: 12,
- medium: 16,
- big: 24,
- '10': 12,
- '20': 16,
- '30': 20,
- '40': 24,
-} as const;
-const getSizeDimensions = (size: Props['size']) => {
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgStack = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgStack = (props: TSVGProps) => (
);
SvgStack.displayName = 'SvgStack';
-const StackIcon = (props: Props) => (
+const StackIcon = (props: TIconProps) => (
{({ css: createClass }) => (
diff --git a/packages/components/icons/src/generated/StarReact.tsx b/packages/components/icons/src/generated/StarReact.tsx
index 7c8335c4f0..e3c7f7e75e 100644
--- a/packages/components/icons/src/generated/StarReact.tsx
+++ b/packages/components/icons/src/generated/StarReact.tsx
@@ -1,134 +1,13 @@
// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
// This file is created with 'yarn generate-icons'.
// Original SVG file: src/svg/star.react.svg
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { warning } from '@commercetools-uikit/utils';
-import { css, ClassNames } from '@emotion/react';
-import { designTokens } from '@commercetools-uikit/design-system';
-export type Props = {
- color?:
- | 'solid'
- | 'neutral60'
- | 'surface'
- | 'info'
- | 'primary'
- | 'primary40'
- | 'warning'
- | 'error'
- | 'success';
- /**
- * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'.
- */
- size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40';
-};
-export type SVGProps = Props & {
- className: string;
-};
-const iconSizes = {
- small: 12,
- medium: 16,
- big: 24,
- '10': 12,
- '20': 16,
- '30': 20,
- '40': 24,
-} as const;
-const getSizeDimensions = (size: Props['size']) => {
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgStar = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgStar = (props: TSVGProps) => (
);
SvgStar.displayName = 'SvgStar';
-const StarIcon = (props: Props) => (
+const StarIcon = (props: TIconProps) => (
{({ css: createClass }) => (
diff --git a/packages/components/icons/src/generated/SubdirectoryArrowReact.tsx b/packages/components/icons/src/generated/SubdirectoryArrowReact.tsx
index 8198dc5227..42b1df3ae3 100644
--- a/packages/components/icons/src/generated/SubdirectoryArrowReact.tsx
+++ b/packages/components/icons/src/generated/SubdirectoryArrowReact.tsx
@@ -1,134 +1,13 @@
// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
// This file is created with 'yarn generate-icons'.
// Original SVG file: src/svg/subdirectory-arrow.react.svg
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { warning } from '@commercetools-uikit/utils';
-import { css, ClassNames } from '@emotion/react';
-import { designTokens } from '@commercetools-uikit/design-system';
-export type Props = {
- color?:
- | 'solid'
- | 'neutral60'
- | 'surface'
- | 'info'
- | 'primary'
- | 'primary40'
- | 'warning'
- | 'error'
- | 'success';
- /**
- * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'.
- */
- size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40';
-};
-export type SVGProps = Props & {
- className: string;
-};
-const iconSizes = {
- small: 12,
- medium: 16,
- big: 24,
- '10': 12,
- '20': 16,
- '30': 20,
- '40': 24,
-} as const;
-const getSizeDimensions = (size: Props['size']) => {
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgSubdirectoryArrow = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgSubdirectoryArrow = (props: TSVGProps) => (
);
SvgSubdirectoryArrow.displayName = 'SvgSubdirectoryArrow';
-const SubdirectoryArrowIcon = (props: Props) => (
+const SubdirectoryArrowIcon = (props: TIconProps) => (
{({ css: createClass }) => (
{
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgSupport = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgSupport = (props: TSVGProps) => (
);
SvgSupport.displayName = 'SvgSupport';
-const SupportIcon = (props: Props) => (
+const SupportIcon = (props: TIconProps) => (
{({ css: createClass }) => (
diff --git a/packages/components/icons/src/generated/SwitcherReact.tsx b/packages/components/icons/src/generated/SwitcherReact.tsx
index d26e0db41c..1f90f0d0c5 100644
--- a/packages/components/icons/src/generated/SwitcherReact.tsx
+++ b/packages/components/icons/src/generated/SwitcherReact.tsx
@@ -1,134 +1,13 @@
// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
// This file is created with 'yarn generate-icons'.
// Original SVG file: src/svg/switcher.react.svg
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { warning } from '@commercetools-uikit/utils';
-import { css, ClassNames } from '@emotion/react';
-import { designTokens } from '@commercetools-uikit/design-system';
-export type Props = {
- color?:
- | 'solid'
- | 'neutral60'
- | 'surface'
- | 'info'
- | 'primary'
- | 'primary40'
- | 'warning'
- | 'error'
- | 'success';
- /**
- * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'.
- */
- size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40';
-};
-export type SVGProps = Props & {
- className: string;
-};
-const iconSizes = {
- small: 12,
- medium: 16,
- big: 24,
- '10': 12,
- '20': 16,
- '30': 20,
- '40': 24,
-} as const;
-const getSizeDimensions = (size: Props['size']) => {
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgSwitcher = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgSwitcher = (props: TSVGProps) => (
);
SvgSwitcher.displayName = 'SvgSwitcher';
-const SwitcherIcon = (props: Props) => (
+const SwitcherIcon = (props: TIconProps) => (
{({ css: createClass }) => (
diff --git a/packages/components/icons/src/generated/TableReact.tsx b/packages/components/icons/src/generated/TableReact.tsx
index e60c8eaa3e..e75ba1f870 100644
--- a/packages/components/icons/src/generated/TableReact.tsx
+++ b/packages/components/icons/src/generated/TableReact.tsx
@@ -1,134 +1,13 @@
// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
// This file is created with 'yarn generate-icons'.
// Original SVG file: src/svg/table.react.svg
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { warning } from '@commercetools-uikit/utils';
-import { css, ClassNames } from '@emotion/react';
-import { designTokens } from '@commercetools-uikit/design-system';
-export type Props = {
- color?:
- | 'solid'
- | 'neutral60'
- | 'surface'
- | 'info'
- | 'primary'
- | 'primary40'
- | 'warning'
- | 'error'
- | 'success';
- /**
- * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'.
- */
- size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40';
-};
-export type SVGProps = Props & {
- className: string;
-};
-const iconSizes = {
- small: 12,
- medium: 16,
- big: 24,
- '10': 12,
- '20': 16,
- '30': 20,
- '40': 24,
-} as const;
-const getSizeDimensions = (size: Props['size']) => {
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgTable = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgTable = (props: TSVGProps) => (
);
SvgTable.displayName = 'SvgTable';
-const TableIcon = (props: Props) => (
+const TableIcon = (props: TIconProps) => (
{({ css: createClass }) => (
diff --git a/packages/components/icons/src/generated/TagMultiReact.tsx b/packages/components/icons/src/generated/TagMultiReact.tsx
index cc8d14ffeb..87576ec6d1 100644
--- a/packages/components/icons/src/generated/TagMultiReact.tsx
+++ b/packages/components/icons/src/generated/TagMultiReact.tsx
@@ -1,134 +1,13 @@
// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
// This file is created with 'yarn generate-icons'.
// Original SVG file: src/svg/tag-multi.react.svg
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { warning } from '@commercetools-uikit/utils';
-import { css, ClassNames } from '@emotion/react';
-import { designTokens } from '@commercetools-uikit/design-system';
-export type Props = {
- color?:
- | 'solid'
- | 'neutral60'
- | 'surface'
- | 'info'
- | 'primary'
- | 'primary40'
- | 'warning'
- | 'error'
- | 'success';
- /**
- * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'.
- */
- size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40';
-};
-export type SVGProps = Props & {
- className: string;
-};
-const iconSizes = {
- small: 12,
- medium: 16,
- big: 24,
- '10': 12,
- '20': 16,
- '30': 20,
- '40': 24,
-} as const;
-const getSizeDimensions = (size: Props['size']) => {
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgTagMulti = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgTagMulti = (props: TSVGProps) => (
);
SvgTagMulti.displayName = 'SvgTagMulti';
-const TagMultiIcon = (props: Props) => (
+const TagMultiIcon = (props: TIconProps) => (
{({ css: createClass }) => (
diff --git a/packages/components/icons/src/generated/TagReact.tsx b/packages/components/icons/src/generated/TagReact.tsx
index 13b92ac0ee..f8fe4cc33d 100644
--- a/packages/components/icons/src/generated/TagReact.tsx
+++ b/packages/components/icons/src/generated/TagReact.tsx
@@ -1,134 +1,13 @@
// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
// This file is created with 'yarn generate-icons'.
// Original SVG file: src/svg/tag.react.svg
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { warning } from '@commercetools-uikit/utils';
-import { css, ClassNames } from '@emotion/react';
-import { designTokens } from '@commercetools-uikit/design-system';
-export type Props = {
- color?:
- | 'solid'
- | 'neutral60'
- | 'surface'
- | 'info'
- | 'primary'
- | 'primary40'
- | 'warning'
- | 'error'
- | 'success';
- /**
- * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'.
- */
- size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40';
-};
-export type SVGProps = Props & {
- className: string;
-};
-const iconSizes = {
- small: 12,
- medium: 16,
- big: 24,
- '10': 12,
- '20': 16,
- '30': 20,
- '40': 24,
-} as const;
-const getSizeDimensions = (size: Props['size']) => {
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgTag = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgTag = (props: TSVGProps) => (
);
SvgTag.displayName = 'SvgTag';
-const TagIcon = (props: Props) => (
+const TagIcon = (props: TIconProps) => (
{({ css: createClass }) => (
diff --git a/packages/components/icons/src/generated/TagStackedReact.tsx b/packages/components/icons/src/generated/TagStackedReact.tsx
index 108de0bb22..4c048cce9c 100644
--- a/packages/components/icons/src/generated/TagStackedReact.tsx
+++ b/packages/components/icons/src/generated/TagStackedReact.tsx
@@ -1,134 +1,13 @@
// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
// This file is created with 'yarn generate-icons'.
// Original SVG file: src/svg/tag-stacked.react.svg
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { warning } from '@commercetools-uikit/utils';
-import { css, ClassNames } from '@emotion/react';
-import { designTokens } from '@commercetools-uikit/design-system';
-export type Props = {
- color?:
- | 'solid'
- | 'neutral60'
- | 'surface'
- | 'info'
- | 'primary'
- | 'primary40'
- | 'warning'
- | 'error'
- | 'success';
- /**
- * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'.
- */
- size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40';
-};
-export type SVGProps = Props & {
- className: string;
-};
-const iconSizes = {
- small: 12,
- medium: 16,
- big: 24,
- '10': 12,
- '20': 16,
- '30': 20,
- '40': 24,
-} as const;
-const getSizeDimensions = (size: Props['size']) => {
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgTagStacked = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgTagStacked = (props: TSVGProps) => (
);
SvgTagStacked.displayName = 'SvgTagStacked';
-const TagStackedIcon = (props: Props) => (
+const TagStackedIcon = (props: TIconProps) => (
{({ css: createClass }) => (
diff --git a/packages/components/icons/src/generated/TerminalReact.tsx b/packages/components/icons/src/generated/TerminalReact.tsx
index 9065b1b202..89786f9bcb 100644
--- a/packages/components/icons/src/generated/TerminalReact.tsx
+++ b/packages/components/icons/src/generated/TerminalReact.tsx
@@ -1,134 +1,13 @@
// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
// This file is created with 'yarn generate-icons'.
// Original SVG file: src/svg/terminal.react.svg
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { warning } from '@commercetools-uikit/utils';
-import { css, ClassNames } from '@emotion/react';
-import { designTokens } from '@commercetools-uikit/design-system';
-export type Props = {
- color?:
- | 'solid'
- | 'neutral60'
- | 'surface'
- | 'info'
- | 'primary'
- | 'primary40'
- | 'warning'
- | 'error'
- | 'success';
- /**
- * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'.
- */
- size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40';
-};
-export type SVGProps = Props & {
- className: string;
-};
-const iconSizes = {
- small: 12,
- medium: 16,
- big: 24,
- '10': 12,
- '20': 16,
- '30': 20,
- '40': 24,
-} as const;
-const getSizeDimensions = (size: Props['size']) => {
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgTerminal = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgTerminal = (props: TSVGProps) => (
);
SvgTerminal.displayName = 'SvgTerminal';
-const TerminalIcon = (props: Props) => (
+const TerminalIcon = (props: TIconProps) => (
{({ css: createClass }) => (
diff --git a/packages/components/icons/src/generated/TreeStructureReact.tsx b/packages/components/icons/src/generated/TreeStructureReact.tsx
index 0801c5e065..8fdff6fc6b 100644
--- a/packages/components/icons/src/generated/TreeStructureReact.tsx
+++ b/packages/components/icons/src/generated/TreeStructureReact.tsx
@@ -1,134 +1,13 @@
// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
// This file is created with 'yarn generate-icons'.
// Original SVG file: src/svg/tree-structure.react.svg
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { warning } from '@commercetools-uikit/utils';
-import { css, ClassNames } from '@emotion/react';
-import { designTokens } from '@commercetools-uikit/design-system';
-export type Props = {
- color?:
- | 'solid'
- | 'neutral60'
- | 'surface'
- | 'info'
- | 'primary'
- | 'primary40'
- | 'warning'
- | 'error'
- | 'success';
- /**
- * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'.
- */
- size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40';
-};
-export type SVGProps = Props & {
- className: string;
-};
-const iconSizes = {
- small: 12,
- medium: 16,
- big: 24,
- '10': 12,
- '20': 16,
- '30': 20,
- '40': 24,
-} as const;
-const getSizeDimensions = (size: Props['size']) => {
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgTreeStructure = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgTreeStructure = (props: TSVGProps) => (
);
SvgTreeStructure.displayName = 'SvgTreeStructure';
-const TreeStructureIcon = (props: Props) => (
+const TreeStructureIcon = (props: TIconProps) => (
{({ css: createClass }) => (
{
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgTruck = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgTruck = (props: TSVGProps) => (
);
SvgTruck.displayName = 'SvgTruck';
-const TruckIcon = (props: Props) => (
+const TruckIcon = (props: TIconProps) => (
{({ css: createClass }) => (
diff --git a/packages/components/icons/src/generated/TuneReact.tsx b/packages/components/icons/src/generated/TuneReact.tsx
index 28f332847e..1e21db0b1f 100644
--- a/packages/components/icons/src/generated/TuneReact.tsx
+++ b/packages/components/icons/src/generated/TuneReact.tsx
@@ -1,134 +1,13 @@
// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
// This file is created with 'yarn generate-icons'.
// Original SVG file: src/svg/tune.react.svg
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { warning } from '@commercetools-uikit/utils';
-import { css, ClassNames } from '@emotion/react';
-import { designTokens } from '@commercetools-uikit/design-system';
-export type Props = {
- color?:
- | 'solid'
- | 'neutral60'
- | 'surface'
- | 'info'
- | 'primary'
- | 'primary40'
- | 'warning'
- | 'error'
- | 'success';
- /**
- * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'.
- */
- size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40';
-};
-export type SVGProps = Props & {
- className: string;
-};
-const iconSizes = {
- small: 12,
- medium: 16,
- big: 24,
- '10': 12,
- '20': 16,
- '30': 20,
- '40': 24,
-} as const;
-const getSizeDimensions = (size: Props['size']) => {
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgTune = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgTune = (props: TSVGProps) => (
);
SvgTune.displayName = 'SvgTune';
-const TuneIcon = (props: Props) => (
+const TuneIcon = (props: TIconProps) => (
{({ css: createClass }) => (
diff --git a/packages/components/icons/src/generated/UserFilledReact.tsx b/packages/components/icons/src/generated/UserFilledReact.tsx
index 43de6e57d6..2b85b44d14 100644
--- a/packages/components/icons/src/generated/UserFilledReact.tsx
+++ b/packages/components/icons/src/generated/UserFilledReact.tsx
@@ -1,134 +1,13 @@
// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
// This file is created with 'yarn generate-icons'.
// Original SVG file: src/svg/user-filled.react.svg
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { warning } from '@commercetools-uikit/utils';
-import { css, ClassNames } from '@emotion/react';
-import { designTokens } from '@commercetools-uikit/design-system';
-export type Props = {
- color?:
- | 'solid'
- | 'neutral60'
- | 'surface'
- | 'info'
- | 'primary'
- | 'primary40'
- | 'warning'
- | 'error'
- | 'success';
- /**
- * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'.
- */
- size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40';
-};
-export type SVGProps = Props & {
- className: string;
-};
-const iconSizes = {
- small: 12,
- medium: 16,
- big: 24,
- '10': 12,
- '20': 16,
- '30': 20,
- '40': 24,
-} as const;
-const getSizeDimensions = (size: Props['size']) => {
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgUserFilled = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgUserFilled = (props: TSVGProps) => (
);
SvgUserFilled.displayName = 'SvgUserFilled';
-const UserFilledIcon = (props: Props) => (
+const UserFilledIcon = (props: TIconProps) => (
{({ css: createClass }) => (
diff --git a/packages/components/icons/src/generated/UserLinearReact.tsx b/packages/components/icons/src/generated/UserLinearReact.tsx
index 10c5bbb034..b8646e7bb1 100644
--- a/packages/components/icons/src/generated/UserLinearReact.tsx
+++ b/packages/components/icons/src/generated/UserLinearReact.tsx
@@ -1,134 +1,13 @@
// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
// This file is created with 'yarn generate-icons'.
// Original SVG file: src/svg/user-linear.react.svg
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { warning } from '@commercetools-uikit/utils';
-import { css, ClassNames } from '@emotion/react';
-import { designTokens } from '@commercetools-uikit/design-system';
-export type Props = {
- color?:
- | 'solid'
- | 'neutral60'
- | 'surface'
- | 'info'
- | 'primary'
- | 'primary40'
- | 'warning'
- | 'error'
- | 'success';
- /**
- * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'.
- */
- size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40';
-};
-export type SVGProps = Props & {
- className: string;
-};
-const iconSizes = {
- small: 12,
- medium: 16,
- big: 24,
- '10': 12,
- '20': 16,
- '30': 20,
- '40': 24,
-} as const;
-const getSizeDimensions = (size: Props['size']) => {
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgUserLinear = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgUserLinear = (props: TSVGProps) => (
);
SvgUserLinear.displayName = 'SvgUserLinear';
-const UserLinearIcon = (props: Props) => (
+const UserLinearIcon = (props: TIconProps) => (
{({ css: createClass }) => (
diff --git a/packages/components/icons/src/generated/UsersReact.tsx b/packages/components/icons/src/generated/UsersReact.tsx
index 8f3091ba2d..9291122596 100644
--- a/packages/components/icons/src/generated/UsersReact.tsx
+++ b/packages/components/icons/src/generated/UsersReact.tsx
@@ -1,134 +1,13 @@
// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
// This file is created with 'yarn generate-icons'.
// Original SVG file: src/svg/users.react.svg
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { warning } from '@commercetools-uikit/utils';
-import { css, ClassNames } from '@emotion/react';
-import { designTokens } from '@commercetools-uikit/design-system';
-export type Props = {
- color?:
- | 'solid'
- | 'neutral60'
- | 'surface'
- | 'info'
- | 'primary'
- | 'primary40'
- | 'warning'
- | 'error'
- | 'success';
- /**
- * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'.
- */
- size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40';
-};
-export type SVGProps = Props & {
- className: string;
-};
-const iconSizes = {
- small: 12,
- medium: 16,
- big: 24,
- '10': 12,
- '20': 16,
- '30': 20,
- '40': 24,
-} as const;
-const getSizeDimensions = (size: Props['size']) => {
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgUsers = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgUsers = (props: TSVGProps) => (
);
SvgUsers.displayName = 'SvgUsers';
-const UsersIcon = (props: Props) => (
+const UsersIcon = (props: TIconProps) => (
{({ css: createClass }) => (
diff --git a/packages/components/icons/src/generated/VerifiedReact.tsx b/packages/components/icons/src/generated/VerifiedReact.tsx
index 557c59a9bc..4a9d02f4af 100644
--- a/packages/components/icons/src/generated/VerifiedReact.tsx
+++ b/packages/components/icons/src/generated/VerifiedReact.tsx
@@ -1,134 +1,13 @@
// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
// This file is created with 'yarn generate-icons'.
// Original SVG file: src/svg/verified.react.svg
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { warning } from '@commercetools-uikit/utils';
-import { css, ClassNames } from '@emotion/react';
-import { designTokens } from '@commercetools-uikit/design-system';
-export type Props = {
- color?:
- | 'solid'
- | 'neutral60'
- | 'surface'
- | 'info'
- | 'primary'
- | 'primary40'
- | 'warning'
- | 'error'
- | 'success';
- /**
- * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'.
- */
- size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40';
-};
-export type SVGProps = Props & {
- className: string;
-};
-const iconSizes = {
- small: 12,
- medium: 16,
- big: 24,
- '10': 12,
- '20': 16,
- '30': 20,
- '40': 24,
-} as const;
-const getSizeDimensions = (size: Props['size']) => {
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgVerified = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgVerified = (props: TSVGProps) => (
);
SvgVerified.displayName = 'SvgVerified';
-const VerifiedIcon = (props: Props) => (
+const VerifiedIcon = (props: TIconProps) => (
{({ css: createClass }) => (
diff --git a/packages/components/icons/src/generated/ViewGridPlusReact.tsx b/packages/components/icons/src/generated/ViewGridPlusReact.tsx
index 1bc0860d72..db7bc7ccc4 100644
--- a/packages/components/icons/src/generated/ViewGridPlusReact.tsx
+++ b/packages/components/icons/src/generated/ViewGridPlusReact.tsx
@@ -1,134 +1,13 @@
// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
// This file is created with 'yarn generate-icons'.
// Original SVG file: src/svg/view-grid-plus.react.svg
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { warning } from '@commercetools-uikit/utils';
-import { css, ClassNames } from '@emotion/react';
-import { designTokens } from '@commercetools-uikit/design-system';
-export type Props = {
- color?:
- | 'solid'
- | 'neutral60'
- | 'surface'
- | 'info'
- | 'primary'
- | 'primary40'
- | 'warning'
- | 'error'
- | 'success';
- /**
- * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'.
- */
- size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40';
-};
-export type SVGProps = Props & {
- className: string;
-};
-const iconSizes = {
- small: 12,
- medium: 16,
- big: 24,
- '10': 12,
- '20': 16,
- '30': 20,
- '40': 24,
-} as const;
-const getSizeDimensions = (size: Props['size']) => {
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgViewGridPlus = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgViewGridPlus = (props: TSVGProps) => (
);
SvgViewGridPlus.displayName = 'SvgViewGridPlus';
-const ViewGridPlusIcon = (props: Props) => (
+const ViewGridPlusIcon = (props: TIconProps) => (
{({ css: createClass }) => (
{
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgWarning = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgWarning = (props: TSVGProps) => (
);
SvgWarning.displayName = 'SvgWarning';
-const WarningIcon = (props: Props) => (
+const WarningIcon = (props: TIconProps) => (
{({ css: createClass }) => (
diff --git a/packages/components/icons/src/generated/WindowEyeReact.tsx b/packages/components/icons/src/generated/WindowEyeReact.tsx
index a8fb5a2657..b2c61d0380 100644
--- a/packages/components/icons/src/generated/WindowEyeReact.tsx
+++ b/packages/components/icons/src/generated/WindowEyeReact.tsx
@@ -1,134 +1,13 @@
// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
// This file is created with 'yarn generate-icons'.
// Original SVG file: src/svg/window-eye.react.svg
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { warning } from '@commercetools-uikit/utils';
-import { css, ClassNames } from '@emotion/react';
-import { designTokens } from '@commercetools-uikit/design-system';
-export type Props = {
- color?:
- | 'solid'
- | 'neutral60'
- | 'surface'
- | 'info'
- | 'primary'
- | 'primary40'
- | 'warning'
- | 'error'
- | 'success';
- /**
- * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'.
- */
- size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40';
-};
-export type SVGProps = Props & {
- className: string;
-};
-const iconSizes = {
- small: 12,
- medium: 16,
- big: 24,
- '10': 12,
- '20': 16,
- '30': 20,
- '40': 24,
-} as const;
-const getSizeDimensions = (size: Props['size']) => {
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgWindowEye = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgWindowEye = (props: TSVGProps) => (
);
SvgWindowEye.displayName = 'SvgWindowEye';
-const WindowEyeIcon = (props: Props) => (
+const WindowEyeIcon = (props: TIconProps) => (
{({ css: createClass }) => (
diff --git a/packages/components/icons/src/generated/WorldReact.tsx b/packages/components/icons/src/generated/WorldReact.tsx
index b2fc8d5457..014c62db5b 100644
--- a/packages/components/icons/src/generated/WorldReact.tsx
+++ b/packages/components/icons/src/generated/WorldReact.tsx
@@ -1,134 +1,13 @@
// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
// This file is created with 'yarn generate-icons'.
// Original SVG file: src/svg/world.react.svg
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { warning } from '@commercetools-uikit/utils';
-import { css, ClassNames } from '@emotion/react';
-import { designTokens } from '@commercetools-uikit/design-system';
-export type Props = {
- color?:
- | 'solid'
- | 'neutral60'
- | 'surface'
- | 'info'
- | 'primary'
- | 'primary40'
- | 'warning'
- | 'error'
- | 'success';
- /**
- * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'.
- */
- size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40';
-};
-export type SVGProps = Props & {
- className: string;
-};
-const iconSizes = {
- small: 12,
- medium: 16,
- big: 24,
- '10': 12,
- '20': 16,
- '30': 20,
- '40': 24,
-} as const;
-const getSizeDimensions = (size: Props['size']) => {
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgWorld = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgWorld = (props: TSVGProps) => (
);
SvgWorld.displayName = 'SvgWorld';
-const WorldIcon = (props: Props) => (
+const WorldIcon = (props: TIconProps) => (
{({ css: createClass }) => (
diff --git a/packages/components/icons/src/inline-svg/inline-svg.tsx b/packages/components/icons/src/inline-svg/inline-svg.tsx
index 9ae77241b4..541584283a 100644
--- a/packages/components/icons/src/inline-svg/inline-svg.tsx
+++ b/packages/components/icons/src/inline-svg/inline-svg.tsx
@@ -1,5 +1,3 @@
-import type { Props } from '../templates/icon.styles';
-
import {
cloneElement,
isValidElement,
@@ -10,9 +8,12 @@ import DOMPurify from 'dompurify';
import convert from 'react-from-dom';
import { ClassNames } from '@emotion/react';
import { canUseDOM } from '@commercetools-uikit/utils';
-import { getIconStyles } from '../templates/icon.styles';
+import {
+ getIconStyles,
+ type TIconProps,
+} from '@commercetools-uikit/design-system';
-export type InlineSvgProps = Props & {
+export type InlineSvgProps = TIconProps & {
data: string;
};
diff --git a/packages/components/icons/src/templates/icon.styles.tsx b/packages/components/icons/src/templates/icon.styles.tsx
deleted file mode 100644
index a8067c97a3..0000000000
--- a/packages/components/icons/src/templates/icon.styles.tsx
+++ /dev/null
@@ -1,125 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { warning } from '@commercetools-uikit/utils';
-// @ts-ignore
-import { css, ClassNames } from '@emotion/react';
-import { designTokens } from '@commercetools-uikit/design-system';
-
-export type Props = {
- color?:
- | 'solid'
- | 'neutral60'
- | 'surface'
- | 'info'
- | 'primary'
- | 'primary40'
- | 'warning'
- | 'error'
- | 'success';
- /**
- * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'.
- */
- size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40';
-};
-export type SVGProps = Props & { className: string };
-
-const iconSizes = {
- small: 12,
- medium: 16,
- big: 24,
- '10': 12,
- '20': 16,
- '30': 20,
- '40': 24,
-} as const;
-const getSizeDimensions = (size: Props['size']) => {
- switch (size) {
- case 'scale':
- return { width: '100%', height: 'auto' };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return { width: `${iconSizes[size]}px`, height: `${iconSizes[size]}px` };
- default:
- return { width: `${iconSizes['40']}px`, height: `${iconSizes['40']}px` };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
-
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
-
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
-
- return iconColor;
-};
-
-// @ts-ignore
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
diff --git a/packages/components/inputs/checkbox-input/src/icons/generated/CheckedReact.tsx b/packages/components/inputs/checkbox-input/src/icons/generated/CheckedReact.tsx
index df8add69a1..143ba923ba 100644
--- a/packages/components/inputs/checkbox-input/src/icons/generated/CheckedReact.tsx
+++ b/packages/components/inputs/checkbox-input/src/icons/generated/CheckedReact.tsx
@@ -1,134 +1,13 @@
// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
// This file is created with 'yarn generate-icons'.
// Original SVG file: src/icons/svg/checked.react.svg
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { warning } from '@commercetools-uikit/utils';
-import { css, ClassNames } from '@emotion/react';
-import { designTokens } from '@commercetools-uikit/design-system';
-export type Props = {
- color?:
- | 'solid'
- | 'neutral60'
- | 'surface'
- | 'info'
- | 'primary'
- | 'primary40'
- | 'warning'
- | 'error'
- | 'success';
- /**
- * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'.
- */
- size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40';
-};
-export type SVGProps = Props & {
- className: string;
-};
-const iconSizes = {
- small: 12,
- medium: 16,
- big: 24,
- '10': 12,
- '20': 16,
- '30': 20,
- '40': 24,
-} as const;
-const getSizeDimensions = (size: Props['size']) => {
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgChecked = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgChecked = (props: TSVGProps) => (
);
SvgChecked.displayName = 'SvgChecked';
-const CheckedIcon = (props: Props) => (
+const CheckedIcon = (props: TIconProps) => (
{({ css: createClass }) => (
diff --git a/packages/components/inputs/checkbox-input/src/icons/generated/IndeterminateReact.tsx b/packages/components/inputs/checkbox-input/src/icons/generated/IndeterminateReact.tsx
index e19e629340..8f24bfc22c 100644
--- a/packages/components/inputs/checkbox-input/src/icons/generated/IndeterminateReact.tsx
+++ b/packages/components/inputs/checkbox-input/src/icons/generated/IndeterminateReact.tsx
@@ -1,134 +1,13 @@
// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
// This file is created with 'yarn generate-icons'.
// Original SVG file: src/icons/svg/indeterminate.react.svg
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { warning } from '@commercetools-uikit/utils';
-import { css, ClassNames } from '@emotion/react';
-import { designTokens } from '@commercetools-uikit/design-system';
-export type Props = {
- color?:
- | 'solid'
- | 'neutral60'
- | 'surface'
- | 'info'
- | 'primary'
- | 'primary40'
- | 'warning'
- | 'error'
- | 'success';
- /**
- * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'.
- */
- size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40';
-};
-export type SVGProps = Props & {
- className: string;
-};
-const iconSizes = {
- small: 12,
- medium: 16,
- big: 24,
- '10': 12,
- '20': 16,
- '30': 20,
- '40': 24,
-} as const;
-const getSizeDimensions = (size: Props['size']) => {
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgIndeterminate = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgIndeterminate = (props: TSVGProps) => (
);
SvgIndeterminate.displayName = 'SvgIndeterminate';
-const IndeterminateIcon = (props: Props) => (
+const IndeterminateIcon = (props: TIconProps) => (
{({ css: createClass }) => (
{
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgBold = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgBold = (props: TSVGProps) => (
);
SvgBold.displayName = 'SvgBold';
-const BoldIcon = (props: Props) => (
+const BoldIcon = (props: TIconProps) => (
{({ css: createClass }) => (
diff --git a/packages/components/inputs/rich-text-utils/src/rich-text-body/icons/generated/ExpandFullReact.tsx b/packages/components/inputs/rich-text-utils/src/rich-text-body/icons/generated/ExpandFullReact.tsx
index c66a7ef277..fcfb410bc9 100644
--- a/packages/components/inputs/rich-text-utils/src/rich-text-body/icons/generated/ExpandFullReact.tsx
+++ b/packages/components/inputs/rich-text-utils/src/rich-text-body/icons/generated/ExpandFullReact.tsx
@@ -1,134 +1,13 @@
// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
// This file is created with 'yarn generate-icons'.
// Original SVG file: src/rich-text-body/icons/svg/expand-full.react.svg
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { warning } from '@commercetools-uikit/utils';
-import { css, ClassNames } from '@emotion/react';
-import { designTokens } from '@commercetools-uikit/design-system';
-export type Props = {
- color?:
- | 'solid'
- | 'neutral60'
- | 'surface'
- | 'info'
- | 'primary'
- | 'primary40'
- | 'warning'
- | 'error'
- | 'success';
- /**
- * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'.
- */
- size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40';
-};
-export type SVGProps = Props & {
- className: string;
-};
-const iconSizes = {
- small: 12,
- medium: 16,
- big: 24,
- '10': 12,
- '20': 16,
- '30': 20,
- '40': 24,
-} as const;
-const getSizeDimensions = (size: Props['size']) => {
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgExpandFull = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgExpandFull = (props: TSVGProps) => (
);
SvgExpandFull.displayName = 'SvgExpandFull';
-const ExpandFullIcon = (props: Props) => (
+const ExpandFullIcon = (props: TIconProps) => (
{({ css: createClass }) => (
diff --git a/packages/components/inputs/rich-text-utils/src/rich-text-body/icons/generated/ExpandReact.tsx b/packages/components/inputs/rich-text-utils/src/rich-text-body/icons/generated/ExpandReact.tsx
index ceef8c89b9..a007e1f03f 100644
--- a/packages/components/inputs/rich-text-utils/src/rich-text-body/icons/generated/ExpandReact.tsx
+++ b/packages/components/inputs/rich-text-utils/src/rich-text-body/icons/generated/ExpandReact.tsx
@@ -1,134 +1,13 @@
// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
// This file is created with 'yarn generate-icons'.
// Original SVG file: src/rich-text-body/icons/svg/expand.react.svg
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { warning } from '@commercetools-uikit/utils';
-import { css, ClassNames } from '@emotion/react';
-import { designTokens } from '@commercetools-uikit/design-system';
-export type Props = {
- color?:
- | 'solid'
- | 'neutral60'
- | 'surface'
- | 'info'
- | 'primary'
- | 'primary40'
- | 'warning'
- | 'error'
- | 'success';
- /**
- * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'.
- */
- size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40';
-};
-export type SVGProps = Props & {
- className: string;
-};
-const iconSizes = {
- small: 12,
- medium: 16,
- big: 24,
- '10': 12,
- '20': 16,
- '30': 20,
- '40': 24,
-} as const;
-const getSizeDimensions = (size: Props['size']) => {
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgExpand = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgExpand = (props: TSVGProps) => (
);
SvgExpand.displayName = 'SvgExpand';
-const ExpandIcon = (props: Props) => (
+const ExpandIcon = (props: TIconProps) => (
{({ css: createClass }) => (
diff --git a/packages/components/inputs/rich-text-utils/src/rich-text-body/icons/generated/ItalicReact.tsx b/packages/components/inputs/rich-text-utils/src/rich-text-body/icons/generated/ItalicReact.tsx
index b65a3e1bc7..2993290e50 100644
--- a/packages/components/inputs/rich-text-utils/src/rich-text-body/icons/generated/ItalicReact.tsx
+++ b/packages/components/inputs/rich-text-utils/src/rich-text-body/icons/generated/ItalicReact.tsx
@@ -1,134 +1,13 @@
// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
// This file is created with 'yarn generate-icons'.
// Original SVG file: src/rich-text-body/icons/svg/italic.react.svg
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { warning } from '@commercetools-uikit/utils';
-import { css, ClassNames } from '@emotion/react';
-import { designTokens } from '@commercetools-uikit/design-system';
-export type Props = {
- color?:
- | 'solid'
- | 'neutral60'
- | 'surface'
- | 'info'
- | 'primary'
- | 'primary40'
- | 'warning'
- | 'error'
- | 'success';
- /**
- * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'.
- */
- size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40';
-};
-export type SVGProps = Props & {
- className: string;
-};
-const iconSizes = {
- small: 12,
- medium: 16,
- big: 24,
- '10': 12,
- '20': 16,
- '30': 20,
- '40': 24,
-} as const;
-const getSizeDimensions = (size: Props['size']) => {
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgItalic = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgItalic = (props: TSVGProps) => (
);
SvgItalic.displayName = 'SvgItalic';
-const ItalicIcon = (props: Props) => (
+const ItalicIcon = (props: TIconProps) => (
{({ css: createClass }) => (
diff --git a/packages/components/inputs/rich-text-utils/src/rich-text-body/icons/generated/MoreStylesReact.tsx b/packages/components/inputs/rich-text-utils/src/rich-text-body/icons/generated/MoreStylesReact.tsx
index 60a12b74c7..7094351966 100644
--- a/packages/components/inputs/rich-text-utils/src/rich-text-body/icons/generated/MoreStylesReact.tsx
+++ b/packages/components/inputs/rich-text-utils/src/rich-text-body/icons/generated/MoreStylesReact.tsx
@@ -1,134 +1,13 @@
// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
// This file is created with 'yarn generate-icons'.
// Original SVG file: src/rich-text-body/icons/svg/more-styles.react.svg
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { warning } from '@commercetools-uikit/utils';
-import { css, ClassNames } from '@emotion/react';
-import { designTokens } from '@commercetools-uikit/design-system';
-export type Props = {
- color?:
- | 'solid'
- | 'neutral60'
- | 'surface'
- | 'info'
- | 'primary'
- | 'primary40'
- | 'warning'
- | 'error'
- | 'success';
- /**
- * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'.
- */
- size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40';
-};
-export type SVGProps = Props & {
- className: string;
-};
-const iconSizes = {
- small: 12,
- medium: 16,
- big: 24,
- '10': 12,
- '20': 16,
- '30': 20,
- '40': 24,
-} as const;
-const getSizeDimensions = (size: Props['size']) => {
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgMoreStyles = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgMoreStyles = (props: TSVGProps) => (
);
SvgMoreStyles.displayName = 'SvgMoreStyles';
-const MoreStylesIcon = (props: Props) => (
+const MoreStylesIcon = (props: TIconProps) => (
{({ css: createClass }) => (
diff --git a/packages/components/inputs/rich-text-utils/src/rich-text-body/icons/generated/OrderedListReact.tsx b/packages/components/inputs/rich-text-utils/src/rich-text-body/icons/generated/OrderedListReact.tsx
index 57b065f791..dc305d44a0 100644
--- a/packages/components/inputs/rich-text-utils/src/rich-text-body/icons/generated/OrderedListReact.tsx
+++ b/packages/components/inputs/rich-text-utils/src/rich-text-body/icons/generated/OrderedListReact.tsx
@@ -1,134 +1,13 @@
// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
// This file is created with 'yarn generate-icons'.
// Original SVG file: src/rich-text-body/icons/svg/ordered-list.react.svg
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { warning } from '@commercetools-uikit/utils';
-import { css, ClassNames } from '@emotion/react';
-import { designTokens } from '@commercetools-uikit/design-system';
-export type Props = {
- color?:
- | 'solid'
- | 'neutral60'
- | 'surface'
- | 'info'
- | 'primary'
- | 'primary40'
- | 'warning'
- | 'error'
- | 'success';
- /**
- * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'.
- */
- size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40';
-};
-export type SVGProps = Props & {
- className: string;
-};
-const iconSizes = {
- small: 12,
- medium: 16,
- big: 24,
- '10': 12,
- '20': 16,
- '30': 20,
- '40': 24,
-} as const;
-const getSizeDimensions = (size: Props['size']) => {
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgOrderedList = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgOrderedList = (props: TSVGProps) => (
);
SvgOrderedList.displayName = 'SvgOrderedList';
-const OrderedListIcon = (props: Props) => (
+const OrderedListIcon = (props: TIconProps) => (
{({ css: createClass }) => (
{
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgRedo = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgRedo = (props: TSVGProps) => (
);
SvgRedo.displayName = 'SvgRedo';
-const RedoIcon = (props: Props) => (
+const RedoIcon = (props: TIconProps) => (
{({ css: createClass }) => (
diff --git a/packages/components/inputs/rich-text-utils/src/rich-text-body/icons/generated/StrikethroughReact.tsx b/packages/components/inputs/rich-text-utils/src/rich-text-body/icons/generated/StrikethroughReact.tsx
index baeca1737b..af8bcdab0a 100644
--- a/packages/components/inputs/rich-text-utils/src/rich-text-body/icons/generated/StrikethroughReact.tsx
+++ b/packages/components/inputs/rich-text-utils/src/rich-text-body/icons/generated/StrikethroughReact.tsx
@@ -1,134 +1,13 @@
// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
// This file is created with 'yarn generate-icons'.
// Original SVG file: src/rich-text-body/icons/svg/strikethrough.react.svg
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { warning } from '@commercetools-uikit/utils';
-import { css, ClassNames } from '@emotion/react';
-import { designTokens } from '@commercetools-uikit/design-system';
-export type Props = {
- color?:
- | 'solid'
- | 'neutral60'
- | 'surface'
- | 'info'
- | 'primary'
- | 'primary40'
- | 'warning'
- | 'error'
- | 'success';
- /**
- * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'.
- */
- size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40';
-};
-export type SVGProps = Props & {
- className: string;
-};
-const iconSizes = {
- small: 12,
- medium: 16,
- big: 24,
- '10': 12,
- '20': 16,
- '30': 20,
- '40': 24,
-} as const;
-const getSizeDimensions = (size: Props['size']) => {
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgStrikethrough = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgStrikethrough = (props: TSVGProps) => (
);
SvgStrikethrough.displayName = 'SvgStrikethrough';
-const StrikethroughIcon = (props: Props) => (
+const StrikethroughIcon = (props: TIconProps) => (
{({ css: createClass }) => (
{
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgSubscript = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgSubscript = (props: TSVGProps) => (
);
SvgSubscript.displayName = 'SvgSubscript';
-const SubscriptIcon = (props: Props) => (
+const SubscriptIcon = (props: TIconProps) => (
{({ css: createClass }) => (
diff --git a/packages/components/inputs/rich-text-utils/src/rich-text-body/icons/generated/SuperscriptReact.tsx b/packages/components/inputs/rich-text-utils/src/rich-text-body/icons/generated/SuperscriptReact.tsx
index 1a2ebb2469..eaf14c9082 100644
--- a/packages/components/inputs/rich-text-utils/src/rich-text-body/icons/generated/SuperscriptReact.tsx
+++ b/packages/components/inputs/rich-text-utils/src/rich-text-body/icons/generated/SuperscriptReact.tsx
@@ -1,134 +1,13 @@
// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
// This file is created with 'yarn generate-icons'.
// Original SVG file: src/rich-text-body/icons/svg/superscript.react.svg
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { warning } from '@commercetools-uikit/utils';
-import { css, ClassNames } from '@emotion/react';
-import { designTokens } from '@commercetools-uikit/design-system';
-export type Props = {
- color?:
- | 'solid'
- | 'neutral60'
- | 'surface'
- | 'info'
- | 'primary'
- | 'primary40'
- | 'warning'
- | 'error'
- | 'success';
- /**
- * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'.
- */
- size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40';
-};
-export type SVGProps = Props & {
- className: string;
-};
-const iconSizes = {
- small: 12,
- medium: 16,
- big: 24,
- '10': 12,
- '20': 16,
- '30': 20,
- '40': 24,
-} as const;
-const getSizeDimensions = (size: Props['size']) => {
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgSuperscript = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgSuperscript = (props: TSVGProps) => (
);
SvgSuperscript.displayName = 'SvgSuperscript';
-const SuperscriptIcon = (props: Props) => (
+const SuperscriptIcon = (props: TIconProps) => (
{({ css: createClass }) => (
{
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgUnderline = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgUnderline = (props: TSVGProps) => (
);
SvgUnderline.displayName = 'SvgUnderline';
-const UnderlineIcon = (props: Props) => (
+const UnderlineIcon = (props: TIconProps) => (
{({ css: createClass }) => (
diff --git a/packages/components/inputs/rich-text-utils/src/rich-text-body/icons/generated/UndoReact.tsx b/packages/components/inputs/rich-text-utils/src/rich-text-body/icons/generated/UndoReact.tsx
index 9602342549..afbf72462a 100644
--- a/packages/components/inputs/rich-text-utils/src/rich-text-body/icons/generated/UndoReact.tsx
+++ b/packages/components/inputs/rich-text-utils/src/rich-text-body/icons/generated/UndoReact.tsx
@@ -1,134 +1,13 @@
// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
// This file is created with 'yarn generate-icons'.
// Original SVG file: src/rich-text-body/icons/svg/undo.react.svg
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { warning } from '@commercetools-uikit/utils';
-import { css, ClassNames } from '@emotion/react';
-import { designTokens } from '@commercetools-uikit/design-system';
-export type Props = {
- color?:
- | 'solid'
- | 'neutral60'
- | 'surface'
- | 'info'
- | 'primary'
- | 'primary40'
- | 'warning'
- | 'error'
- | 'success';
- /**
- * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'.
- */
- size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40';
-};
-export type SVGProps = Props & {
- className: string;
-};
-const iconSizes = {
- small: 12,
- medium: 16,
- big: 24,
- '10': 12,
- '20': 16,
- '30': 20,
- '40': 24,
-} as const;
-const getSizeDimensions = (size: Props['size']) => {
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgUndo = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgUndo = (props: TSVGProps) => (
);
SvgUndo.displayName = 'SvgUndo';
-const UndoIcon = (props: Props) => (
+const UndoIcon = (props: TIconProps) => (
{({ css: createClass }) => (
diff --git a/packages/components/inputs/rich-text-utils/src/rich-text-body/icons/generated/UnorderedListReact.tsx b/packages/components/inputs/rich-text-utils/src/rich-text-body/icons/generated/UnorderedListReact.tsx
index 4a78ad1f1f..2742ce1663 100644
--- a/packages/components/inputs/rich-text-utils/src/rich-text-body/icons/generated/UnorderedListReact.tsx
+++ b/packages/components/inputs/rich-text-utils/src/rich-text-body/icons/generated/UnorderedListReact.tsx
@@ -1,134 +1,13 @@
// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
// This file is created with 'yarn generate-icons'.
// Original SVG file: src/rich-text-body/icons/svg/unordered-list.react.svg
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { warning } from '@commercetools-uikit/utils';
-import { css, ClassNames } from '@emotion/react';
-import { designTokens } from '@commercetools-uikit/design-system';
-export type Props = {
- color?:
- | 'solid'
- | 'neutral60'
- | 'surface'
- | 'info'
- | 'primary'
- | 'primary40'
- | 'warning'
- | 'error'
- | 'success';
- /**
- * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'.
- */
- size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40';
-};
-export type SVGProps = Props & {
- className: string;
-};
-const iconSizes = {
- small: 12,
- medium: 16,
- big: 24,
- '10': 12,
- '20': 16,
- '30': 20,
- '40': 24,
-} as const;
-const getSizeDimensions = (size: Props['size']) => {
- switch (size) {
- case 'scale':
- return {
- width: '100%',
- height: 'auto',
- };
- case 'small':
- case 'medium':
- case 'big':
- case '10':
- case '20':
- case '30':
- case '40':
- return {
- width: `${iconSizes[size]}px`,
- height: `${iconSizes[size]}px`,
- };
- default:
- return {
- width: `${iconSizes['40']}px`,
- height: `${iconSizes['40']}px`,
- };
- }
-};
-const getSizeStyle = (size: Props['size']) => {
- const dimensions = getSizeDimensions(size);
- switch (size) {
- case 'scale':
- return `
- &:not(:root) {
- width: ${dimensions.width};
- height: ${dimensions.height};
- }
- `;
- default:
- return `
- width: ${dimensions.width};
- height: ${dimensions.height};
- `;
- }
-};
-const getColor = (color: Props['color']) => {
- if (!color) return 'inherit';
- let iconColor;
- switch (color) {
- case 'solid':
- iconColor = designTokens.colorSolid;
- break;
- case 'neutral60':
- iconColor = designTokens.colorNeutral60;
- break;
- case 'surface':
- iconColor = designTokens.colorSurface;
- break;
- case 'info':
- iconColor = designTokens.colorInfo;
- break;
- case 'primary':
- iconColor = designTokens.colorPrimary;
- break;
- case 'primary40':
- iconColor = designTokens.colorPrimary40;
- break;
- case 'warning':
- iconColor = designTokens.colorWarning;
- break;
- case 'error':
- iconColor = designTokens.colorError;
- break;
- case 'success':
- iconColor = designTokens.colorSuccess;
- break;
- default:
- break;
- }
- if (!iconColor) {
- warning(
- color,
- `ui-kit/Icon: the specified color '${color}' is not supported.`
- );
- return 'inherit';
- }
- return iconColor;
-};
-export const getIconStyles = (props: Props) => css`
- *:not([fill='none']) {
- fill: ${getColor(props.color)};
- }
- &,
- image {
- ${getSizeStyle(props.size)};
- }
- flex-shrink: 0;
-`;
-const SvgUnorderedList = (props: SVGProps) => (
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
+const SvgUnorderedList = (props: TSVGProps) => (
);
SvgUnorderedList.displayName = 'SvgUnorderedList';
-const UnorderedListIcon = (props: Props) => (
+const UnorderedListIcon = (props: TIconProps) => (
{({ css: createClass }) => (
{
- return {
- name: iconName,
- icon: icons[iconName as keyof typeof icons],
- deprecated: DEPRECATED_ICONS_NAMES.includes(iconName),
- importString: `import { ${iconName} } from '@commercetools-uikit/icons';`,
- };
-});
+const EXCLUDED_ICON_COMPONENTS = ['CustomIcon', 'InlineSvg', 'LeadingIcon'];
+
+const iconList = Object.keys(icons)
+ .filter((iconName) => !EXCLUDED_ICON_COMPONENTS.includes(iconName))
+ .map((iconName) => {
+ return {
+ name: iconName,
+ Icon: icons[iconName as keyof typeof icons],
+ deprecated: DEPRECATED_ICONS_NAMES.includes(iconName),
+ importString: `import { ${iconName} } from '@commercetools-uikit/icons';`,
+ };
+ });
const Grid = styled.ul`
display: grid;
@@ -90,7 +94,7 @@ const IconItem = styled.div`
display: block;
width: 48px;
height: 48px;
- fill: currentColor;
+ fill: currentcolor;
}
`;
@@ -134,7 +138,7 @@ export const IconSearch: FC = () => {
{filteredIcons.map((icon) => (
-
+
{icon.name}
diff --git a/svgr.config.js b/svgr.config.js
index 12fb5f72d9..b2aa176fdf 100644
--- a/svgr.config.js
+++ b/svgr.config.js
@@ -1,16 +1,7 @@
/* eslint-disable global-require */
-const fs = require('fs');
const path = require('path');
const template = require('@babel/template');
-const templateCreateStyledIcon = fs.readFileSync(
- path.join(
- __dirname,
- `packages/components/icons/src/templates/icon.styles.tsx`
- ),
- { encoding: 'utf8' }
-);
-
const indexTemplate = (filePaths) => {
const exportEntries = filePaths.map(({ path: filePath }) => {
const basename = path.basename(filePath, path.extname(filePath));
@@ -49,13 +40,17 @@ const styledIconsTemplate = (variables, context) => {
const code = `// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
// This file is created with 'yarn generate-icons'.
// Original SVG file: ${context.options.state.filePath}
+import { ClassNames } from '@emotion/react';
+import {
+ getIconStyles,
+ type TIconProps,
+ type TSVGProps,
+} from '@commercetools-uikit/design-system';
-${templateCreateStyledIcon}
-
-const ${svgComponentName} = (props: SVGProps) => JSX;
+const ${svgComponentName} = (props: TSVGProps) => JSX;
${svgComponentName}.displayName = "${svgComponentName}";
-const ${reactComponentName} = (props: Props) => (
+const ${reactComponentName} = (props: TIconProps) => (
{({ css: createClass }) =>
<${svgComponentName} {...props} className={createClass(getIconStyles(props))} />