@blueprintjs/icons 5.1.2 → 5.1.4

package/lib/cjs/index.d.ts

@@ -1,7 +1,7 @@
 export { IconSvgPaths16, IconSvgPaths20, getIconPaths } from "./allPaths";
 export { Icons, IconLoaderOptions, IconPathsLoader } from "./iconLoader";
-export { SVGIconAttributes, SVGIconProps } from "./svgIconProps";
-export { SVGIconContainer, SVGIconContainerProps } from "./svgIconContainer";
+export { DefaultSVGIconAttributes, DefaultSVGIconProps, SVGIconAttributes, SVGIconProps } from "./svgIconProps";
+export { SVGIconContainer, SVGIconContainerComponent, SVGIconContainerProps } from "./svgIconContainer";
 export { getIconContentString, IconCodepoints } from "./iconCodepoints";
 export { IconName, IconNames } from "./iconNames";
 export { IconSize, IconPaths } from "./iconTypes";

package/lib/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;GAcG;;;AAEH,2FAA2F;AAC3F,uCAA0E;AAAjE,0GAAA,cAAc,OAAA;AAAE,0GAAA,cAAc,OAAA;AAAE,wGAAA,YAAY,OAAA;AAErD,2CAAyE;AAAhE,mGAAA,KAAK,OAAA;AAEd,uDAA6E;AAApE,oHAAA,gBAAgB,OAAA;AACzB,mDAAwE;AAA/D,sHAAA,oBAAoB,OAAA;AAAE,gHAAA,cAAc,OAAA;AAC7C,yCAAkD;AAA/B,sGAAA,SAAS,OAAA;AAC5B,yCAAkD;AAAzC,qGAAA,QAAQ,OAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;GAcG;;;AAEH,2FAA2F;AAC3F,uCAA0E;AAAjE,0GAAA,cAAc,OAAA;AAAE,0GAAA,cAAc,OAAA;AAAE,wGAAA,YAAY,OAAA;AAErD,2CAAyE;AAAhE,mGAAA,KAAK,OAAA;AAEd,uDAAwG;AAA/F,oHAAA,gBAAgB,OAAA;AACzB,mDAAwE;AAA/D,sHAAA,oBAAoB,OAAA;AAAE,gHAAA,cAAc,OAAA;AAC7C,yCAAkD;AAA/B,sGAAA,SAAS,OAAA;AAC5B,yCAAkD;AAAzC,qGAAA,QAAQ,OAAA"}

package/lib/cjs/svgIconContainer.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 import type { IconName } from "./iconNames";
 import type { SVGIconProps } from "./svgIconProps";
-export interface SVGIconContainerProps extends Omit<SVGIconProps, "children"> {
+export type SVGIconContainerProps<T extends Element> = Omit<SVGIconProps<T>, "children"> & {
     /**
      * Icon name.
      */
@@ -10,5 +10,15 @@ export interface SVGIconContainerProps extends Omit<SVGIconProps, "children"> {
      * Icon contents, loaded via `IconLoader` and specified as `<path>` elements.
      */
     children: JSX.Element | JSX.Element[];
+};
+/**
+ * Generic icon container component type. This is essentially a type hack required to make forwardRef work with generic
+ * components. Note that this slows down TypeScript compilation, but it better than the alternative of globally
+ * augmenting "@types/react".
+ *
+ * @see https://stackoverflow.com/a/73795494/7406866
+ */
+export interface SVGIconContainerComponent extends React.FC<SVGIconContainerProps<Element>> {
+    <T extends Element = Element>(props: SVGIconContainerProps<T>): React.ReactElement | null;
 }
-export declare const SVGIconContainer: React.FC<SVGIconContainerProps>;
+export declare const SVGIconContainer: SVGIconContainerComponent;

package/lib/cjs/svgIconContainer.js

@@ -21,6 +21,7 @@ var React = tslib_1.__importStar(require("react"));
 var Classes = tslib_1.__importStar(require("./classes"));
 var iconTypes_1 = require("./iconTypes");
 var jsUtils_1 = require("./jsUtils");
+// eslint-disable-next-line prefer-arrow-callback
 exports.SVGIconContainer = React.forwardRef(function (props, ref) {
     var children = props.children, className = props.className, color = props.color, htmlTitle = props.htmlTitle, iconName = props.iconName, _a = props.size, size = _a === void 0 ? iconTypes_1.IconSize.STANDARD : _a, svgProps = props.svgProps, _b = props.tagName, tagName = _b === void 0 ? "span" : _b, title = props.title, htmlProps = tslib_1.__rest(props, ["children", "className", "color", "htmlTitle", "iconName", "size", "svgProps", "tagName", "title"]);
     var isLarge = size >= iconTypes_1.IconSize.LARGE;

package/lib/cjs/svgIconContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"svgIconContainer.js","sourceRoot":"","sources":["../../src/svgIconContainer.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;GAaG;;;;AAEH,kEAAoC;AACpC,mDAA+B;AAE/B,yDAAqC;AAErC,yCAAuC;AACvC,qCAAqC;AAexB,QAAA,gBAAgB,GAAoC,KAAK,CAAC,UAAU,CAC7E,UAAC,KAAK,EAAE,GAAG;IAEH,IAAA,QAAQ,GAUR,KAAK,SAVG,EACR,SAAS,GAST,KAAK,UATI,EACT,KAAK,GAQL,KAAK,MARA,EACL,SAAS,GAOT,KAAK,UAPI,EACT,QAAQ,GAMR,KAAK,SANG,EACR,KAKA,KAAK,KALmB,EAAxB,IAAI,mBAAG,oBAAQ,CAAC,QAAQ,KAAA,EACxB,QAAQ,GAIR,KAAK,SAJG,EACR,KAGA,KAAK,QAHW,EAAhB,OAAO,mBAAG,MAAM,KAAA,EAChB,KAAK,GAEL,KAAK,MAFA,EACF,SAAS,kBACZ,KAAK,EAXH,mGAWL,CADe,CACN;IAEV,IAAM,OAAO,GAAG,IAAI,IAAI,oBAAQ,CAAC,KAAK,CAAC;IACvC,IAAM,aAAa,GAAG,OAAO,CAAC,CAAC,CAAC,oBAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,oBAAQ,CAAC,QAAQ,CAAC;IACnE,IAAM,OAAO,GAAG,cAAO,aAAa,cAAI,aAAa,CAAE,CAAC;IACxD,IAAM,OAAO,GAAG,IAAA,kBAAQ,EAAC,WAAW,CAAC,CAAC;IACtC,IAAM,cAAc,sBAChB,WAAW,EAAE,QAAQ,EACrB,IAAI,EAAE,KAAK,EACX,MAAM,EAAE,IAAI,EACZ,IAAI,EAAE,KAAK,EACX,OAAO,SAAA,EACP,KAAK,EAAE,IAAI,IACR,QAAQ,CACd,CAAC;IAEF,IAAI,OAAO,KAAK,IAAI,EAAE;QAClB,OAAO,CACH,iEAAsB,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,EAAE,GAAG,EAAE,GAAG,IAAM,cAAc,EAAM,SAAS;YACzF,KAAK,IAAI,+BAAO,EAAE,EAAE,OAAO,IAAG,KAAK,CAAS;YAC5C,QAAQ,CACP,CACT,CAAC;KACL;SAAM;QACH,OAAO,KAAK,CAAC,aAAa,CACtB,OAAO,wCAEA,SAAS,KACZ,aAAa,EAAE,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,EACvC,SAAS,EAAE,IAAA,oBAAU,EAAC,OAAO,CAAC,IAAI,EAAE,UAAG,OAAO,CAAC,IAAI,cAAI,QAAQ,CAAE,EAAE,SAAS,CAAC,EAC7E,GAAG,KAAA,EACH,KAAK,EAAE,SAAS,KAEpB,gDAAS,cAAc;YAClB,KAAK,IAAI,mCAAQ,KAAK,CAAS;YAC/B,QAAQ,CACP,CACT,CAAC;KACL;AACL,CAAC,CACJ,CAAC;AACF,wBAAgB,CAAC,WAAW,GAAG,6BAA6B,CAAC"}
+{"version":3,"file":"svgIconContainer.js","sourceRoot":"","sources":["../../src/svgIconContainer.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;GAaG;;;;AAEH,kEAAoC;AACpC,mDAA+B;AAE/B,yDAAqC;AAErC,yCAAuC;AACvC,qCAAqC;AA0BrC,iDAAiD;AACpC,QAAA,gBAAgB,GAA8B,KAAK,CAAC,UAAU,CAAC,UACxE,KAA+B,EAC/B,GAAiB;IAGb,IAAA,QAAQ,GAUR,KAAK,SAVG,EACR,SAAS,GAST,KAAK,UATI,EACT,KAAK,GAQL,KAAK,MARA,EACL,SAAS,GAOT,KAAK,UAPI,EACT,QAAQ,GAMR,KAAK,SANG,EACR,KAKA,KAAK,KALmB,EAAxB,IAAI,mBAAG,oBAAQ,CAAC,QAAQ,KAAA,EACxB,QAAQ,GAIR,KAAK,SAJG,EACR,KAGA,KAAK,QAHW,EAAhB,OAAO,mBAAG,MAAM,KAAA,EAChB,KAAK,GAEL,KAAK,MAFA,EACF,SAAS,kBACZ,KAAK,EAXH,mGAWL,CADe,CACN;IAEV,IAAM,OAAO,GAAG,IAAI,IAAI,oBAAQ,CAAC,KAAK,CAAC;IACvC,IAAM,aAAa,GAAG,OAAO,CAAC,CAAC,CAAC,oBAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,oBAAQ,CAAC,QAAQ,CAAC;IACnE,IAAM,OAAO,GAAG,cAAO,aAAa,cAAI,aAAa,CAAE,CAAC;IACxD,IAAM,OAAO,GAAG,IAAA,kBAAQ,EAAC,WAAW,CAAC,CAAC;IACtC,IAAM,cAAc,sBAChB,WAAW,EAAE,QAAQ,EACrB,IAAI,EAAE,KAAK,EACX,MAAM,EAAE,IAAI,EACZ,IAAI,EAAE,KAAK,EACX,OAAO,SAAA,EACP,KAAK,EAAE,IAAI,IACR,QAAQ,CACd,CAAC;IAEF,IAAI,OAAO,KAAK,IAAI,EAAE;QAClB,OAAO,CACH,iEACqB,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,EAC5C,GAAG,EAAE,GAA+B,IAChC,cAAc,EACd,SAAS;YAEZ,KAAK,IAAI,+BAAO,EAAE,EAAE,OAAO,IAAG,KAAK,CAAS;YAC5C,QAAQ,CACP,CACT,CAAC;KACL;SAAM;QACH,OAAO,KAAK,CAAC,aAAa,CACtB,OAAO,wCAEA,SAAS,KACZ,aAAa,EAAE,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,EACvC,SAAS,EAAE,IAAA,oBAAU,EAAC,OAAO,CAAC,IAAI,EAAE,UAAG,OAAO,CAAC,IAAI,cAAI,QAAQ,CAAE,EAAE,SAAS,CAAC,EAC7E,GAAG,KAAA,EACH,KAAK,EAAE,SAAS,KAEpB,gDAAS,cAAc;YAClB,KAAK,IAAI,mCAAQ,KAAK,CAAS;YAC/B,QAAQ,CACP,CACT,CAAC;KACL;AACL,CAAC,CAAC,CAAC;AACH,wBAAgB,CAAC,WAAW,GAAG,6BAA6B,CAAC"}

package/lib/cjs/svgIconProps.d.ts

@@ -1,17 +1,34 @@
 import * as React from "react";
+type OmittedDOMAttributes = "children" | "dangerouslySetInnerHTML";
 /**
- * DOM attributes assignable as props to the root element rendered by an SVG icon component
- * (which may be a `<span>`, `<svg>` or some custom HTML element).
+ * Default set of DOM attributes which are assignable as props to the root element rendered by an
+ * SVG icon component. This limited set of attributes is assignable to any `<Icon>` component regardless
+ * of its `tagName` prop (it works for both HTML and SVG elements).
  */
-export type SVGIconAttributes = React.AriaAttributes & Omit<React.DOMAttributes<Element>, "children" | "dangerouslySetInnerHTML"> & Pick<React.HTMLAttributes<Element>, "id" | "style" | "tabIndex" | "role">;
+export type DefaultSVGIconAttributes = React.AriaAttributes & Omit<React.DOMAttributes<Element>, OmittedDOMAttributes> & Pick<React.HTMLAttributes<Element>, "id" | "style" | "tabIndex" | "role">;
 /**
- * Interface used for generated icon components which already have their name and path defined
- * (through the rendered Handlebars template).
+ * DOM attributes which are assignable as props to the root element rendered by an SVG icon component.
+ * Specify a type parameter to narrow this type and allow more attributes to be passed to the root element.
+ *
+ * @see https://blueprintjs.com/docs/#core/components/icon.dom-attributes
+ *
+ * When `tagName` is specified, either:
+ *  - as a custom HTML element tag name,
+ *  - as `null` to signfiy that there should be no wrapper around the `<svg>` element,
+ *  - or its default value of "span" is used,
+ * then it may be useful to narrow this type to pass along additional attributes which not supported by
+ * the more general `DefaultSVGIconAttributes` interface. You can do this by specifying a generic type param
+ * on `<Icon>` components, for example:
+ *
+ * ```
+ * <Icon<HTMLSpanElement> icon="drag-handle-horizontal" draggable="false" />
+ * ```
  */
-export interface SVGIconProps extends React.RefAttributes<any>, SVGIconAttributes {
+export type SVGIconAttributes<T extends Element = Element> = T extends SVGElement ? Omit<React.SVGAttributes<T>, OmittedDOMAttributes> : T extends HTMLElement ? Omit<React.HTMLAttributes<T>, OmittedDOMAttributes> : DefaultSVGIconAttributes;
+export interface SVGIconOwnProps {
     /** A space-delimited list of class names to pass along to the SVG element. */
     className?: string;
-    /** This component does not support custom children. */
+    /** This component does not support child nodes. */
     children?: never;
     /**
      * Color of icon. This is used as the `fill` attribute on the `<svg>` image
@@ -56,3 +73,17 @@ export interface SVGIconProps extends React.RefAttributes<any>, SVGIconAttribute
     /** Props to apply to the `SVG` element */
     svgProps?: React.HTMLAttributes<SVGElement>;
 }
+/**
+ * Interface for generated icon components which have their name and icon paths statically defined
+ * inside their JS implementation.
+ *
+ * @see https://blueprintjs.com/docs/#core/components/icon.static-components
+ */
+export type SVGIconProps<T extends Element = Element> = React.RefAttributes<T> & SVGIconAttributes<T> & SVGIconOwnProps;
+/**
+ * The default SVG icon props interface, equivalent to `SVGIconProps` with its default type parameter.
+ * This is primarly exported for documentation purposes; users should reference `SVGIconProps<T>` instead.
+ */
+export interface DefaultSVGIconProps extends React.RefAttributes<Element>, SVGIconAttributes<Element>, SVGIconOwnProps {
+}
+export {};

package/lib/esm/index.d.ts

@@ -1,7 +1,7 @@
 export { IconSvgPaths16, IconSvgPaths20, getIconPaths } from "./allPaths";
 export { Icons, IconLoaderOptions, IconPathsLoader } from "./iconLoader";
-export { SVGIconAttributes, SVGIconProps } from "./svgIconProps";
-export { SVGIconContainer, SVGIconContainerProps } from "./svgIconContainer";
+export { DefaultSVGIconAttributes, DefaultSVGIconProps, SVGIconAttributes, SVGIconProps } from "./svgIconProps";
+export { SVGIconContainer, SVGIconContainerComponent, SVGIconContainerProps } from "./svgIconContainer";
 export { getIconContentString, IconCodepoints } from "./iconCodepoints";
 export { IconName, IconNames } from "./iconNames";
 export { IconSize, IconPaths } from "./iconTypes";

package/lib/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,2FAA2F;AAC3F,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAE1E,OAAO,EAAE,KAAK,EAAsC,MAAM,cAAc,CAAC;AAEzE,OAAO,EAAE,gBAAgB,EAAyB,MAAM,oBAAoB,CAAC;AAC7E,OAAO,EAAE,oBAAoB,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AACxE,OAAO,EAAY,SAAS,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAa,MAAM,aAAa,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,2FAA2F;AAC3F,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAE1E,OAAO,EAAE,KAAK,EAAsC,MAAM,cAAc,CAAC;AAEzE,OAAO,EAAE,gBAAgB,EAAoD,MAAM,oBAAoB,CAAC;AACxG,OAAO,EAAE,oBAAoB,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AACxE,OAAO,EAAY,SAAS,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAa,MAAM,aAAa,CAAC"}

package/lib/esm/svgIconContainer.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 import type { IconName } from "./iconNames";
 import type { SVGIconProps } from "./svgIconProps";
-export interface SVGIconContainerProps extends Omit<SVGIconProps, "children"> {
+export type SVGIconContainerProps<T extends Element> = Omit<SVGIconProps<T>, "children"> & {
     /**
      * Icon name.
      */
@@ -10,5 +10,15 @@ export interface SVGIconContainerProps extends Omit<SVGIconProps, "children"> {
      * Icon contents, loaded via `IconLoader` and specified as `<path>` elements.
      */
     children: JSX.Element | JSX.Element[];
+};
+/**
+ * Generic icon container component type. This is essentially a type hack required to make forwardRef work with generic
+ * components. Note that this slows down TypeScript compilation, but it better than the alternative of globally
+ * augmenting "@types/react".
+ *
+ * @see https://stackoverflow.com/a/73795494/7406866
+ */
+export interface SVGIconContainerComponent extends React.FC<SVGIconContainerProps<Element>> {
+    <T extends Element = Element>(props: SVGIconContainerProps<T>): React.ReactElement | null;
 }
-export declare const SVGIconContainer: React.FC<SVGIconContainerProps>;
+export declare const SVGIconContainer: SVGIconContainerComponent;

package/lib/esm/svgIconContainer.js

@@ -18,6 +18,7 @@ import * as React from "react";
 import * as Classes from "./classes";
 import { IconSize } from "./iconTypes";
 import { uniqueId } from "./jsUtils";
+// eslint-disable-next-line prefer-arrow-callback
 export var SVGIconContainer = React.forwardRef(function (props, ref) {
     var children = props.children, className = props.className, color = props.color, htmlTitle = props.htmlTitle, iconName = props.iconName, _a = props.size, size = _a === void 0 ? IconSize.STANDARD : _a, svgProps = props.svgProps, _b = props.tagName, tagName = _b === void 0 ? "span" : _b, title = props.title, htmlProps = __rest(props, ["children", "className", "color", "htmlTitle", "iconName", "size", "svgProps", "tagName", "title"]);
     var isLarge = size >= IconSize.LARGE;

package/lib/esm/svgIconContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"svgIconContainer.js","sourceRoot":"","sources":["../../src/svgIconContainer.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;;AAEH,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,OAAO,MAAM,WAAW,CAAC;AAErC,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAerC,MAAM,CAAC,IAAM,gBAAgB,GAAoC,KAAK,CAAC,UAAU,CAC7E,UAAC,KAAK,EAAE,GAAG;IAEH,IAAA,QAAQ,GAUR,KAAK,SAVG,EACR,SAAS,GAST,KAAK,UATI,EACT,KAAK,GAQL,KAAK,MARA,EACL,SAAS,GAOT,KAAK,UAPI,EACT,QAAQ,GAMR,KAAK,SANG,EACR,KAKA,KAAK,KALmB,EAAxB,IAAI,mBAAG,QAAQ,CAAC,QAAQ,KAAA,EACxB,QAAQ,GAIR,KAAK,SAJG,EACR,KAGA,KAAK,QAHW,EAAhB,OAAO,mBAAG,MAAM,KAAA,EAChB,KAAK,GAEL,KAAK,MAFA,EACF,SAAS,UACZ,KAAK,EAXH,mGAWL,CADe,CACN;IAEV,IAAM,OAAO,GAAG,IAAI,IAAI,QAAQ,CAAC,KAAK,CAAC;IACvC,IAAM,aAAa,GAAG,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,QAAQ,CAAC;IACnE,IAAM,OAAO,GAAG,cAAO,aAAa,cAAI,aAAa,CAAE,CAAC;IACxD,IAAM,OAAO,GAAG,QAAQ,CAAC,WAAW,CAAC,CAAC;IACtC,IAAM,cAAc,cAChB,WAAW,EAAE,QAAQ,EACrB,IAAI,EAAE,KAAK,EACX,MAAM,EAAE,IAAI,EACZ,IAAI,EAAE,KAAK,EACX,OAAO,SAAA,EACP,KAAK,EAAE,IAAI,IACR,QAAQ,CACd,CAAC;IAEF,IAAI,OAAO,KAAK,IAAI,EAAE;QAClB,OAAO,CACH,yDAAsB,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,EAAE,GAAG,EAAE,GAAG,IAAM,cAAc,EAAM,SAAS;YACzF,KAAK,IAAI,+BAAO,EAAE,EAAE,OAAO,IAAG,KAAK,CAAS;YAC5C,QAAQ,CACP,CACT,CAAC;KACL;SAAM;QACH,OAAO,KAAK,CAAC,aAAa,CACtB,OAAO,wBAEA,SAAS,KACZ,aAAa,EAAE,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,EACvC,SAAS,EAAE,UAAU,CAAC,OAAO,CAAC,IAAI,EAAE,UAAG,OAAO,CAAC,IAAI,cAAI,QAAQ,CAAE,EAAE,SAAS,CAAC,EAC7E,GAAG,KAAA,EACH,KAAK,EAAE,SAAS,KAEpB,wCAAS,cAAc;YAClB,KAAK,IAAI,mCAAQ,KAAK,CAAS;YAC/B,QAAQ,CACP,CACT,CAAC;KACL;AACL,CAAC,CACJ,CAAC;AACF,gBAAgB,CAAC,WAAW,GAAG,6BAA6B,CAAC"}
+{"version":3,"file":"svgIconContainer.js","sourceRoot":"","sources":["../../src/svgIconContainer.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;;AAEH,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,OAAO,MAAM,WAAW,CAAC;AAErC,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AA0BrC,iDAAiD;AACjD,MAAM,CAAC,IAAM,gBAAgB,GAA8B,KAAK,CAAC,UAAU,CAAC,UACxE,KAA+B,EAC/B,GAAiB;IAGb,IAAA,QAAQ,GAUR,KAAK,SAVG,EACR,SAAS,GAST,KAAK,UATI,EACT,KAAK,GAQL,KAAK,MARA,EACL,SAAS,GAOT,KAAK,UAPI,EACT,QAAQ,GAMR,KAAK,SANG,EACR,KAKA,KAAK,KALmB,EAAxB,IAAI,mBAAG,QAAQ,CAAC,QAAQ,KAAA,EACxB,QAAQ,GAIR,KAAK,SAJG,EACR,KAGA,KAAK,QAHW,EAAhB,OAAO,mBAAG,MAAM,KAAA,EAChB,KAAK,GAEL,KAAK,MAFA,EACF,SAAS,UACZ,KAAK,EAXH,mGAWL,CADe,CACN;IAEV,IAAM,OAAO,GAAG,IAAI,IAAI,QAAQ,CAAC,KAAK,CAAC;IACvC,IAAM,aAAa,GAAG,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,QAAQ,CAAC;IACnE,IAAM,OAAO,GAAG,cAAO,aAAa,cAAI,aAAa,CAAE,CAAC;IACxD,IAAM,OAAO,GAAG,QAAQ,CAAC,WAAW,CAAC,CAAC;IACtC,IAAM,cAAc,cAChB,WAAW,EAAE,QAAQ,EACrB,IAAI,EAAE,KAAK,EACX,MAAM,EAAE,IAAI,EACZ,IAAI,EAAE,KAAK,EACX,OAAO,SAAA,EACP,KAAK,EAAE,IAAI,IACR,QAAQ,CACd,CAAC;IAEF,IAAI,OAAO,KAAK,IAAI,EAAE;QAClB,OAAO,CACH,yDACqB,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,EAC5C,GAAG,EAAE,GAA+B,IAChC,cAAc,EACd,SAAS;YAEZ,KAAK,IAAI,+BAAO,EAAE,EAAE,OAAO,IAAG,KAAK,CAAS;YAC5C,QAAQ,CACP,CACT,CAAC;KACL;SAAM;QACH,OAAO,KAAK,CAAC,aAAa,CACtB,OAAO,wBAEA,SAAS,KACZ,aAAa,EAAE,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,EACvC,SAAS,EAAE,UAAU,CAAC,OAAO,CAAC,IAAI,EAAE,UAAG,OAAO,CAAC,IAAI,cAAI,QAAQ,CAAE,EAAE,SAAS,CAAC,EAC7E,GAAG,KAAA,EACH,KAAK,EAAE,SAAS,KAEpB,wCAAS,cAAc;YAClB,KAAK,IAAI,mCAAQ,KAAK,CAAS;YAC/B,QAAQ,CACP,CACT,CAAC;KACL;AACL,CAAC,CAAC,CAAC;AACH,gBAAgB,CAAC,WAAW,GAAG,6BAA6B,CAAC"}

package/lib/esm/svgIconProps.d.ts

@@ -1,17 +1,34 @@
 import * as React from "react";
+type OmittedDOMAttributes = "children" | "dangerouslySetInnerHTML";
 /**
- * DOM attributes assignable as props to the root element rendered by an SVG icon component
- * (which may be a `<span>`, `<svg>` or some custom HTML element).
+ * Default set of DOM attributes which are assignable as props to the root element rendered by an
+ * SVG icon component. This limited set of attributes is assignable to any `<Icon>` component regardless
+ * of its `tagName` prop (it works for both HTML and SVG elements).
  */
-export type SVGIconAttributes = React.AriaAttributes & Omit<React.DOMAttributes<Element>, "children" | "dangerouslySetInnerHTML"> & Pick<React.HTMLAttributes<Element>, "id" | "style" | "tabIndex" | "role">;
+export type DefaultSVGIconAttributes = React.AriaAttributes & Omit<React.DOMAttributes<Element>, OmittedDOMAttributes> & Pick<React.HTMLAttributes<Element>, "id" | "style" | "tabIndex" | "role">;
 /**
- * Interface used for generated icon components which already have their name and path defined
- * (through the rendered Handlebars template).
+ * DOM attributes which are assignable as props to the root element rendered by an SVG icon component.
+ * Specify a type parameter to narrow this type and allow more attributes to be passed to the root element.
+ *
+ * @see https://blueprintjs.com/docs/#core/components/icon.dom-attributes
+ *
+ * When `tagName` is specified, either:
+ *  - as a custom HTML element tag name,
+ *  - as `null` to signfiy that there should be no wrapper around the `<svg>` element,
+ *  - or its default value of "span" is used,
+ * then it may be useful to narrow this type to pass along additional attributes which not supported by
+ * the more general `DefaultSVGIconAttributes` interface. You can do this by specifying a generic type param
+ * on `<Icon>` components, for example:
+ *
+ * ```
+ * <Icon<HTMLSpanElement> icon="drag-handle-horizontal" draggable="false" />
+ * ```
  */
-export interface SVGIconProps extends React.RefAttributes<any>, SVGIconAttributes {
+export type SVGIconAttributes<T extends Element = Element> = T extends SVGElement ? Omit<React.SVGAttributes<T>, OmittedDOMAttributes> : T extends HTMLElement ? Omit<React.HTMLAttributes<T>, OmittedDOMAttributes> : DefaultSVGIconAttributes;
+export interface SVGIconOwnProps {
     /** A space-delimited list of class names to pass along to the SVG element. */
     className?: string;
-    /** This component does not support custom children. */
+    /** This component does not support child nodes. */
     children?: never;
     /**
      * Color of icon. This is used as the `fill` attribute on the `<svg>` image
@@ -56,3 +73,17 @@ export interface SVGIconProps extends React.RefAttributes<any>, SVGIconAttribute
     /** Props to apply to the `SVG` element */
     svgProps?: React.HTMLAttributes<SVGElement>;
 }
+/**
+ * Interface for generated icon components which have their name and icon paths statically defined
+ * inside their JS implementation.
+ *
+ * @see https://blueprintjs.com/docs/#core/components/icon.static-components
+ */
+export type SVGIconProps<T extends Element = Element> = React.RefAttributes<T> & SVGIconAttributes<T> & SVGIconOwnProps;
+/**
+ * The default SVG icon props interface, equivalent to `SVGIconProps` with its default type parameter.
+ * This is primarly exported for documentation purposes; users should reference `SVGIconProps<T>` instead.
+ */
+export interface DefaultSVGIconProps extends React.RefAttributes<Element>, SVGIconAttributes<Element>, SVGIconOwnProps {
+}
+export {};

package/lib/esnext/index.d.ts

@@ -1,7 +1,7 @@
 export { IconSvgPaths16, IconSvgPaths20, getIconPaths } from "./allPaths";
 export { Icons, IconLoaderOptions, IconPathsLoader } from "./iconLoader";
-export { SVGIconAttributes, SVGIconProps } from "./svgIconProps";
-export { SVGIconContainer, SVGIconContainerProps } from "./svgIconContainer";
+export { DefaultSVGIconAttributes, DefaultSVGIconProps, SVGIconAttributes, SVGIconProps } from "./svgIconProps";
+export { SVGIconContainer, SVGIconContainerComponent, SVGIconContainerProps } from "./svgIconContainer";
 export { getIconContentString, IconCodepoints } from "./iconCodepoints";
 export { IconName, IconNames } from "./iconNames";
 export { IconSize, IconPaths } from "./iconTypes";

package/lib/esnext/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,2FAA2F;AAC3F,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAE1E,OAAO,EAAE,KAAK,EAAsC,MAAM,cAAc,CAAC;AAEzE,OAAO,EAAE,gBAAgB,EAAyB,MAAM,oBAAoB,CAAC;AAC7E,OAAO,EAAE,oBAAoB,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AACxE,OAAO,EAAY,SAAS,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAa,MAAM,aAAa,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,2FAA2F;AAC3F,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAE1E,OAAO,EAAE,KAAK,EAAsC,MAAM,cAAc,CAAC;AAEzE,OAAO,EAAE,gBAAgB,EAAoD,MAAM,oBAAoB,CAAC;AACxG,OAAO,EAAE,oBAAoB,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AACxE,OAAO,EAAY,SAAS,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAa,MAAM,aAAa,CAAC"}

package/lib/esnext/svgIconContainer.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 import type { IconName } from "./iconNames";
 import type { SVGIconProps } from "./svgIconProps";
-export interface SVGIconContainerProps extends Omit<SVGIconProps, "children"> {
+export type SVGIconContainerProps<T extends Element> = Omit<SVGIconProps<T>, "children"> & {
     /**
      * Icon name.
      */
@@ -10,5 +10,15 @@ export interface SVGIconContainerProps extends Omit<SVGIconProps, "children"> {
      * Icon contents, loaded via `IconLoader` and specified as `<path>` elements.
      */
     children: JSX.Element | JSX.Element[];
+};
+/**
+ * Generic icon container component type. This is essentially a type hack required to make forwardRef work with generic
+ * components. Note that this slows down TypeScript compilation, but it better than the alternative of globally
+ * augmenting "@types/react".
+ *
+ * @see https://stackoverflow.com/a/73795494/7406866
+ */
+export interface SVGIconContainerComponent extends React.FC<SVGIconContainerProps<Element>> {
+    <T extends Element = Element>(props: SVGIconContainerProps<T>): React.ReactElement | null;
 }
-export declare const SVGIconContainer: React.FC<SVGIconContainerProps>;
+export declare const SVGIconContainer: SVGIconContainerComponent;

package/lib/esnext/svgIconContainer.js

@@ -17,7 +17,8 @@ import * as React from "react";
 import * as Classes from "./classes";
 import { IconSize } from "./iconTypes";
 import { uniqueId } from "./jsUtils";
-export const SVGIconContainer = React.forwardRef((props, ref) => {
+// eslint-disable-next-line prefer-arrow-callback
+export const SVGIconContainer = React.forwardRef(function (props, ref) {
     const { children, className, color, htmlTitle, iconName, size = IconSize.STANDARD, svgProps, tagName = "span", title, ...htmlProps } = props;
     const isLarge = size >= IconSize.LARGE;
     const pixelGridSize = isLarge ? IconSize.LARGE : IconSize.STANDARD;

package/lib/esnext/svgIconContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"svgIconContainer.js","sourceRoot":"","sources":["../../src/svgIconContainer.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAEH,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,OAAO,MAAM,WAAW,CAAC;AAErC,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAerC,MAAM,CAAC,MAAM,gBAAgB,GAAoC,KAAK,CAAC,UAAU,CAC7E,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACX,MAAM,EACF,QAAQ,EACR,SAAS,EACT,KAAK,EACL,SAAS,EACT,QAAQ,EACR,IAAI,GAAG,QAAQ,CAAC,QAAQ,EACxB,QAAQ,EACR,OAAO,GAAG,MAAM,EAChB,KAAK,EACL,GAAG,SAAS,EACf,GAAG,KAAK,CAAC;IAEV,MAAM,OAAO,GAAG,IAAI,IAAI,QAAQ,CAAC,KAAK,CAAC;IACvC,MAAM,aAAa,GAAG,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,QAAQ,CAAC;IACnE,MAAM,OAAO,GAAG,OAAO,aAAa,IAAI,aAAa,EAAE,CAAC;IACxD,MAAM,OAAO,GAAG,QAAQ,CAAC,WAAW,CAAC,CAAC;IACtC,MAAM,cAAc,GAAG;QACnB,WAAW,EAAE,QAAQ;QACrB,IAAI,EAAE,KAAK;QACX,MAAM,EAAE,IAAI;QACZ,IAAI,EAAE,KAAK;QACX,OAAO;QACP,KAAK,EAAE,IAAI;QACX,GAAG,QAAQ;KACd,CAAC;IAEF,IAAI,OAAO,KAAK,IAAI,EAAE;QAClB,OAAO,CACH,gDAAsB,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,EAAE,GAAG,EAAE,GAAG,KAAM,cAAc,KAAM,SAAS;YACzF,KAAK,IAAI,+BAAO,EAAE,EAAE,OAAO,IAAG,KAAK,CAAS;YAC5C,QAAQ,CACP,CACT,CAAC;KACL;SAAM;QACH,OAAO,KAAK,CAAC,aAAa,CACtB,OAAO,EACP;YACI,GAAG,SAAS;YACZ,aAAa,EAAE,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI;YACvC,SAAS,EAAE,UAAU,CAAC,OAAO,CAAC,IAAI,EAAE,GAAG,OAAO,CAAC,IAAI,IAAI,QAAQ,EAAE,EAAE,SAAS,CAAC;YAC7E,GAAG;YACH,KAAK,EAAE,SAAS;SACnB,EACD,gCAAS,cAAc;YAClB,KAAK,IAAI,mCAAQ,KAAK,CAAS;YAC/B,QAAQ,CACP,CACT,CAAC;KACL;AACL,CAAC,CACJ,CAAC;AACF,gBAAgB,CAAC,WAAW,GAAG,6BAA6B,CAAC"}
+{"version":3,"file":"svgIconContainer.js","sourceRoot":"","sources":["../../src/svgIconContainer.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAEH,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,OAAO,MAAM,WAAW,CAAC;AAErC,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AA0BrC,iDAAiD;AACjD,MAAM,CAAC,MAAM,gBAAgB,GAA8B,KAAK,CAAC,UAAU,CAAC,UACxE,KAA+B,EAC/B,GAAiB;IAEjB,MAAM,EACF,QAAQ,EACR,SAAS,EACT,KAAK,EACL,SAAS,EACT,QAAQ,EACR,IAAI,GAAG,QAAQ,CAAC,QAAQ,EACxB,QAAQ,EACR,OAAO,GAAG,MAAM,EAChB,KAAK,EACL,GAAG,SAAS,EACf,GAAG,KAAK,CAAC;IAEV,MAAM,OAAO,GAAG,IAAI,IAAI,QAAQ,CAAC,KAAK,CAAC;IACvC,MAAM,aAAa,GAAG,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,QAAQ,CAAC;IACnE,MAAM,OAAO,GAAG,OAAO,aAAa,IAAI,aAAa,EAAE,CAAC;IACxD,MAAM,OAAO,GAAG,QAAQ,CAAC,WAAW,CAAC,CAAC;IACtC,MAAM,cAAc,GAAG;QACnB,WAAW,EAAE,QAAQ;QACrB,IAAI,EAAE,KAAK;QACX,MAAM,EAAE,IAAI;QACZ,IAAI,EAAE,KAAK;QACX,OAAO;QACP,KAAK,EAAE,IAAI;QACX,GAAG,QAAQ;KACd,CAAC;IAEF,IAAI,OAAO,KAAK,IAAI,EAAE;QAClB,OAAO,CACH,gDACqB,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,EAC5C,GAAG,EAAE,GAA+B,KAChC,cAAc,KACd,SAAS;YAEZ,KAAK,IAAI,+BAAO,EAAE,EAAE,OAAO,IAAG,KAAK,CAAS;YAC5C,QAAQ,CACP,CACT,CAAC;KACL;SAAM;QACH,OAAO,KAAK,CAAC,aAAa,CACtB,OAAO,EACP;YACI,GAAG,SAAS;YACZ,aAAa,EAAE,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI;YACvC,SAAS,EAAE,UAAU,CAAC,OAAO,CAAC,IAAI,EAAE,GAAG,OAAO,CAAC,IAAI,IAAI,QAAQ,EAAE,EAAE,SAAS,CAAC;YAC7E,GAAG;YACH,KAAK,EAAE,SAAS;SACnB,EACD,gCAAS,cAAc;YAClB,KAAK,IAAI,mCAAQ,KAAK,CAAS;YAC/B,QAAQ,CACP,CACT,CAAC;KACL;AACL,CAAC,CAAC,CAAC;AACH,gBAAgB,CAAC,WAAW,GAAG,6BAA6B,CAAC"}

package/lib/esnext/svgIconProps.d.ts

@@ -1,17 +1,34 @@
 import * as React from "react";
+type OmittedDOMAttributes = "children" | "dangerouslySetInnerHTML";
 /**
- * DOM attributes assignable as props to the root element rendered by an SVG icon component
- * (which may be a `<span>`, `<svg>` or some custom HTML element).
+ * Default set of DOM attributes which are assignable as props to the root element rendered by an
+ * SVG icon component. This limited set of attributes is assignable to any `<Icon>` component regardless
+ * of its `tagName` prop (it works for both HTML and SVG elements).
  */
-export type SVGIconAttributes = React.AriaAttributes & Omit<React.DOMAttributes<Element>, "children" | "dangerouslySetInnerHTML"> & Pick<React.HTMLAttributes<Element>, "id" | "style" | "tabIndex" | "role">;
+export type DefaultSVGIconAttributes = React.AriaAttributes & Omit<React.DOMAttributes<Element>, OmittedDOMAttributes> & Pick<React.HTMLAttributes<Element>, "id" | "style" | "tabIndex" | "role">;
 /**
- * Interface used for generated icon components which already have their name and path defined
- * (through the rendered Handlebars template).
+ * DOM attributes which are assignable as props to the root element rendered by an SVG icon component.
+ * Specify a type parameter to narrow this type and allow more attributes to be passed to the root element.
+ *
+ * @see https://blueprintjs.com/docs/#core/components/icon.dom-attributes
+ *
+ * When `tagName` is specified, either:
+ *  - as a custom HTML element tag name,
+ *  - as `null` to signfiy that there should be no wrapper around the `<svg>` element,
+ *  - or its default value of "span" is used,
+ * then it may be useful to narrow this type to pass along additional attributes which not supported by
+ * the more general `DefaultSVGIconAttributes` interface. You can do this by specifying a generic type param
+ * on `<Icon>` components, for example:
+ *
+ * ```
+ * <Icon<HTMLSpanElement> icon="drag-handle-horizontal" draggable="false" />
+ * ```
  */
-export interface SVGIconProps extends React.RefAttributes<any>, SVGIconAttributes {
+export type SVGIconAttributes<T extends Element = Element> = T extends SVGElement ? Omit<React.SVGAttributes<T>, OmittedDOMAttributes> : T extends HTMLElement ? Omit<React.HTMLAttributes<T>, OmittedDOMAttributes> : DefaultSVGIconAttributes;
+export interface SVGIconOwnProps {
     /** A space-delimited list of class names to pass along to the SVG element. */
     className?: string;
-    /** This component does not support custom children. */
+    /** This component does not support child nodes. */
     children?: never;
     /**
      * Color of icon. This is used as the `fill` attribute on the `<svg>` image
@@ -56,3 +73,17 @@ export interface SVGIconProps extends React.RefAttributes<any>, SVGIconAttribute
     /** Props to apply to the `SVG` element */
     svgProps?: React.HTMLAttributes<SVGElement>;
 }
+/**
+ * Interface for generated icon components which have their name and icon paths statically defined
+ * inside their JS implementation.
+ *
+ * @see https://blueprintjs.com/docs/#core/components/icon.static-components
+ */
+export type SVGIconProps<T extends Element = Element> = React.RefAttributes<T> & SVGIconAttributes<T> & SVGIconOwnProps;
+/**
+ * The default SVG icon props interface, equivalent to `SVGIconProps` with its default type parameter.
+ * This is primarly exported for documentation purposes; users should reference `SVGIconProps<T>` instead.
+ */
+export interface DefaultSVGIconProps extends React.RefAttributes<Element>, SVGIconAttributes<Element>, SVGIconOwnProps {
+}
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@blueprintjs/icons",
-    "version": "5.1.2",
+    "version": "5.1.4",
     "description": "Components, fonts, icons, and css files for creating and displaying icons.",
     "main": "lib/cjs/generated/index.js",
     "module": "lib/esm/generated/index.js",

package/src/icons-list.md

@@ -7,6 +7,7 @@ Be sure to check out the docs on [loading icons](#icons/loading-icons) and how t
 <div class="@ns-callout @ns-intent-primary @ns-icon-info-sign">
 
 See the [**`Icon` component documentation**](#core/components/icon) (in the `@blueprintjs/core` package) for React API details.
+
 </div>
 
 @reactDocs Icons

package/src/index.md

@@ -10,6 +10,7 @@ provides  provides over 500 vector UI icons in two sizes (16px and 20px) and two
 <div class="@ns-callout @ns-intent-primary @ns-icon-info-sign">
 
 See the [**`Icon` component documentation**](#core/components/icon) (in the `@blueprintjs/core` package) for React API details.
+
 </div>
 
 ```sh

package/src/index.ts

@@ -18,8 +18,8 @@
 export { IconSvgPaths16, IconSvgPaths20, getIconPaths } from "./allPaths";
 
 export { Icons, IconLoaderOptions, IconPathsLoader } from "./iconLoader";
-export { SVGIconAttributes, SVGIconProps } from "./svgIconProps";
-export { SVGIconContainer, SVGIconContainerProps } from "./svgIconContainer";
+export { DefaultSVGIconAttributes, DefaultSVGIconProps, SVGIconAttributes, SVGIconProps } from "./svgIconProps";
+export { SVGIconContainer, SVGIconContainerComponent, SVGIconContainerProps } from "./svgIconContainer";
 export { getIconContentString, IconCodepoints } from "./iconCodepoints";
 export { IconName, IconNames } from "./iconNames";
 export { IconSize, IconPaths } from "./iconTypes";

package/src/loading-icons.md

@@ -11,6 +11,7 @@ approaches.
 <div class="@ns-callout @ns-intent-primary @ns-icon-info-sign">
 
 See the [**`Icon` component documentation**](#core/components/icon) (in the `@blueprintjs/core` package) for React API details.
+
 </div>
 
 @## Using static imports

package/src/svgIconContainer.tsx

@@ -22,7 +22,7 @@ import { IconSize } from "./iconTypes";
 import { uniqueId } from "./jsUtils";
 import type { SVGIconProps } from "./svgIconProps";
 
-export interface SVGIconContainerProps extends Omit<SVGIconProps, "children"> {
+export type SVGIconContainerProps<T extends Element> = Omit<SVGIconProps<T>, "children"> & {
     /**
      * Icon name.
      */
@@ -32,60 +32,78 @@ export interface SVGIconContainerProps extends Omit<SVGIconProps, "children"> {
      * Icon contents, loaded via `IconLoader` and specified as `<path>` elements.
      */
     children: JSX.Element | JSX.Element[];
+};
+
+/**
+ * Generic icon container component type. This is essentially a type hack required to make forwardRef work with generic
+ * components. Note that this slows down TypeScript compilation, but it better than the alternative of globally
+ * augmenting "@types/react".
+ *
+ * @see https://stackoverflow.com/a/73795494/7406866
+ */
+export interface SVGIconContainerComponent extends React.FC<SVGIconContainerProps<Element>> {
+    <T extends Element = Element>(props: SVGIconContainerProps<T>): React.ReactElement | null;
 }
 
-export const SVGIconContainer: React.FC<SVGIconContainerProps> = React.forwardRef<any, SVGIconContainerProps>(
-    (props, ref) => {
-        const {
-            children,
-            className,
-            color,
-            htmlTitle,
-            iconName,
-            size = IconSize.STANDARD,
-            svgProps,
-            tagName = "span",
-            title,
-            ...htmlProps
-        } = props;
+// eslint-disable-next-line prefer-arrow-callback
+export const SVGIconContainer: SVGIconContainerComponent = React.forwardRef(function <T extends Element>(
+    props: SVGIconContainerProps<T>,
+    ref: React.Ref<T>,
+) {
+    const {
+        children,
+        className,
+        color,
+        htmlTitle,
+        iconName,
+        size = IconSize.STANDARD,
+        svgProps,
+        tagName = "span",
+        title,
+        ...htmlProps
+    } = props;
 
-        const isLarge = size >= IconSize.LARGE;
-        const pixelGridSize = isLarge ? IconSize.LARGE : IconSize.STANDARD;
-        const viewBox = `0 0 ${pixelGridSize} ${pixelGridSize}`;
-        const titleId = uniqueId("iconTitle");
-        const sharedSvgProps = {
-            "data-icon": iconName,
-            fill: color,
-            height: size,
-            role: "img",
-            viewBox,
-            width: size,
-            ...svgProps,
-        };
+    const isLarge = size >= IconSize.LARGE;
+    const pixelGridSize = isLarge ? IconSize.LARGE : IconSize.STANDARD;
+    const viewBox = `0 0 ${pixelGridSize} ${pixelGridSize}`;
+    const titleId = uniqueId("iconTitle");
+    const sharedSvgProps = {
+        "data-icon": iconName,
+        fill: color,
+        height: size,
+        role: "img",
+        viewBox,
+        width: size,
+        ...svgProps,
+    };
 
-        if (tagName === null) {
-            return (
-                <svg aria-labelledby={title ? titleId : undefined} ref={ref} {...sharedSvgProps} {...htmlProps}>
-                    {title && <title id={titleId}>{title}</title>}
-                    {children}
-                </svg>
-            );
-        } else {
-            return React.createElement(
-                tagName,
-                {
-                    ...htmlProps,
-                    "aria-hidden": title ? undefined : true,
-                    className: classNames(Classes.ICON, `${Classes.ICON}-${iconName}`, className),
-                    ref,
-                    title: htmlTitle,
-                },
-                <svg {...sharedSvgProps}>
-                    {title && <title>{title}</title>}
-                    {children}
-                </svg>,
-            );
-        }
-    },
-);
+    if (tagName === null) {
+        return (
+            <svg
+                aria-labelledby={title ? titleId : undefined}
+                ref={ref as React.Ref<SVGSVGElement>}
+                {...sharedSvgProps}
+                {...htmlProps}
+            >
+                {title && <title id={titleId}>{title}</title>}
+                {children}
+            </svg>
+        );
+    } else {
+        return React.createElement(
+            tagName,
+            {
+                ...htmlProps,
+                "aria-hidden": title ? undefined : true,
+                className: classNames(Classes.ICON, `${Classes.ICON}-${iconName}`, className),
+                ref,
+                title: htmlTitle,
+            },
+            <svg {...sharedSvgProps}>
+                {title && <title>{title}</title>}
+                {children}
+            </svg>,
+        );
+    }
+});
 SVGIconContainer.displayName = "Blueprint5.SVGIconContainer";

package/src/svgIconProps.ts

@@ -15,23 +15,46 @@
 
 import * as React from "react";
 
+type OmittedDOMAttributes = "children" | "dangerouslySetInnerHTML";
+
 /**
- * DOM attributes assignable as props to the root element rendered by an SVG icon component
- * (which may be a `<span>`, `<svg>` or some custom HTML element).
+ * Default set of DOM attributes which are assignable as props to the root element rendered by an
+ * SVG icon component. This limited set of attributes is assignable to any `<Icon>` component regardless
+ * of its `tagName` prop (it works for both HTML and SVG elements).
  */
-export type SVGIconAttributes = React.AriaAttributes &
-    Omit<React.DOMAttributes<Element>, "children" | "dangerouslySetInnerHTML"> &
+export type DefaultSVGIconAttributes = React.AriaAttributes &
+    Omit<React.DOMAttributes<Element>, OmittedDOMAttributes> &
     Pick<React.HTMLAttributes<Element>, "id" | "style" | "tabIndex" | "role">;
 
 /**
- * Interface used for generated icon components which already have their name and path defined
- * (through the rendered Handlebars template).
+ * DOM attributes which are assignable as props to the root element rendered by an SVG icon component.
+ * Specify a type parameter to narrow this type and allow more attributes to be passed to the root element.
+ *
+ * @see https://blueprintjs.com/docs/#core/components/icon.dom-attributes
+ *
+ * When `tagName` is specified, either:
+ *  - as a custom HTML element tag name,
+ *  - as `null` to signfiy that there should be no wrapper around the `<svg>` element,
+ *  - or its default value of "span" is used,
+ * then it may be useful to narrow this type to pass along additional attributes which not supported by
+ * the more general `DefaultSVGIconAttributes` interface. You can do this by specifying a generic type param
+ * on `<Icon>` components, for example:
+ *
+ * ```
+ * <Icon<HTMLSpanElement> icon="drag-handle-horizontal" draggable="false" />
+ * ```
  */
-export interface SVGIconProps extends React.RefAttributes<any>, SVGIconAttributes {
+export type SVGIconAttributes<T extends Element = Element> = T extends SVGElement
+    ? Omit<React.SVGAttributes<T>, OmittedDOMAttributes>
+    : T extends HTMLElement
+    ? Omit<React.HTMLAttributes<T>, OmittedDOMAttributes>
+    : DefaultSVGIconAttributes;
+
+export interface SVGIconOwnProps {
     /** A space-delimited list of class names to pass along to the SVG element. */
     className?: string;
 
-    /** This component does not support custom children. */
+    /** This component does not support child nodes. */
     children?: never;
 
     /**
@@ -83,3 +106,21 @@ export interface SVGIconProps extends React.RefAttributes<any>, SVGIconAttribute
     /** Props to apply to the `SVG` element */
     svgProps?: React.HTMLAttributes<SVGElement>;
 }
+
+// N.B. the following inteface is defined as a type alias instead of an interface due to a TypeScript limitation
+// where interfaces cannot extend conditionally-defined union types.
+/**
+ * Interface for generated icon components which have their name and icon paths statically defined
+ * inside their JS implementation.
+ *
+ * @see https://blueprintjs.com/docs/#core/components/icon.static-components
+ */
+export type SVGIconProps<T extends Element = Element> = React.RefAttributes<T> & SVGIconAttributes<T> & SVGIconOwnProps;
+
+/**
+ * The default SVG icon props interface, equivalent to `SVGIconProps` with its default type parameter.
+ * This is primarly exported for documentation purposes; users should reference `SVGIconProps<T>` instead.
+ */
+export interface DefaultSVGIconProps extends React.RefAttributes<Element>, SVGIconAttributes<Element>, SVGIconOwnProps {
+    // empty interface for documentation purposes (documentalist handles this better than the SVGIconProps<T> type alias)
+}