From ae9742194a558d673e8b5b559ff950448a16e8a6 Mon Sep 17 00:00:00 2001 From: Valera Melnikov Date: Mon, 22 Jul 2024 11:56:07 +0300 Subject: [PATCH] chore: update wds icon component (#34950) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Description > [!TIP] > _Add a TL;DR when the description is longer than 500 words or extremely technical (helps the content, marketing, and DevRel team)._ > > _Please also include relevant motivation and context. List any dependencies that are required for this change. Add links to Notion, Figma or any other documents that might be relevant to the PR._ Fixes #`Issue Number` _or_ Fixes `Issue URL` > [!WARNING] > _If no issue exists, please create an issue first, and check with the maintainers if the issue is valid._ ## Automation /ok-to-test tags="@tag.Anvil" ### :mag: Cypress test results > [!TIP] > 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉 > Workflow run: > Commit: db1ef7c00e0caa0c433984a198d9e8059a7b609e > Cypress dashboard. > Tags: `@tag.Anvil` > Spec: >
Mon, 15 Jul 2024 16:12:38 UTC ## Communication Should the DevRel and Marketing teams inform users about this change? - [ ] Yes - [ ] No ## Summary by CodeRabbit - **New Features** - Enhanced icon library with new thematic icons and improved accessibility features. - Introduced a default option in dropdowns for color selection in the property pane. - **Bug Fixes** - Corrected naming inconsistencies in icon entries. - **Improvements** - Streamlined color handling for icon and text components, enhancing visual coherence. - Update to the icon component's logic for improved maintainability and clarity. - **Documentation** - Added comments for better understanding of the handling of type errors in the icon component's story. --- .../headless/src/components/Icon/index.ts | 1 - .../headless/src/components/Icon/src/Icon.tsx | 38 --- .../headless/src/components/Icon/src/index.ts | 2 - .../design-system/headless/src/index.ts | 1 - .../design-system/widgets/package.json | 2 +- .../widgets/src/components/Icon/src/Icon.tsx | 60 ++--- .../widgets/src/components/Icon/src/icons.ts | 233 ++++++++++++++++-- .../src/components/Icon/src/styles.module.css | 8 + .../widgets/src/components/Icon/src/types.ts | 30 ++- .../components/Icon/stories/Icon.stories.tsx | 1 + .../widgets/src/scripts/build-icons.ts | 4 +- .../wds/WDSStatsWidget/component/index.tsx | 8 +- .../propertyPaneConfig/contentConfig.ts | 21 +- .../wds/WDSStatsWidget/widget/types.ts | 2 +- app/client/yarn.lock | 23 +- 15 files changed, 297 insertions(+), 137 deletions(-) delete mode 100644 app/client/packages/design-system/headless/src/components/Icon/index.ts delete mode 100644 app/client/packages/design-system/headless/src/components/Icon/src/Icon.tsx delete mode 100644 app/client/packages/design-system/headless/src/components/Icon/src/index.ts diff --git a/app/client/packages/design-system/headless/src/components/Icon/index.ts b/app/client/packages/design-system/headless/src/components/Icon/index.ts deleted file mode 100644 index 3bd16e178a..0000000000 --- a/app/client/packages/design-system/headless/src/components/Icon/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./src"; diff --git a/app/client/packages/design-system/headless/src/components/Icon/src/Icon.tsx b/app/client/packages/design-system/headless/src/components/Icon/src/Icon.tsx deleted file mode 100644 index 3d768f0c88..0000000000 --- a/app/client/packages/design-system/headless/src/components/Icon/src/Icon.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import React from "react"; -import type { ReactElement } from "react"; -import { filterDOMProps } from "@react-aria/utils"; -import type { AriaLabelingProps, DOMProps } from "@react-types/shared"; - -export interface IconProps extends DOMProps, AriaLabelingProps { - "aria-label"?: string; - role?: string; - className?: string; - children: ReactElement; - "aria-hidden"?: boolean | "false" | "true"; -} - -export function _Icon(props: IconProps, ref: React.Ref) { - const { - "aria-hidden": ariaHiddenProp, - "aria-label": ariaLabel, - children, - className, - role = "img", - ...otherProps - } = props; - - return React.cloneElement(children, { - ...filterDOMProps(otherProps), - focusable: "false", - "aria-label": ariaLabel, - "aria-hidden": Boolean(ariaLabel) ? ariaHiddenProp ?? undefined : true, - role, - "data-icon": "", - ref, - className, - }); -} - -_Icon.displayName = "Icon"; - -export const Icon = React.forwardRef(_Icon); diff --git a/app/client/packages/design-system/headless/src/components/Icon/src/index.ts b/app/client/packages/design-system/headless/src/components/Icon/src/index.ts deleted file mode 100644 index 06a476836a..0000000000 --- a/app/client/packages/design-system/headless/src/components/Icon/src/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { Icon } from "./Icon"; -export type { IconProps } from "./Icon"; diff --git a/app/client/packages/design-system/headless/src/index.ts b/app/client/packages/design-system/headless/src/index.ts index dbf6ee4d55..579239bb67 100644 --- a/app/client/packages/design-system/headless/src/index.ts +++ b/app/client/packages/design-system/headless/src/index.ts @@ -1,6 +1,5 @@ // components export * from "./components/Field"; -export * from "./components/Icon"; export * from "./components/Tooltip"; export * from "./components/TextInput"; export * from "./components/TextArea"; diff --git a/app/client/packages/design-system/widgets/package.json b/app/client/packages/design-system/widgets/package.json index 39a1ac53b8..cbbc284f48 100644 --- a/app/client/packages/design-system/widgets/package.json +++ b/app/client/packages/design-system/widgets/package.json @@ -19,7 +19,7 @@ "@react-aria/visually-hidden": "^3.8.0", "@react-types/actiongroup": "^3.4.6", "@react-types/shared": "^3.23.1", - "@tabler/icons-react": "^2.45.0", + "@tabler/icons-react": "^3.10.0", "clsx": "^2.0.0", "colorjs.io": "^0.4.3", "lodash": "*", diff --git a/app/client/packages/design-system/widgets/src/components/Icon/src/Icon.tsx b/app/client/packages/design-system/widgets/src/components/Icon/src/Icon.tsx index 92821b4551..9b7d6f6177 100644 --- a/app/client/packages/design-system/widgets/src/components/Icon/src/Icon.tsx +++ b/app/client/packages/design-system/widgets/src/components/Icon/src/Icon.tsx @@ -1,52 +1,42 @@ -import type { Ref } from "react"; +import type { Component, Ref } from "react"; import React, { Suspense, forwardRef, lazy, useMemo } from "react"; import { useThemeContext } from "@design-system/theming"; -import { Icon as HeadlessIcon } from "@design-system/headless"; import { ICONS } from "./icons"; import styles from "./styles.module.css"; import type { IconProps } from "./types"; import { FallbackIcon } from "./FallbackIcon"; -const _Icon = (props: IconProps, ref: Ref) => { - const { filled: filledProp, icon, name, size = "medium", ...rest } = props; +const _Icon = (props: IconProps, ref: Ref) => { + const { color, filled: filledProp, name, size = "medium", ...rest } = props; const theme = useThemeContext(); const filled = theme.iconStyle === "filled" || filledProp; const Icon = useMemo(() => { - let Icon: React.ComponentType | null; + const pascalName = ICONS[name]; - if (icon !== undefined) { - Icon = icon as React.ComponentType; - } else if (name !== undefined) { - const pascalName = ICONS[name]; + return lazy(async () => + import("@tabler/icons-react").then((module) => { + if (Boolean(filled)) { + const filledVariant = `${pascalName}Filled`; - Icon = lazy(async () => - import("@tabler/icons-react").then((module) => { - if (Boolean(filled)) { - const filledVariant = `${pascalName}Filled`; - - if (filledVariant in module) { - return { - default: module[filledVariant] as React.ComponentType, - }; - } - } - - if (pascalName in module) { + if (filledVariant in module) { return { - default: module[pascalName] as React.ComponentType, + default: module[filledVariant] as React.ComponentType, }; } + } - return { default: FallbackIcon }; - }), - ); - } else { - Icon = FallbackIcon; - } - return Icon; - }, [name, icon, filled]); + if (pascalName in module) { + return { + default: module[pascalName] as React.ComponentType, + }; + } + + return { default: FallbackIcon }; + }), + ); + }, [name, filled]); return ( ) => { /> } > - - - + /> ); }; diff --git a/app/client/packages/design-system/widgets/src/components/Icon/src/icons.ts b/app/client/packages/design-system/widgets/src/components/Icon/src/icons.ts index 4ecb7d838c..61be5d8fd4 100644 --- a/app/client/packages/design-system/widgets/src/components/Icon/src/icons.ts +++ b/app/client/packages/design-system/widgets/src/components/Icon/src/icons.ts @@ -1,13 +1,4 @@ export const ICONS = { - "123": "Icon123", - "12-hours": "Icon12Hours", - "24-hours": "Icon24Hours", - "2-fa": "Icon2fa", - "360": "Icon360", - "360-view": "Icon360View", - "3-d-cube-sphere": "Icon3dCubeSphere", - "3-d-cube-sphere-off": "Icon3dCubeSphereOff", - "3-d-rotate": "Icon3dRotate", ab: "IconAB", "ab-2": "IconAB2", "ab-off": "IconABOff", @@ -52,6 +43,7 @@ export const ICONS = { "adjustments-x": "IconAdjustmentsX", "aerial-lift": "IconAerialLift", affiliate: "IconAffiliate", + ai: "IconAi", "air-balloon": "IconAirBalloon", "air-conditioning": "IconAirConditioning", "air-conditioning-disabled": "IconAirConditioningDisabled", @@ -98,11 +90,18 @@ export const ICONS = { "align-center": "IconAlignCenter", "align-justified": "IconAlignJustified", "align-left": "IconAlignLeft", + "align-left-2": "IconAlignLeft2", "align-right": "IconAlignRight", + "align-right-2": "IconAlignRight2", alpha: "IconAlpha", + "alphabet-arabic": "IconAlphabetArabic", + "alphabet-bangla": "IconAlphabetBangla", "alphabet-cyrillic": "IconAlphabetCyrillic", "alphabet-greek": "IconAlphabetGreek", + "alphabet-hebrew": "IconAlphabetHebrew", + "alphabet-korean": "IconAlphabetKorean", "alphabet-latin": "IconAlphabetLatin", + "alphabet-thai": "IconAlphabetThai", alt: "IconAlt", ambulance: "IconAmbulance", ampersand: "IconAmpersand", @@ -183,6 +182,7 @@ export const ICONS = { "arrow-down": "IconArrowDown", "arrow-down-bar": "IconArrowDownBar", "arrow-down-circle": "IconArrowDownCircle", + "arrow-down-from-arc": "IconArrowDownFromArc", "arrow-down-left": "IconArrowDownLeft", "arrow-down-left-circle": "IconArrowDownLeftCircle", "arrow-down-rhombus": "IconArrowDownRhombus", @@ -190,6 +190,7 @@ export const ICONS = { "arrow-down-right-circle": "IconArrowDownRightCircle", "arrow-down-square": "IconArrowDownSquare", "arrow-down-tail": "IconArrowDownTail", + "arrow-down-to-arc": "IconArrowDownToArc", "arrow-elbow-left": "IconArrowElbowLeft", "arrow-elbow-right": "IconArrowElbowRight", "arrow-fork": "IconArrowFork", @@ -201,10 +202,12 @@ export const ICONS = { "arrow-left": "IconArrowLeft", "arrow-left-bar": "IconArrowLeftBar", "arrow-left-circle": "IconArrowLeftCircle", + "arrow-left-from-arc": "IconArrowLeftFromArc", "arrow-left-rhombus": "IconArrowLeftRhombus", "arrow-left-right": "IconArrowLeftRight", "arrow-left-square": "IconArrowLeftSquare", "arrow-left-tail": "IconArrowLeftTail", + "arrow-left-to-arc": "IconArrowLeftToArc", "arrow-loop-left": "IconArrowLoopLeft", "arrow-loop-left-2": "IconArrowLoopLeft2", "arrow-loop-right": "IconArrowLoopRight", @@ -232,9 +235,11 @@ export const ICONS = { "arrow-right": "IconArrowRight", "arrow-right-bar": "IconArrowRightBar", "arrow-right-circle": "IconArrowRightCircle", + "arrow-right-from-arc": "IconArrowRightFromArc", "arrow-right-rhombus": "IconArrowRightRhombus", "arrow-right-square": "IconArrowRightSquare", "arrow-right-tail": "IconArrowRightTail", + "arrow-right-to-arc": "IconArrowRightToArc", "arrow-rotary-first-left": "IconArrowRotaryFirstLeft", "arrow-rotary-first-right": "IconArrowRotaryFirstRight", "arrow-rotary-last-left": "IconArrowRotaryLastLeft", @@ -249,6 +254,7 @@ export const ICONS = { "arrow-up": "IconArrowUp", "arrow-up-bar": "IconArrowUpBar", "arrow-up-circle": "IconArrowUpCircle", + "arrow-up-from-arc": "IconArrowUpFromArc", "arrow-up-left": "IconArrowUpLeft", "arrow-up-left-circle": "IconArrowUpLeftCircle", "arrow-up-rhombus": "IconArrowUpRhombus", @@ -256,6 +262,7 @@ export const ICONS = { "arrow-up-right-circle": "IconArrowUpRightCircle", "arrow-up-square": "IconArrowUpSquare", "arrow-up-tail": "IconArrowUpTail", + "arrow-up-to-arc": "IconArrowUpToArc", "arrow-wave-left-down": "IconArrowWaveLeftDown", "arrow-wave-left-up": "IconArrowWaveLeftUp", "arrow-wave-right-down": "IconArrowWaveRightDown", @@ -321,7 +328,10 @@ export const ICONS = { "augmented-reality": "IconAugmentedReality", "augmented-reality-2": "IconAugmentedReality2", "augmented-reality-off": "IconAugmentedRealityOff", + "auth-2-fa": "IconAuth2fa", "automatic-gearbox": "IconAutomaticGearbox", + automation: "IconAutomation", + avocado: "IconAvocado", award: "IconAward", "award-off": "IconAwardOff", axe: "IconAxe", @@ -340,6 +350,7 @@ export const ICONS = { "badge-4-k": "IconBadge4k", "badge-8-k": "IconBadge8k", "badge-ad": "IconBadgeAd", + "badge-ad-off": "IconBadgeAdOff", "badge-ar": "IconBadgeAr", "badge-cc": "IconBadgeCc", "badge-hd": "IconBadgeHd", @@ -414,7 +425,18 @@ export const ICONS = { "battery-charging": "IconBatteryCharging", "battery-charging-2": "IconBatteryCharging2", "battery-eco": "IconBatteryEco", + "battery-exclamation": "IconBatteryExclamation", "battery-off": "IconBatteryOff", + "battery-vertical": "IconBatteryVertical", + "battery-vertical-1": "IconBatteryVertical1", + "battery-vertical-2": "IconBatteryVertical2", + "battery-vertical-3": "IconBatteryVertical3", + "battery-vertical-4": "IconBatteryVertical4", + "battery-vertical-charging": "IconBatteryVerticalCharging", + "battery-vertical-charging-2": "IconBatteryVerticalCharging2", + "battery-vertical-eco": "IconBatteryVerticalEco", + "battery-vertical-exclamation": "IconBatteryVerticalExclamation", + "battery-vertical-off": "IconBatteryVerticalOff", beach: "IconBeach", "beach-off": "IconBeachOff", bed: "IconBed", @@ -455,6 +477,7 @@ export const ICONS = { "binary-off": "IconBinaryOff", "binary-tree": "IconBinaryTree", "binary-tree-2": "IconBinaryTree2", + binoculars: "IconBinoculars", biohazard: "IconBiohazard", "biohazard-off": "IconBiohazardOff", blade: "IconBlade", @@ -462,7 +485,9 @@ export const ICONS = { "bleach-chlorine": "IconBleachChlorine", "bleach-no-chlorine": "IconBleachNoChlorine", "bleach-off": "IconBleachOff", + "blend-mode": "IconBlendMode", blender: "IconBlender", + blob: "IconBlob", blockquote: "IconBlockquote", bluetooth: "IconBluetooth", "bluetooth-connected": "IconBluetoothConnected", @@ -497,8 +522,11 @@ export const ICONS = { "bookmarks-off": "IconBookmarksOff", books: "IconBooks", "books-off": "IconBooksOff", + boom: "IconBoom", "border-all": "IconBorderAll", "border-bottom": "IconBorderBottom", + "border-bottom-plus": "IconBorderBottomPlus", + "border-corner-ios": "IconBorderCornerIos", "border-corner-pill": "IconBorderCornerPill", "border-corner-rounded": "IconBorderCornerRounded", "border-corner-square": "IconBorderCornerSquare", @@ -506,14 +534,17 @@ export const ICONS = { "border-horizontal": "IconBorderHorizontal", "border-inner": "IconBorderInner", "border-left": "IconBorderLeft", + "border-left-plus": "IconBorderLeftPlus", "border-none": "IconBorderNone", "border-outer": "IconBorderOuter", "border-radius": "IconBorderRadius", "border-right": "IconBorderRight", + "border-right-plus": "IconBorderRightPlus", "border-sides": "IconBorderSides", "border-style": "IconBorderStyle", "border-style-2": "IconBorderStyle2", "border-top": "IconBorderTop", + "border-top-plus": "IconBorderTopPlus", "border-vertical": "IconBorderVertical", bottle: "IconBottle", "bottle-off": "IconBottleOff", @@ -521,6 +552,8 @@ export const ICONS = { "bounce-right": "IconBounceRight", bow: "IconBow", bowl: "IconBowl", + "bowl-chopsticks": "IconBowlChopsticks", + "bowl-spoon": "IconBowlSpoon", box: "IconBox", "box-align-bottom": "IconBoxAlignBottom", "box-align-bottom-left": "IconBoxAlignBottomLeft", @@ -548,7 +581,6 @@ export const ICONS = { "box-multiple-9": "IconBoxMultiple9", "box-off": "IconBoxOff", "box-padding": "IconBoxPadding", - "box-seam": "IconBoxSeam", braces: "IconBraces", "braces-off": "IconBracesOff", brackets: "IconBrackets", @@ -563,6 +595,12 @@ export const ICONS = { "brand-4-chan": "IconBrand4chan", "brand-abstract": "IconBrandAbstract", "brand-adobe": "IconBrandAdobe", + "brand-adobe-after-effect": "IconBrandAdobeAfterEffect", + "brand-adobe-illustrator": "IconBrandAdobeIllustrator", + "brand-adobe-indesign": "IconBrandAdobeIndesign", + "brand-adobe-photoshop": "IconBrandAdobePhotoshop", + "brand-adobe-premier": "IconBrandAdobePremier", + "brand-adobe-xd": "IconBrandAdobeXd", "brand-adonis-js": "IconBrandAdonisJs", "brand-airbnb": "IconBrandAirbnb", "brand-airtable": "IconBrandAirtable", @@ -580,9 +618,12 @@ export const ICONS = { "brand-appgallery": "IconBrandAppgallery", "brand-apple": "IconBrandApple", "brand-apple-arcade": "IconBrandAppleArcade", + "brand-apple-news": "IconBrandAppleNews", "brand-apple-podcast": "IconBrandApplePodcast", "brand-appstore": "IconBrandAppstore", + "brand-arc": "IconBrandArc", "brand-asana": "IconBrandAsana", + "brand-astro": "IconBrandAstro", "brand-auth-0": "IconBrandAuth0", "brand-aws": "IconBrandAws", "brand-azure": "IconBrandAzure", @@ -704,6 +745,7 @@ export const ICONS = { "brand-grindr": "IconBrandGrindr", "brand-guardian": "IconBrandGuardian", "brand-gumroad": "IconBrandGumroad", + "brand-hackerrank": "IconBrandHackerrank", "brand-hbo": "IconBrandHbo", "brand-headlessui": "IconBrandHeadlessui", "brand-hexo": "IconBrandHexo", @@ -741,6 +783,7 @@ export const ICONS = { "brand-mercedes": "IconBrandMercedes", "brand-messenger": "IconBrandMessenger", "brand-meta": "IconBrandMeta", + "brand-metabrainz": "IconBrandMetabrainz", "brand-minecraft": "IconBrandMinecraft", "brand-miniprogram": "IconBrandMiniprogram", "brand-mixpanel": "IconBrandMixpanel", @@ -921,6 +964,7 @@ export const ICONS = { "briefcase-off": "IconBriefcaseOff", brightness: "IconBrightness", "brightness-2": "IconBrightness2", + "brightness-auto": "IconBrightnessAuto", "brightness-down": "IconBrightnessDown", "brightness-half": "IconBrightnessHalf", "brightness-off": "IconBrightnessOff", @@ -934,6 +978,13 @@ export const ICONS = { "browser-x": "IconBrowserX", brush: "IconBrush", "brush-off": "IconBrushOff", + bubble: "IconBubble", + "bubble-minus": "IconBubbleMinus", + "bubble-plus": "IconBubblePlus", + "bubble-tea": "IconBubbleTea", + "bubble-tea-2": "IconBubbleTea2", + "bubble-text": "IconBubbleText", + "bubble-x": "IconBubbleX", bucket: "IconBucket", "bucket-droplet": "IconBucketDroplet", "bucket-off": "IconBucketOff", @@ -945,6 +996,7 @@ export const ICONS = { "building-bridge": "IconBuildingBridge", "building-bridge-2": "IconBuildingBridge2", "building-broadcast-tower": "IconBuildingBroadcastTower", + "building-burj-al-arab": "IconBuildingBurjAlArab", "building-carousel": "IconBuildingCarousel", "building-castle": "IconBuildingCastle", "building-church": "IconBuildingChurch", @@ -959,6 +1011,7 @@ export const ICONS = { "building-lighthouse": "IconBuildingLighthouse", "building-monument": "IconBuildingMonument", "building-mosque": "IconBuildingMosque", + "building-off": "IconBuildingOff", "building-pavilion": "IconBuildingPavilion", "building-skyscraper": "IconBuildingSkyscraper", "building-stadium": "IconBuildingStadium", @@ -966,6 +1019,7 @@ export const ICONS = { "building-tunnel": "IconBuildingTunnel", "building-warehouse": "IconBuildingWarehouse", "building-wind-turbine": "IconBuildingWindTurbine", + buildings: "IconBuildings", bulb: "IconBulb", "bulb-off": "IconBulbOff", bulldozer: "IconBulldozer", @@ -1039,22 +1093,33 @@ export const ICONS = { "camera-x": "IconCameraX", camper: "IconCamper", campfire: "IconCampfire", + cancel: "IconCancel", candle: "IconCandle", candy: "IconCandy", "candy-off": "IconCandyOff", cane: "IconCane", cannabis: "IconCannabis", + "cap-projecting": "IconCapProjecting", + "cap-rounded": "IconCapRounded", + "cap-straight": "IconCapStraight", capsule: "IconCapsule", "capsule-horizontal": "IconCapsuleHorizontal", capture: "IconCapture", "capture-off": "IconCaptureOff", car: "IconCar", + "car-4-wd": "IconCar4wd", "car-crane": "IconCarCrane", "car-crash": "IconCarCrash", + "car-fan": "IconCarFan", + "car-fan-1": "IconCarFan1", + "car-fan-2": "IconCarFan2", + "car-fan-3": "IconCarFan3", + "car-fan-auto": "IconCarFanAuto", "car-garage": "IconCarGarage", "car-off": "IconCarOff", "car-suv": "IconCarSuv", "car-turbine": "IconCarTurbine", + carambola: "IconCarambola", caravan: "IconCaravan", cardboards: "IconCardboards", "cardboards-off": "IconCardboardsOff", @@ -1073,6 +1138,7 @@ export const ICONS = { "cash-banknote": "IconCashBanknote", "cash-banknote-off": "IconCashBanknoteOff", "cash-off": "IconCashOff", + "cash-register": "IconCashRegister", cast: "IconCast", "cast-off": "IconCastOff", cat: "IconCat", @@ -1105,9 +1171,11 @@ export const ICONS = { "chart-arrows-vertical": "IconChartArrowsVertical", "chart-bar": "IconChartBar", "chart-bar-off": "IconChartBarOff", + "chart-bar-popular": "IconChartBarPopular", "chart-bubble": "IconChartBubble", "chart-candle": "IconChartCandle", "chart-circles": "IconChartCircles", + "chart-cohort": "IconChartCohort", "chart-donut": "IconChartDonut", "chart-donut-2": "IconChartDonut2", "chart-donut-3": "IconChartDonut3", @@ -1115,6 +1183,7 @@ export const ICONS = { "chart-dots": "IconChartDots", "chart-dots-2": "IconChartDots2", "chart-dots-3": "IconChartDots3", + "chart-funnel": "IconChartFunnel", "chart-grid-dots": "IconChartGridDots", "chart-histogram": "IconChartHistogram", "chart-infographic": "IconChartInfographic", @@ -1127,6 +1196,8 @@ export const ICONS = { "chart-ppf": "IconChartPpf", "chart-radar": "IconChartRadar", "chart-sankey": "IconChartSankey", + "chart-scatter": "IconChartScatter", + "chart-scatter-3-d": "IconChartScatter3d", "chart-treemap": "IconChartTreemap", check: "IconCheck", checkbox: "IconCheckbox", @@ -1192,6 +1263,8 @@ export const ICONS = { "circle-chevrons-right": "IconCircleChevronsRight", "circle-chevrons-up": "IconCircleChevronsUp", "circle-dashed": "IconCircleDashed", + "circle-dashed-check": "IconCircleDashedCheck", + "circle-dashed-minus": "IconCircleDashedMinus", "circle-dashed-number-0": "IconCircleDashedNumber0", "circle-dashed-number-1": "IconCircleDashedNumber1", "circle-dashed-number-2": "IconCircleDashedNumber2", @@ -1203,6 +1276,7 @@ export const ICONS = { "circle-dashed-number-8": "IconCircleDashedNumber8", "circle-dashed-number-9": "IconCircleDashedNumber9", "circle-dashed-percentage": "IconCircleDashedPercentage", + "circle-dashed-plus": "IconCircleDashedPlus", "circle-dashed-x": "IconCircleDashedX", "circle-dot": "IconCircleDot", "circle-dotted": "IconCircleDotted", @@ -1281,6 +1355,7 @@ export const ICONS = { "clear-all": "IconClearAll", "clear-formatting": "IconClearFormatting", click: "IconClick", + "cliff-jumping": "IconCliffJumping", clipboard: "IconClipboard", "clipboard-check": "IconClipboardCheck", "clipboard-copy": "IconClipboardCopy", @@ -1289,6 +1364,7 @@ export const ICONS = { "clipboard-list": "IconClipboardList", "clipboard-off": "IconClipboardOff", "clipboard-plus": "IconClipboardPlus", + "clipboard-smile": "IconClipboardSmile", "clipboard-text": "IconClipboardText", "clipboard-typography": "IconClipboardTypography", "clipboard-x": "IconClipboardX", @@ -1296,6 +1372,7 @@ export const ICONS = { "clock-12": "IconClock12", "clock-2": "IconClock2", "clock-24": "IconClock24", + "clock-bitcoin": "IconClockBitcoin", "clock-bolt": "IconClockBolt", "clock-cancel": "IconClockCancel", "clock-check": "IconClockCheck", @@ -1336,6 +1413,7 @@ export const ICONS = { "clothes-rack": "IconClothesRack", "clothes-rack-off": "IconClothesRackOff", cloud: "IconCloud", + "cloud-bitcoin": "IconCloudBitcoin", "cloud-bolt": "IconCloudBolt", "cloud-cancel": "IconCloudCancel", "cloud-check": "IconCloudCheck", @@ -1371,7 +1449,7 @@ export const ICONS = { "clover-2": "IconClover2", clubs: "IconClubs", code: "IconCode", - "code-asterix": "IconCodeAsterix", + "code-asterisk": "IconCodeAsterisk", "code-circle": "IconCodeCircle", "code-circle-2": "IconCodeCircle2", "code-dots": "IconCodeDots", @@ -1421,6 +1499,7 @@ export const ICONS = { confucius: "IconConfucius", container: "IconContainer", "container-off": "IconContainerOff", + contract: "IconContract", contrast: "IconContrast", "contrast-2": "IconContrast2", "contrast-2-off": "IconContrast2Off", @@ -1490,6 +1569,8 @@ export const ICONS = { "crystal-ball": "IconCrystalBall", csv: "IconCsv", cube: "IconCube", + "cube-3-d-sphere": "IconCube3dSphere", + "cube-3-d-sphere-off": "IconCube3dSphereOff", "cube-off": "IconCubeOff", "cube-plus": "IconCubePlus", "cube-send": "IconCubeSend", @@ -1589,6 +1670,7 @@ export const ICONS = { "database-plus": "IconDatabasePlus", "database-search": "IconDatabaseSearch", "database-share": "IconDatabaseShare", + "database-smile": "IconDatabaseSmile", "database-star": "IconDatabaseStar", "database-x": "IconDatabaseX", decimal: "IconDecimal", @@ -1764,6 +1846,7 @@ export const ICONS = { "device-tv": "IconDeviceTv", "device-tv-off": "IconDeviceTvOff", "device-tv-old": "IconDeviceTvOld", + "device-unknown": "IconDeviceUnknown", "device-usb": "IconDeviceUsb", "device-vision-pro": "IconDeviceVisionPro", "device-watch": "IconDeviceWatch", @@ -1843,9 +1926,6 @@ export const ICONS = { "disc-golf": "IconDiscGolf", "disc-off": "IconDiscOff", discount: "IconDiscount", - "discount-2": "IconDiscount2", - "discount-2-off": "IconDiscount2Off", - "discount-check": "IconDiscountCheck", "discount-off": "IconDiscountOff", divide: "IconDivide", dna: "IconDna", @@ -1895,6 +1975,7 @@ export const ICONS = { "droplet-x": "IconDropletX", droplets: "IconDroplets", "dual-screen": "IconDualScreen", + dumpling: "IconDumpling", "e-passport": "IconEPassport", ear: "IconEar", "ear-off": "IconEarOff", @@ -1949,6 +2030,7 @@ export const ICONS = { "external-link": "IconExternalLink", "external-link-off": "IconExternalLinkOff", eye: "IconEye", + "eye-bitcoin": "IconEyeBitcoin", "eye-bolt": "IconEyeBolt", "eye-cancel": "IconEyeCancel", "eye-check": "IconEyeCheck", @@ -1957,6 +2039,7 @@ export const ICONS = { "eye-cog": "IconEyeCog", "eye-discount": "IconEyeDiscount", "eye-dollar": "IconEyeDollar", + "eye-dotted": "IconEyeDotted", "eye-down": "IconEyeDown", "eye-edit": "IconEyeEdit", "eye-exclamation": "IconEyeExclamation", @@ -2011,6 +2094,7 @@ export const ICONS = { "file-dots": "IconFileDots", "file-download": "IconFileDownload", "file-euro": "IconFileEuro", + "file-excel": "IconFileExcel", "file-export": "IconFileExport", "file-function": "IconFileFunction", "file-horizontal": "IconFileHorizontal", @@ -2018,6 +2102,7 @@ export const ICONS = { "file-infinity": "IconFileInfinity", "file-info": "IconFileInfo", "file-invoice": "IconFileInvoice", + "file-isr": "IconFileIsr", "file-lambda": "IconFileLambda", "file-like": "IconFileLike", "file-minus": "IconFileMinus", @@ -2073,6 +2158,7 @@ export const ICONS = { "file-unknown": "IconFileUnknown", "file-upload": "IconFileUpload", "file-vector": "IconFileVector", + "file-word": "IconFileWord", "file-x": "IconFileX", "file-zip": "IconFileZip", files: "IconFiles", @@ -2120,6 +2206,7 @@ export const ICONS = { "flag-2": "IconFlag2", "flag-2-off": "IconFlag2Off", "flag-3": "IconFlag3", + "flag-bitcoin": "IconFlagBitcoin", "flag-bolt": "IconFlagBolt", "flag-cancel": "IconFlagCancel", "flag-check": "IconFlagCheck", @@ -2258,7 +2345,10 @@ export const ICONS = { "git-pull-request-draft": "IconGitPullRequestDraft", gizmo: "IconGizmo", glass: "IconGlass", + "glass-champagne": "IconGlassChampagne", + "glass-cocktail": "IconGlassCocktail", "glass-full": "IconGlassFull", + "glass-gin": "IconGlassGin", "glass-off": "IconGlassOff", globe: "IconGlobe", "globe-off": "IconGlobeOff", @@ -2297,14 +2387,17 @@ export const ICONS = { "hammer-off": "IconHammerOff", "hand-click": "IconHandClick", "hand-finger": "IconHandFinger", + "hand-finger-down": "IconHandFingerDown", + "hand-finger-left": "IconHandFingerLeft", "hand-finger-off": "IconHandFingerOff", + "hand-finger-right": "IconHandFingerRight", "hand-grab": "IconHandGrab", "hand-little-finger": "IconHandLittleFinger", + "hand-love-you": "IconHandLoveYou", "hand-middle-finger": "IconHandMiddleFinger", "hand-move": "IconHandMove", "hand-off": "IconHandOff", "hand-ring-finger": "IconHandRingFinger", - "hand-rock": "IconHandRock", "hand-sanitizer": "IconHandSanitizer", "hand-stop": "IconHandStop", "hand-three-fingers": "IconHandThreeFingers", @@ -2324,6 +2417,7 @@ export const ICONS = { "headset-off": "IconHeadsetOff", "health-recognition": "IconHealthRecognition", heart: "IconHeart", + "heart-bitcoin": "IconHeartBitcoin", "heart-bolt": "IconHeartBolt", "heart-broken": "IconHeartBroken", "heart-cancel": "IconHeartCancel", @@ -2428,6 +2522,7 @@ export const ICONS = { "history-toggle": "IconHistoryToggle", home: "IconHome", "home-2": "IconHome2", + "home-bitcoin": "IconHomeBitcoin", "home-bolt": "IconHomeBolt", "home-cancel": "IconHomeCancel", "home-check": "IconHomeCheck", @@ -2467,6 +2562,8 @@ export const ICONS = { "hourglass-high": "IconHourglassHigh", "hourglass-low": "IconHourglassLow", "hourglass-off": "IconHourglassOff", + "hours-12": "IconHours12", + "hours-24": "IconHours24", html: "IconHtml", "http-connect": "IconHttpConnect", "http-delete": "IconHttpDelete", @@ -2489,6 +2586,8 @@ export const ICONS = { "id-badge-2": "IconIdBadge2", "id-badge-off": "IconIdBadgeOff", "id-off": "IconIdOff", + ikosaedr: "IconIkosaedr", + "image-in-picture": "IconImageInPicture", inbox: "IconInbox", "inbox-off": "IconInboxOff", "indent-decrease": "IconIndentDecrease", @@ -2514,6 +2613,7 @@ export const ICONS = { "input-check": "IconInputCheck", "input-search": "IconInputSearch", "input-x": "IconInputX", + invoice: "IconInvoice", ironing: "IconIroning", "ironing-1": "IconIroning1", "ironing-2": "IconIroning2", @@ -2528,12 +2628,15 @@ export const ICONS = { jacket: "IconJacket", jetpack: "IconJetpack", "jewish-star": "IconJewishStar", + "join-bevel": "IconJoinBevel", + "join-round": "IconJoinRound", + "join-straight": "IconJoinStraight", jpg: "IconJpg", json: "IconJson", "jump-rope": "IconJumpRope", karate: "IconKarate", kayak: "IconKayak", - kering: "IconKering", + kerning: "IconKerning", key: "IconKey", "key-off": "IconKeyOff", keyboard: "IconKeyboard", @@ -2545,6 +2648,9 @@ export const ICONS = { "keyframe-align-horizontal": "IconKeyframeAlignHorizontal", "keyframe-align-vertical": "IconKeyframeAlignVertical", keyframes: "IconKeyframes", + label: "IconLabel", + "label-important": "IconLabelImportant", + "label-off": "IconLabelOff", ladder: "IconLadder", "ladder-off": "IconLadderOff", ladle: "IconLadle", @@ -2560,11 +2666,17 @@ export const ICONS = { lasso: "IconLasso", "lasso-off": "IconLassoOff", "lasso-polygon": "IconLassoPolygon", + "laurel-wreath": "IconLaurelWreath", + "laurel-wreath-1": "IconLaurelWreath1", + "laurel-wreath-2": "IconLaurelWreath2", + "laurel-wreath-3": "IconLaurelWreath3", "layers-difference": "IconLayersDifference", "layers-intersect": "IconLayersIntersect", "layers-intersect-2": "IconLayersIntersect2", "layers-linked": "IconLayersLinked", "layers-off": "IconLayersOff", + "layers-selected": "IconLayersSelected", + "layers-selected-bottom": "IconLayersSelectedBottom", "layers-subtract": "IconLayersSubtract", "layers-union": "IconLayersUnion", layout: "IconLayout", @@ -2607,6 +2719,7 @@ export const ICONS = { "layout-sidebar-right-expand": "IconLayoutSidebarRightExpand", "layout-sidebar-right-inactive": "IconLayoutSidebarRightInactive", leaf: "IconLeaf", + "leaf-2": "IconLeaf2", "leaf-off": "IconLeafOff", lego: "IconLego", "lego-off": "IconLegoOff", @@ -2728,6 +2841,7 @@ export const ICONS = { lock: "IconLock", "lock-access": "IconLockAccess", "lock-access-off": "IconLockAccessOff", + "lock-bitcoin": "IconLockBitcoin", "lock-bolt": "IconLockBolt", "lock-cancel": "IconLockCancel", "lock-check": "IconLockCheck", @@ -2740,6 +2854,7 @@ export const ICONS = { "lock-minus": "IconLockMinus", "lock-off": "IconLockOff", "lock-open": "IconLockOpen", + "lock-open-2": "IconLockOpen2", "lock-open-off": "IconLockOpenOff", "lock-pause": "IconLockPause", "lock-pin": "IconLockPin", @@ -2764,6 +2879,7 @@ export const ICONS = { "login-2": "IconLogin2", logout: "IconLogout", "logout-2": "IconLogout2", + logs: "IconLogs", lollipop: "IconLollipop", "lollipop-off": "IconLollipopOff", luggage: "IconLuggage", @@ -2777,6 +2893,7 @@ export const ICONS = { magnetic: "IconMagnetic", mail: "IconMail", "mail-ai": "IconMailAi", + "mail-bitcoin": "IconMailBitcoin", "mail-bolt": "IconMailBolt", "mail-cancel": "IconMailCancel", "mail-check": "IconMailCheck", @@ -2870,6 +2987,8 @@ export const ICONS = { "math-1-divide-2": "IconMath1Divide2", "math-1-divide-3": "IconMath1Divide3", "math-avg": "IconMathAvg", + "math-cos": "IconMathCos", + "math-ctg": "IconMathCtg", "math-equal-greater": "IconMathEqualGreater", "math-equal-lower": "IconMathEqualLower", "math-function": "IconMathFunction", @@ -2881,12 +3000,16 @@ export const ICONS = { "math-integrals": "IconMathIntegrals", "math-lower": "IconMathLower", "math-max": "IconMathMax", + "math-max-min": "IconMathMaxMin", "math-min": "IconMathMin", "math-not": "IconMathNot", "math-off": "IconMathOff", "math-pi": "IconMathPi", "math-pi-divide-2": "IconMathPiDivide2", + "math-sec": "IconMathSec", + "math-sin": "IconMathSin", "math-symbols": "IconMathSymbols", + "math-tg": "IconMathTg", "math-x-divide-2": "IconMathXDivide2", "math-x-divide-y": "IconMathXDivideY", "math-x-divide-y-2": "IconMathXDivideY2", @@ -2912,6 +3035,8 @@ export const ICONS = { menorah: "IconMenorah", menu: "IconMenu", "menu-2": "IconMenu2", + "menu-3": "IconMenu3", + "menu-4": "IconMenu4", "menu-deep": "IconMenuDeep", "menu-order": "IconMenuOrder", message: "IconMessage", @@ -2941,7 +3066,6 @@ export const ICONS = { "message-chatbot": "IconMessageChatbot", "message-check": "IconMessageCheck", "message-circle": "IconMessageCircle", - "message-circle-2": "IconMessageCircle2", "message-circle-bolt": "IconMessageCircleBolt", "message-circle-cancel": "IconMessageCircleCancel", "message-circle-check": "IconMessageCircleCheck", @@ -2961,6 +3085,7 @@ export const ICONS = { "message-circle-share": "IconMessageCircleShare", "message-circle-star": "IconMessageCircleStar", "message-circle-up": "IconMessageCircleUp", + "message-circle-user": "IconMessageCircleUser", "message-circle-x": "IconMessageCircleX", "message-code": "IconMessageCode", "message-cog": "IconMessageCog", @@ -2983,6 +3108,7 @@ export const ICONS = { "message-share": "IconMessageShare", "message-star": "IconMessageStar", "message-up": "IconMessageUp", + "message-user": "IconMessageUser", "message-x": "IconMessageX", messages: "IconMessages", "messages-off": "IconMessagesOff", @@ -3016,9 +3142,11 @@ export const ICONS = { mobiledata: "IconMobiledata", "mobiledata-off": "IconMobiledataOff", moneybag: "IconMoneybag", + monkeybar: "IconMonkeybar", "mood-angry": "IconMoodAngry", "mood-annoyed": "IconMoodAnnoyed", "mood-annoyed-2": "IconMoodAnnoyed2", + "mood-bitcoin": "IconMoodBitcoin", "mood-boy": "IconMoodBoy", "mood-check": "IconMoodCheck", "mood-cog": "IconMoodCog", @@ -3055,7 +3183,7 @@ export const ICONS = { "mood-smile": "IconMoodSmile", "mood-smile-beam": "IconMoodSmileBeam", "mood-smile-dizzy": "IconMoodSmileDizzy", - "mood-suprised": "IconMoodSuprised", + "mood-surprised": "IconMoodSurprised", "mood-tongue": "IconMoodTongue", "mood-tongue-wink": "IconMoodTongueWink", "mood-tongue-wink-2": "IconMoodTongueWink2", @@ -3164,6 +3292,7 @@ export const ICONS = { "number-1": "IconNumber1", "number-10-small": "IconNumber10Small", "number-11-small": "IconNumber11Small", + "number-123": "IconNumber123", "number-12-small": "IconNumber12Small", "number-13-small": "IconNumber13Small", "number-14-small": "IconNumber14Small", @@ -3202,6 +3331,7 @@ export const ICONS = { numbers: "IconNumbers", nurse: "IconNurse", nut: "IconNut", + "object-scan": "IconObjectScan", octagon: "IconOctagon", "octagon-minus": "IconOctagonMinus", "octagon-minus-2": "IconOctagonMinus2", @@ -3281,6 +3411,7 @@ export const ICONS = { "pennant-2": "IconPennant2", "pennant-off": "IconPennantOff", pentagon: "IconPentagon", + "pentagon-minus": "IconPentagonMinus", "pentagon-number-0": "IconPentagonNumber0", "pentagon-number-1": "IconPentagonNumber1", "pentagon-number-2": "IconPentagonNumber2", @@ -3298,6 +3429,21 @@ export const ICONS = { pepper: "IconPepper", "pepper-off": "IconPepperOff", percentage: "IconPercentage", + "percentage-0": "IconPercentage0", + "percentage-10": "IconPercentage10", + "percentage-100": "IconPercentage100", + "percentage-20": "IconPercentage20", + "percentage-25": "IconPercentage25", + "percentage-30": "IconPercentage30", + "percentage-33": "IconPercentage33", + "percentage-40": "IconPercentage40", + "percentage-50": "IconPercentage50", + "percentage-60": "IconPercentage60", + "percentage-66": "IconPercentage66", + "percentage-70": "IconPercentage70", + "percentage-75": "IconPercentage75", + "percentage-80": "IconPercentage80", + "percentage-90": "IconPercentage90", perfume: "IconPerfume", perspective: "IconPerspective", "perspective-off": "IconPerspectiveOff", @@ -3313,6 +3459,7 @@ export const ICONS = { "phone-x": "IconPhoneX", photo: "IconPhoto", "photo-ai": "IconPhotoAi", + "photo-bitcoin": "IconPhotoBitcoin", "photo-bolt": "IconPhotoBolt", "photo-cancel": "IconPhotoCancel", "photo-check": "IconPhotoCheck", @@ -3349,6 +3496,7 @@ export const ICONS = { physotherapist: "IconPhysotherapist", piano: "IconPiano", pick: "IconPick", + "picnic-table": "IconPicnicTable", "picture-in-picture": "IconPictureInPicture", "picture-in-picture-off": "IconPictureInPictureOff", "picture-in-picture-on": "IconPictureInPictureOn", @@ -3459,6 +3607,7 @@ export const ICONS = { printer: "IconPrinter", "printer-off": "IconPrinterOff", prism: "IconPrism", + "prism-light": "IconPrismLight", "prism-off": "IconPrismOff", "prism-plus": "IconPrismPlus", prison: "IconPrison", @@ -3470,6 +3619,7 @@ export const ICONS = { "progress-help": "IconProgressHelp", "progress-x": "IconProgressX", prompt: "IconPrompt", + prong: "IconProng", propeller: "IconPropeller", "propeller-off": "IconPropellerOff", protocol: "IconProtocol", @@ -3588,6 +3738,10 @@ export const ICONS = { rollercoaster: "IconRollercoaster", "rollercoaster-off": "IconRollercoasterOff", rosette: "IconRosette", + "rosette-discount": "IconRosetteDiscount", + "rosette-discount-check": "IconRosetteDiscountCheck", + "rosette-discount-check-off": "IconRosetteDiscountCheckOff", + "rosette-discount-off": "IconRosetteDiscountOff", "rosette-number-0": "IconRosetteNumber0", "rosette-number-1": "IconRosetteNumber1", "rosette-number-2": "IconRosetteNumber2", @@ -3601,6 +3755,7 @@ export const ICONS = { rotate: "IconRotate", "rotate-2": "IconRotate2", "rotate-360": "IconRotate360", + "rotate-3-d": "IconRotate3d", "rotate-clockwise": "IconRotateClockwise", "rotate-clockwise-2": "IconRotateClockwise2", "rotate-dot": "IconRotateDot", @@ -3628,6 +3783,7 @@ export const ICONS = { "ruler-2-off": "IconRuler2Off", "ruler-3": "IconRuler3", "ruler-measure": "IconRulerMeasure", + "ruler-measure-2": "IconRulerMeasure2", "ruler-off": "IconRulerOff", run: "IconRun", "rv-truck": "IconRvTruck", @@ -3650,6 +3806,7 @@ export const ICONS = { "scale-outline-off": "IconScaleOutlineOff", scan: "IconScan", "scan-eye": "IconScanEye", + "scan-position": "IconScanPosition", schema: "IconSchema", "schema-off": "IconSchemaOff", school: "IconSchool", @@ -3670,6 +3827,7 @@ export const ICONS = { "script-plus": "IconScriptPlus", "script-x": "IconScriptX", "scuba-diving": "IconScubaDiving", + "scuba-diving-tank": "IconScubaDivingTank", "scuba-mask": "IconScubaMask", "scuba-mask-off": "IconScubaMaskOff", sdk: "IconSdk", @@ -3728,7 +3886,7 @@ export const ICONS = { "share-2": "IconShare2", "share-3": "IconShare3", "share-off": "IconShareOff", - "shi-jumping": "IconShiJumping", + shareplay: "IconShareplay", shield: "IconShield", "shield-bolt": "IconShieldBolt", "shield-cancel": "IconShieldCancel", @@ -3766,6 +3924,7 @@ export const ICONS = { "shopping-bag-discount": "IconShoppingBagDiscount", "shopping-bag-edit": "IconShoppingBagEdit", "shopping-bag-exclamation": "IconShoppingBagExclamation", + "shopping-bag-heart": "IconShoppingBagHeart", "shopping-bag-minus": "IconShoppingBagMinus", "shopping-bag-plus": "IconShoppingBagPlus", "shopping-bag-search": "IconShoppingBagSearch", @@ -3818,6 +3977,7 @@ export const ICONS = { skateboarding: "IconSkateboarding", "skew-x": "IconSkewX", "skew-y": "IconSkewY", + "ski-jumping": "IconSkiJumping", skull: "IconSkull", slash: "IconSlash", slashes: "IconSlashes", @@ -3848,10 +4008,14 @@ export const ICONS = { "sort-ascending-2": "IconSortAscending2", "sort-ascending-letters": "IconSortAscendingLetters", "sort-ascending-numbers": "IconSortAscendingNumbers", + "sort-ascending-shapes": "IconSortAscendingShapes", + "sort-ascending-small-big": "IconSortAscendingSmallBig", "sort-descending": "IconSortDescending", "sort-descending-2": "IconSortDescending2", "sort-descending-letters": "IconSortDescendingLetters", "sort-descending-numbers": "IconSortDescendingNumbers", + "sort-descending-shapes": "IconSortDescendingShapes", + "sort-descending-small-big": "IconSortDescendingSmallBig", "sort-za": "IconSortZA", sos: "IconSos", soup: "IconSoup", @@ -3859,6 +4023,7 @@ export const ICONS = { "source-code": "IconSourceCode", space: "IconSpace", "space-off": "IconSpaceOff", + spaces: "IconSpaces", "spacing-horizontal": "IconSpacingHorizontal", "spacing-vertical": "IconSpacingVertical", spade: "IconSpade", @@ -4012,7 +4177,9 @@ export const ICONS = { "square-toggle": "IconSquareToggle", "square-toggle-horizontal": "IconSquareToggleHorizontal", "square-x": "IconSquareX", + squares: "IconSquares", "squares-diagonal": "IconSquaresDiagonal", + "squares-selected": "IconSquaresSelected", stack: "IconStack", "stack-2": "IconStack2", "stack-3": "IconStack3", @@ -4107,6 +4274,9 @@ export const ICONS = { target: "IconTarget", "target-arrow": "IconTargetArrow", "target-off": "IconTargetOff", + tax: "IconTax", + "tax-euro": "IconTaxEuro", + "tax-pound": "IconTaxPound", teapot: "IconTeapot", telescope: "IconTelescope", "telescope-off": "IconTelescopeOff", @@ -4116,6 +4286,8 @@ export const ICONS = { "temperature-minus": "IconTemperatureMinus", "temperature-off": "IconTemperatureOff", "temperature-plus": "IconTemperaturePlus", + "temperature-snow": "IconTemperatureSnow", + "temperature-sun": "IconTemperatureSun", template: "IconTemplate", "template-off": "IconTemplateOff", tent: "IconTent", @@ -4141,6 +4313,7 @@ export const ICONS = { "text-size": "IconTextSize", "text-spellcheck": "IconTextSpellcheck", "text-wrap": "IconTextWrap", + "text-wrap-column": "IconTextWrapColumn", "text-wrap-disabled": "IconTextWrapDisabled", texture: "IconTexture", theater: "IconTheater", @@ -4172,6 +4345,10 @@ export const ICONS = { "timeline-event-plus": "IconTimelineEventPlus", "timeline-event-text": "IconTimelineEventText", "timeline-event-x": "IconTimelineEventX", + timezone: "IconTimezone", + "tip-jar": "IconTipJar", + "tip-jar-euro": "IconTipJarEuro", + "tip-jar-pound": "IconTipJarPound", tir: "IconTir", "toggle-left": "IconToggleLeft", "toggle-right": "IconToggleRight", @@ -4225,6 +4402,11 @@ export const ICONS = { "transfer-out": "IconTransferOut", "transfer-vertical": "IconTransferVertical", transform: "IconTransform", + "transform-point": "IconTransformPoint", + "transform-point-bottom-left": "IconTransformPointBottomLeft", + "transform-point-bottom-right": "IconTransformPointBottomRight", + "transform-point-top-left": "IconTransformPointTopLeft", + "transform-point-top-right": "IconTransformPointTopRight", "transition-bottom": "IconTransitionBottom", "transition-left": "IconTransitionLeft", "transition-right": "IconTransitionRight", @@ -4262,11 +4444,17 @@ export const ICONS = { "truck-off": "IconTruckOff", "truck-return": "IconTruckReturn", txt: "IconTxt", + typeface: "IconTypeface", typography: "IconTypography", "typography-off": "IconTypographyOff", + "u-turn-left": "IconUTurnLeft", + "u-turn-right": "IconUTurnRight", ufo: "IconUfo", "ufo-off": "IconUfoOff", umbrella: "IconUmbrella", + "umbrella-2": "IconUmbrella2", + "umbrella-closed": "IconUmbrellaClosed", + "umbrella-closed-2": "IconUmbrellaClosed2", "umbrella-off": "IconUmbrellaOff", underline: "IconUnderline", universe: "IconUniverse", @@ -4275,6 +4463,7 @@ export const ICONS = { urgent: "IconUrgent", usb: "IconUsb", user: "IconUser", + "user-bitcoin": "IconUserBitcoin", "user-bolt": "IconUserBolt", "user-cancel": "IconUserCancel", "user-check": "IconUserCheck", @@ -4295,6 +4484,7 @@ export const ICONS = { "user-plus": "IconUserPlus", "user-question": "IconUserQuestion", "user-scan": "IconUserScan", + "user-screen": "IconUserScreen", "user-search": "IconUserSearch", "user-share": "IconUserShare", "user-shield": "IconUserShield", @@ -4335,10 +4525,14 @@ export const ICONS = { "video-off": "IconVideoOff", "video-plus": "IconVideoPlus", "view-360": "IconView360", + "view-360-arrow": "IconView360Arrow", + "view-360-number": "IconView360Number", "view-360-off": "IconView360Off", viewfinder: "IconViewfinder", "viewfinder-off": "IconViewfinderOff", "viewport-narrow": "IconViewportNarrow", + "viewport-short": "IconViewportShort", + "viewport-tall": "IconViewportTall", "viewport-wide": "IconViewportWide", vinyl: "IconVinyl", vip: "IconVip", @@ -4479,6 +4673,7 @@ export const ICONS = { "zodiac-scorpio": "IconZodiacScorpio", "zodiac-taurus": "IconZodiacTaurus", "zodiac-virgo": "IconZodiacVirgo", + zoom: "IconZoom", "zoom-cancel": "IconZoomCancel", "zoom-check": "IconZoomCheck", "zoom-code": "IconZoomCode", diff --git a/app/client/packages/design-system/widgets/src/components/Icon/src/styles.module.css b/app/client/packages/design-system/widgets/src/components/Icon/src/styles.module.css index ac95eef5a2..0cf6235250 100644 --- a/app/client/packages/design-system/widgets/src/components/Icon/src/styles.module.css +++ b/app/client/packages/design-system/widgets/src/components/Icon/src/styles.module.css @@ -1,3 +1,5 @@ +@import "../../../shared/colors/colors.module.css"; + .icon { &[data-size="small"] { inline-size: var(--icon-size-1); @@ -16,4 +18,10 @@ block-size: var(--icon-size-3); stroke-width: var(--stroke-width-3); } + + @each $color in colors { + &[data-color="$(color)"] { + color: var(--color-fg-$(color)); + } + } } diff --git a/app/client/packages/design-system/widgets/src/components/Icon/src/types.ts b/app/client/packages/design-system/widgets/src/components/Icon/src/types.ts index da67e1e12f..8c893ad66c 100644 --- a/app/client/packages/design-system/widgets/src/components/Icon/src/types.ts +++ b/app/client/packages/design-system/widgets/src/components/Icon/src/types.ts @@ -1,24 +1,30 @@ -import type { ComponentType } from "react"; -import type { IconProps as HeadlessIconProps } from "@design-system/headless"; - +import type { AriaLabelingProps, DOMProps } from "@react-types/shared"; import type { ICONS } from "./icons"; -import type { SIZES } from "../../../shared"; +import type { COLORS, SIZES } from "../../../shared"; -export type IconProps = Omit & { +export interface IconProps extends DOMProps, AriaLabelingProps { /** Size of the icon * @default medium * * Note: we need large size for the icon only */ size?: keyof typeof SIZES; - /** custom icon component - * Note: if custom icon is provided, name prop will be ignored + /** Color of the Icon + * @default inherit */ - icon?: ComponentType; + color?: keyof typeof COLORS; /** Name of the icon*/ - name?: keyof typeof ICONS; - /** storke width */ + name: keyof typeof ICONS; + /** Storke width */ stroke?: number; - /** filled variant */ + /** Filled variant */ filled?: boolean; -}; + /** Defines a string value that labels the current element. */ + "aria-label"?: string; + /** Defines the role of an element. */ + role?: string; + /** Sets the CSS className for the content popover. Only use as a **last resort**. */ + className?: string; + /** The aria-hidden state indicates whether the element is exposed to an accessibility API. */ + "aria-hidden"?: boolean | "false" | "true"; +} diff --git a/app/client/packages/design-system/widgets/src/components/Icon/stories/Icon.stories.tsx b/app/client/packages/design-system/widgets/src/components/Icon/stories/Icon.stories.tsx index 06da4f77d4..389c8b0686 100644 --- a/app/client/packages/design-system/widgets/src/components/Icon/stories/Icon.stories.tsx +++ b/app/client/packages/design-system/widgets/src/components/Icon/stories/Icon.stories.tsx @@ -42,6 +42,7 @@ export const Sizes: Story = { export const CustomIcon: Story = { render: () => ( { return ( diff --git a/app/client/packages/design-system/widgets/src/scripts/build-icons.ts b/app/client/packages/design-system/widgets/src/scripts/build-icons.ts index 9c9e20b20a..89ad9315da 100644 --- a/app/client/packages/design-system/widgets/src/scripts/build-icons.ts +++ b/app/client/packages/design-system/widgets/src/scripts/build-icons.ts @@ -3,11 +3,11 @@ import fs from "fs-extra"; import prettier from "prettier"; import kebabCase from "lodash/kebabCase"; -import * as ICONS from "@tabler/icons-react"; +import { icons } from "@tabler/icons-react"; let content = `export const ICONS = {`; -Object.keys(ICONS) +Object.keys(icons) .filter((name) => name !== "createReactComponent") .filter((name) => !name.endsWith("Filled")) .map((name) => { diff --git a/app/client/src/widgets/wds/WDSStatsWidget/component/index.tsx b/app/client/src/widgets/wds/WDSStatsWidget/component/index.tsx index 7953d121ba..eeaf61a9f8 100644 --- a/app/client/src/widgets/wds/WDSStatsWidget/component/index.tsx +++ b/app/client/src/widgets/wds/WDSStatsWidget/component/index.tsx @@ -23,7 +23,11 @@ export const StatsComponent = (props: StatsComponentProps) => { isInner > {iconName && iconName !== "(none)" && ( - + )} {label && ( @@ -40,7 +44,7 @@ export const StatsComponent = (props: StatsComponentProps) => { maxWidth="calc(100% - var(--sizing-1))" > ({ - label: capitalize(semantic), - value: semantic, - })), + options: [ + { + label: "Default", + value: "default", + }, + ...Object.values(COLORS).map((semantic) => ({ + label: capitalize(semantic), + value: semantic, + })), + ], isJSConvertible: true, isBindProperty: true, isTriggerProperty: false, - validation: { - type: ValidationTypes.TEXT, - params: { - allowedValues: Object.values(COLORS), - default: COLORS.accent, - }, - }, }, ], }, diff --git a/app/client/src/widgets/wds/WDSStatsWidget/widget/types.ts b/app/client/src/widgets/wds/WDSStatsWidget/widget/types.ts index 80de8575ec..871148c164 100644 --- a/app/client/src/widgets/wds/WDSStatsWidget/widget/types.ts +++ b/app/client/src/widgets/wds/WDSStatsWidget/widget/types.ts @@ -8,6 +8,6 @@ export interface StatsWidgetProps extends WidgetProps { iconAlign?: "start" | "end"; valueChange?: string; valueChangeColor: keyof typeof COLORS; - valueColor?: keyof typeof COLORS; + valueColor?: "default" | keyof typeof COLORS; caption?: string; } diff --git a/app/client/yarn.lock b/app/client/yarn.lock index 3353aeb8b3..0d3fc91fb6 100644 --- a/app/client/yarn.lock +++ b/app/client/yarn.lock @@ -3104,7 +3104,7 @@ __metadata: "@react-aria/visually-hidden": ^3.8.0 "@react-types/actiongroup": ^3.4.6 "@react-types/shared": ^3.23.1 - "@tabler/icons-react": ^2.45.0 + "@tabler/icons-react": ^3.10.0 "@types/fs-extra": ^11.0.4 clsx: ^2.0.0 colorjs.io: ^0.4.3 @@ -10202,22 +10202,21 @@ __metadata: languageName: node linkType: hard -"@tabler/icons-react@npm:^2.45.0": - version: 2.45.0 - resolution: "@tabler/icons-react@npm:2.45.0" +"@tabler/icons-react@npm:^3.10.0": + version: 3.10.0 + resolution: "@tabler/icons-react@npm:3.10.0" dependencies: - "@tabler/icons": 2.45.0 - prop-types: ^15.7.2 + "@tabler/icons": 3.10.0 peerDependencies: - react: ^16.5.1 || ^17.0.0 || ^18.0.0 - checksum: 2cc887b98a98abc09f353363c3d19a8173d2b2a6b7723d92bf752413e131a073f6c05613277af353935c9173b339475d5349c669a4a983c035426eabc0e2a642 + react: ">= 16" + checksum: 2bda44e263acf3ea932b28136dac4792520a50e23cdf2c307cab8fdf60f5c823f0e6921dc209a0b7645ad8a4b407a171e611be6257044558ab8863d9d2eb8a09 languageName: node linkType: hard -"@tabler/icons@npm:2.45.0": - version: 2.45.0 - resolution: "@tabler/icons@npm:2.45.0" - checksum: 01359255e2a1e3314262dc28891d39c984eaaa9d6f148de1a2a7c5de824e5da02f43cd29a735cb2a3ebcda1f801cb394f06cf5b4ecf5dd22ca0131d1cebe6ed3 +"@tabler/icons@npm:3.10.0": + version: 3.10.0 + resolution: "@tabler/icons@npm:3.10.0" + checksum: dbb2a8442acbcc11f4b19174bc625c66f8af36999ecb06cfdd85b90e1288b28b2092fbcc5d1346d827a3e43b9ff6300929c605555971e1490f7be93da506015e languageName: node linkType: hard