Add non-breaking *Icon aliases for static icon exports

packages/core/src/components/callout/callout.tsx

@@ -16,7 +16,14 @@
 
 import classNames from "classnames";
 
-import { Error, type IconName, InfoSign, type SVGIconProps, Tick, WarningSign } from "@blueprintjs/icons";
+import {
+    ErrorIcon,
+    type IconName,
+    InfoSignIcon,
+    type SVGIconProps,
+    TickIcon,
+    WarningSignIcon,
+} from "@blueprintjs/icons";
 
 import {
     Classes,
@@ -118,13 +125,13 @@ const renderIcon = (icon?: CalloutProps["icon"], intent?: Intent): IconName | Ma
     // 3. icon specified by intent prop
     switch (intent) {
         case Intent.DANGER:
-            return <Error {...iconProps} />;
+            return <ErrorIcon {...iconProps} />;
         case Intent.PRIMARY:
-            return <InfoSign {...iconProps} />;
+            return <InfoSignIcon {...iconProps} />;
         case Intent.WARNING:
-            return <WarningSign {...iconProps} />;
+            return <WarningSignIcon {...iconProps} />;
         case Intent.SUCCESS:
-            return <Tick {...iconProps} />;
+            return <TickIcon {...iconProps} />;
         default:
             return undefined;
     }

packages/core/src/components/dialog/dialog.tsx

@@ -17,7 +17,7 @@
 import classNames from "classnames";
 import { useMemo, useRef } from "react";
 
-import { type IconName, IconSize, SmallCross } from "@blueprintjs/icons";
+import { type IconName, IconSize, SmallCrossIcon } from "@blueprintjs/icons";
 
 import { Classes, DISPLAYNAME_PREFIX, type MaybeElement, mergeRefs, type Props } from "../../common";
 import * as Errors from "../../common/errors";
@@ -175,7 +175,7 @@ export const Dialog: React.FC<DialogProps> & { displayName?: string } = props =>
                                 <Button
                                     aria-label="Close"
                                     className={Classes.DIALOG_CLOSE_BUTTON}
-                                    icon={<SmallCross size={IconSize.STANDARD} />}
+                                    icon={<SmallCrossIcon size={IconSize.STANDARD} />}
                                     onClick={onClose}
                                     variant="minimal"
                                 />

packages/core/src/components/drawer/drawer.tsx

@@ -16,7 +16,7 @@
 
 import classNames from "classnames";
 
-import { type IconName, IconSize, SmallCross } from "@blueprintjs/icons";
+import { type IconName, IconSize, SmallCrossIcon } from "@blueprintjs/icons";
 
 import { AbstractPureComponent, Classes, type Props } from "../../common";
 import * as Errors from "../../common/errors";
@@ -167,7 +167,7 @@ export class Drawer extends AbstractPureComponent<DrawerProps> {
                 <Button
                     aria-label="Close"
                     className={Classes.DIALOG_CLOSE_BUTTON}
-                    icon={<SmallCross size={IconSize.LARGE} />}
+                    icon={<SmallCrossIcon size={IconSize.LARGE} />}
                     onClick={this.props.onClose}
                     variant="minimal"
                 />

packages/core/src/components/forms/numericInput.tsx

@@ -16,7 +16,7 @@
 
 import classNames from "classnames";
 
-import { ChevronDown, ChevronUp } from "@blueprintjs/icons";
+import { ChevronDownIcon, ChevronUpIcon } from "@blueprintjs/icons";
 
 import {
     AbstractPureComponent,
@@ -439,15 +439,15 @@ export class NumericInput extends AbstractPureComponent<
                     aria-label="increment"
                     aria-controls={this.numericInputId}
                     disabled={disabled || isIncrementDisabled}
-                    icon={<ChevronUp />}
+                    icon={<ChevronUpIcon />}
                     intent={intent}
                     {...this.incrementButtonHandlers}
                 />
                 <Button
                     aria-label="decrement"
                     aria-controls={this.numericInputId}
                     disabled={disabled || isDecrementDisabled}
-                    icon={<ChevronDown />}
+                    icon={<ChevronDownIcon />}
                     intent={intent}
                     {...this.decrementButtonHandlers}
                 />

packages/core/src/components/hotkeys/keyComboTag.tsx

@@ -18,16 +18,16 @@ import classNames from "classnames";
 import { Fragment, memo, useCallback } from "react";
 
 import {
-    ArrowDown,
-    ArrowLeft,
-    ArrowRight,
-    ArrowUp,
-    KeyCommand,
-    KeyControl,
-    KeyDelete,
-    KeyEnter,
-    KeyOption,
-    KeyShift,
+    ArrowDownIcon,
+    ArrowLeftIcon,
+    ArrowRightIcon,
+    ArrowUpIcon,
+    KeyCommandIcon,
+    KeyControlIcon,
+    KeyDeleteIcon,
+    KeyEnterIcon,
+    KeyOptionIcon,
+    KeyShiftIcon,
 } from "@blueprintjs/icons";
 
 import { Classes, DISPLAYNAME_PREFIX, type Props } from "../../common";
@@ -36,17 +36,17 @@ import { Icon } from "../icon/icon";
 import { isMac, normalizeKeyCombo } from "./hotkeyParser";
 
 const KEY_ICONS: Record<string, { icon: React.JSX.Element; iconTitle: string; isMacOnly?: boolean }> = {
-    alt: { icon: <KeyOption />, iconTitle: "Alt/Option key", isMacOnly: true },
-    arrowdown: { icon: <ArrowDown />, iconTitle: "Down key" },
-    arrowleft: { icon: <ArrowLeft />, iconTitle: "Left key" },
-    arrowright: { icon: <ArrowRight />, iconTitle: "Right key" },
-    arrowup: { icon: <ArrowUp />, iconTitle: "Up key" },
-    cmd: { icon: <KeyCommand />, iconTitle: "Command key", isMacOnly: true },
-    ctrl: { icon: <KeyControl />, iconTitle: "Control key", isMacOnly: true },
-    delete: { icon: <KeyDelete />, iconTitle: "Delete key" },
-    enter: { icon: <KeyEnter />, iconTitle: "Enter key" },
-    meta: { icon: <KeyCommand />, iconTitle: "Command key", isMacOnly: true },
-    shift: { icon: <KeyShift />, iconTitle: "Shift key", isMacOnly: true },
+    alt: { icon: <KeyOptionIcon />, iconTitle: "Alt/Option key", isMacOnly: true },
+    arrowdown: { icon: <ArrowDownIcon />, iconTitle: "Down key" },
+    arrowleft: { icon: <ArrowLeftIcon />, iconTitle: "Left key" },
+    arrowright: { icon: <ArrowRightIcon />, iconTitle: "Right key" },
+    arrowup: { icon: <ArrowUpIcon />, iconTitle: "Up key" },
+    cmd: { icon: <KeyCommandIcon />, iconTitle: "Command key", isMacOnly: true },
+    ctrl: { icon: <KeyControlIcon />, iconTitle: "Control key", isMacOnly: true },
+    delete: { icon: <KeyDeleteIcon />, iconTitle: "Delete key" },
+    enter: { icon: <KeyEnterIcon />, iconTitle: "Enter key" },
+    meta: { icon: <KeyCommandIcon />, iconTitle: "Command key", isMacOnly: true },
+    shift: { icon: <KeyShiftIcon />, iconTitle: "Shift key", isMacOnly: true },
 };
 
 /** Reverse table of some CONFIG_ALIASES fields, for display by KeyComboTag */

packages/core/src/components/html-select/htmlSelect.tsx

@@ -17,7 +17,7 @@
 import classNames from "classnames";
 import { forwardRef } from "react";
 
-import { CaretDown, DoubleCaretVertical, type IconName, type SVGIconProps } from "@blueprintjs/icons";
+import { CaretDownIcon, DoubleCaretVerticalIcon, type IconName, type SVGIconProps } from "@blueprintjs/icons";
 
 import { DISABLED, FILL, HTML_SELECT, LARGE, MINIMAL } from "../../common/classes";
 import { DISPLAYNAME_PREFIX, type OptionProps } from "../../common/props";
@@ -109,9 +109,9 @@ export const HTMLSelect: React.FC<HTMLSelectProps> = forwardRef((props, ref) =>
     const iconTitle = "Open dropdown";
     const endIcon =
         iconName === "double-caret-vertical" ? (
-            <DoubleCaretVertical title={iconTitle} {...iconProps} />
+            <DoubleCaretVerticalIcon title={iconTitle} {...iconProps} />
         ) : (
-            <CaretDown title={iconTitle} {...iconProps} />
+            <CaretDownIcon title={iconTitle} {...iconProps} />
         );
 
     const optionChildren = options.map(option => {

packages/core/src/components/icon/icon.mdx

@@ -131,7 +131,7 @@ function Example() {
 
 The `<Icon>` component loads icon paths via dynamic module imports by default. An alternative API
 is available in the **@blueprintjs/icons** package which provides static imports of each icon as
-a React component. The example below uses the `<Calendar>` component.
+a React component. The example below uses the `<CalendarIcon>` component.
 
 Note that some `<Icon>` props are not yet supported for these components, such as `intent`.
 

packages/core/src/components/menu/menuItem.tsx

@@ -17,7 +17,7 @@
 import classNames from "classnames";
 import { createElement, forwardRef } from "react";
 
-import { CaretRight, SmallTick } from "@blueprintjs/icons";
+import { CaretRightIcon, SmallTickIcon } from "@blueprintjs/icons";
 
 import { Classes } from "../../common";
 import { type ActionProps, DISPLAYNAME_PREFIX, removeNonHTMLProps } from "../../common/props";
@@ -262,7 +262,7 @@ export const MenuItem: React.FC<MenuItemProps> = forwardRef<HTMLLIElement, MenuI
             ...(disabled ? DISABLED_PROPS : {}),
             className: anchorClasses,
         },
-        isSelected ? <SmallTick className={Classes.MENU_ITEM_SELECTED_ICON} /> : undefined,
+        isSelected ? <SmallTickIcon className={Classes.MENU_ITEM_SELECTED_ICON} /> : undefined,
         hasIcon ? (
             // wrap icon in a <span> in case `icon` is a custom element rather than a built-in icon identifier,
             // so that we always render this class and hide it from a screen reader
@@ -274,7 +274,7 @@ export const MenuItem: React.FC<MenuItemProps> = forwardRef<HTMLLIElement, MenuI
             {text}
         </Text>,
         maybeLabel,
-        hasSubmenu ? <CaretRight className={Classes.MENU_SUBMENU_ICON} title="Open sub menu" /> : undefined,
+        hasSubmenu ? <CaretRightIcon className={Classes.MENU_SUBMENU_ICON} title="Open sub menu" /> : undefined,
     );
 
     const liClasses = classNames({ [Classes.MENU_SUBMENU]: hasSubmenu });

packages/core/src/components/section/section.tsx

@@ -17,7 +17,7 @@
 import classNames from "classnames";
 import { createElement, forwardRef, useCallback, useState } from "react";
 
-import { ChevronDown, ChevronUp, type IconName } from "@blueprintjs/icons";
+import { ChevronDownIcon, ChevronUpIcon, type IconName } from "@blueprintjs/icons";
 
 import { Classes, Elevation, Utils } from "../../common";
 import { DISPLAYNAME_PREFIX, type HTMLDivProps, type MaybeElement, type Props } from "../../common/props";
@@ -214,7 +214,7 @@ export const Section: React.FC<SectionProps> = forwardRef((props, ref) => {
                                     onKeyDown={clickElementOnKeyPress(["Enter", " "])}
                                     className={classNames(Classes.TEXT_MUTED, Classes.SECTION_HEADER_COLLAPSE_CARET)}
                                 >
-                                    {isCollapsed ? <ChevronDown /> : <ChevronUp />}
+                                    {isCollapsed ? <ChevronDownIcon /> : <ChevronUpIcon />}
                                 </span>
                             )}
                         </div>

packages/core/src/components/tag/tagRemoveButton.tsx

@@ -16,7 +16,7 @@
 
 import { useCallback } from "react";
 
-import { IconSize, SmallCross } from "@blueprintjs/icons";
+import { IconSize, SmallCrossIcon } from "@blueprintjs/icons";
 
 import { Classes, DISPLAYNAME_PREFIX } from "../../common";
 
@@ -43,7 +43,7 @@ export const TagRemoveButton = (props: TagRemoveButtonProps) => {
             onClick={handleRemoveClick}
             tabIndex={tabIndex}
         >
-            <SmallCross size={isLarge ? IconSize.LARGE : IconSize.STANDARD} />
+            <SmallCrossIcon size={isLarge ? IconSize.LARGE : IconSize.STANDARD} />
         </button>
     );
 };

packages/core/src/components/toast/toast.tsx

@@ -17,7 +17,7 @@
 import classNames from "classnames";
 import { forwardRef, useCallback, useEffect, useState } from "react";
 
-import { Cross } from "@blueprintjs/icons";
+import { CrossIcon } from "@blueprintjs/icons";
 
 import { Classes } from "../../common";
 import { DISPLAYNAME_PREFIX } from "../../common/props";
@@ -99,7 +99,7 @@ export const Toast = forwardRef<HTMLDivElement, ToastProps>((props, ref) => {
             </span>
             <ButtonGroup variant="minimal">
                 {action && <AnchorButton {...action} intent={undefined} onClick={handleActionClick} />}
-                {isCloseButtonShown && <Button aria-label="Close" icon={<Cross />} onClick={handleCloseClick} />}
+                {isCloseButtonShown && <Button aria-label="Close" icon={<CrossIcon />} onClick={handleCloseClick} />}
             </ButtonGroup>
         </div>
     );

packages/core/src/components/tree/treeNode.tsx

@@ -17,7 +17,7 @@
 import classNames from "classnames";
 import { Children, Component } from "react";
 
-import { ChevronRight } from "@blueprintjs/icons";
+import { ChevronRightIcon } from "@blueprintjs/icons";
 
 import { Classes, DISPLAYNAME_PREFIX } from "../../common";
 import { Collapse } from "../collapse/collapse";
@@ -104,7 +104,7 @@ export class TreeNode<T = {}> extends Component<TreeNodeProps<T>> {
                 isExpanded ? Classes.TREE_NODE_CARET_OPEN : Classes.TREE_NODE_CARET_CLOSED,
             );
             return (
-                <ChevronRight
+                <ChevronRightIcon
                     title={isExpanded ? "Collapse group" : "Expand group"}
                     className={caretClasses}
                     onClick={disabled === true ? undefined : this.handleCaretClick}

packages/datetime/src/components/react-day-picker/datePickerCaption.tsx

@@ -20,7 +20,7 @@ import { CaptionLabel, type CaptionProps, useDayPicker, useNavigation } from "re
 import innerText from "react-innertext";
 
 import { Button, DISPLAYNAME_PREFIX, HTMLSelect, type OptionProps } from "@blueprintjs/core";
-import { ChevronLeft, ChevronRight } from "@blueprintjs/icons";
+import { ChevronLeftIcon, ChevronRightIcon } from "@blueprintjs/icons";
 
 import { DateUtils, Months } from "../../common";
 import { DatePickerCaptionClasses as CaptionClasses, ReactDayPickerClasses } from "../../common/classes";
@@ -64,7 +64,7 @@ export const DatePickerCaption = (props: CaptionProps) => {
                 CaptionClasses.DATEPICKER3_NAV_BUTTON_PREVIOUS,
             )}
             disabled={!previousMonth}
-            icon={<ChevronLeft />}
+            icon={<ChevronLeftIcon />}
             onClick={handlePreviousClick}
             variant="minimal"
         />
@@ -74,7 +74,7 @@ export const DatePickerCaption = (props: CaptionProps) => {
             aria-label={labels.labelNext(nextMonth, { locale })}
             className={classNames(CaptionClasses.DATEPICKER3_NAV_BUTTON, CaptionClasses.DATEPICKER3_NAV_BUTTON_NEXT)}
             disabled={!nextMonth}
-            icon={<ChevronRight />}
+            icon={<ChevronRightIcon />}
             onClick={handleNextClick}
             variant="minimal"
         />

packages/datetime/src/components/react-day-picker/datePickerNavIcons.tsx

@@ -16,12 +16,12 @@
 
 import type { StyledComponent } from "react-day-picker";
 
-import { ChevronLeft, ChevronRight } from "@blueprintjs/icons";
+import { ChevronLeftIcon, ChevronRightIcon } from "@blueprintjs/icons";
 
 export function IconLeft({ children, ...props }: StyledComponent) {
-    return <ChevronLeft {...props} />;
+    return <ChevronLeftIcon {...props} />;
 }
 
 export function IconRight({ children, ...props }: StyledComponent) {
-    return <ChevronRight {...props} />;
+    return <ChevronRightIcon {...props} />;
 }

packages/docs-app/src/common/dateFnsLocaleSelect.tsx

@@ -17,7 +17,7 @@
 import { useCallback } from "react";
 
 import { Button, MenuItem } from "@blueprintjs/core";
-import { CaretDown } from "@blueprintjs/icons";
+import { CaretDownIcon } from "@blueprintjs/icons";
 import { type ItemRenderer, Select, type SelectPopoverProps } from "@blueprintjs/select";
 
 export type CommonDateFnsLocale = "de" | "en-US" | "es" | "fr" | "hi" | "it" | "zh-CN";
@@ -69,7 +69,7 @@ export const DateFnsLocaleSelect: React.FC<DateFnsLocaleSelectProps> = props =>
             onItemSelect={props.onChange}
             popoverProps={{ minimal: true, placement: "bottom-end", ...props.popoverProps }}
         >
-            <Button alignText="start" fill={true} endIcon={<CaretDown />} text={props.value} />
+            <Button alignText="start" fill={true} endIcon={<CaretDownIcon />} text={props.value} />
         </Select>
     );
 };

packages/docs-app/src/common/formattedDateRange.tsx

@@ -16,7 +16,7 @@
 
 import { Tag } from "@blueprintjs/core";
 import type { DateRange } from "@blueprintjs/datetime";
-import { ArrowRight } from "@blueprintjs/icons";
+import { ArrowRightIcon } from "@blueprintjs/icons";
 
 import { FormattedDateTag } from "./formattedDateTag";
 
@@ -35,7 +35,7 @@ export const FormattedDateRange: React.FC<FormattedDateRangeProps> = ({ range, s
     return (
         <div className="docs-date-range">
             <FormattedDateTag date={start} showTime={showTime} />
-            <ArrowRight />
+            <ArrowRightIcon />
             <FormattedDateTag date={end} showTime={showTime} />
         </div>
     );

packages/docs-app/src/examples/core-examples/iconGeneratedComponentExample.tsx

@@ -18,7 +18,7 @@ import { useState } from "react";
 
 import { H5, Label, Slider } from "@blueprintjs/core";
 import { Example, type ExampleProps } from "@blueprintjs/docs-theme";
-import { Calendar, IconSize } from "@blueprintjs/icons";
+import { CalendarIcon, IconSize } from "@blueprintjs/icons";
 
 const MAX_ICON_SIZE = 100;
 
@@ -45,7 +45,7 @@ export const IconGeneratedComponentExample: React.FC<ExampleProps> = props => {
 
     return (
         <Example options={options} {...props}>
-            <Calendar size={iconSize} />
+            <CalendarIcon size={iconSize} />
         </Example>
     );
 };

packages/docs-theme/src/components/documentation.tsx

@@ -26,7 +26,7 @@ import classNames from "classnames";
 import { PureComponent } from "react";
 
 import { Classes, Drawer, FocusStyleManager, HotkeysTarget, type Props } from "@blueprintjs/core";
-import { Search } from "@blueprintjs/icons";
+import { SearchIcon } from "@blueprintjs/icons";
 
 import {
     type DocsData,
@@ -216,7 +216,7 @@ export class Documentation extends PureComponent<DocumentationProps, Documentati
                                     {this.props.header}
                                     <div className="docs-nav-divider" />
                                     <NavButton
-                                        icon={<Search />}
+                                        icon={<SearchIcon />}
                                         hotkey="shift + s"
                                         text="Search..."
                                         onClick={this.handleOpenNavigator}