@blueprintjs/core
Version:
Core styles & components
105 lines • 5.08 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.IconNext = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
/*
* Copyright 2026 Palantir Technologies, Inc. All rights reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
const classnames_1 = tslib_1.__importDefault(require("classnames"));
const react_1 = require("react");
const next_1 = require("@blueprintjs/icons/next");
const common_1 = require("../../common");
const utils_1 = require("../../common/utils");
/**
* Next-generation icon component. Renders icons from `@blueprintjs/icons/next` with
* dynamic loading support and outlined/filled variant switching.
*
* @see https://blueprintjs.com/docs/#core/components/icon
*/
exports.IconNext = (0, react_1.forwardRef)((props, ref) => {
const { autoLoad = true, className, color, htmlTitle, icon, intent, size = next_1.IconSize.STANDARD, svgProps, tagName = "span", title, variant = "outlined", ...htmlProps } = props;
const [loadedIconPaths, setLoadedIconPaths] = (0, react_1.useState)(() => {
if (typeof icon !== "string") {
return undefined;
}
const paths = next_1.IconsNext.getPaths(icon, variant);
return paths === undefined ? undefined : { icon, paths, variant };
});
(0, react_1.useEffect)(() => {
let cancelled = false;
if (typeof icon === "string") {
const cached = next_1.IconsNext.getPaths(icon, variant);
if (cached !== undefined) {
setLoadedIconPaths({ icon, paths: cached, variant });
}
else if (autoLoad) {
next_1.IconsNext.load(icon, variant)
.then(() => {
if (!cancelled) {
const paths = next_1.IconsNext.getPaths(icon, variant);
if (paths !== undefined) {
setLoadedIconPaths({ icon, paths, variant });
}
}
})
.catch(reason => {
if (!cancelled) {
console.error(`[Blueprint] Next icon '${icon}' (${variant}) could not be loaded.`, reason);
}
});
}
else {
console.error(`[Blueprint] Next icon '${icon}' (${variant}) is not loaded yet and autoLoad={false}, ` +
`did you call IconsNext.load('${icon}', '${variant}')?`);
}
}
return () => {
cancelled = true;
};
}, [autoLoad, icon, variant]);
if (icon == null || typeof icon === "boolean") {
return null;
}
else if (typeof icon !== "string") {
if ((0, react_1.isValidElement)(icon)) {
const mergedClassName = (0, classnames_1.default)(icon.props.className, className, common_1.Classes.intentClass(intent));
if ((0, utils_1.isBlueprintIconElement)(icon)) {
const iconElementProps = {
...(0, common_1.removeNonHTMLProps)(htmlProps),
className: mergedClassName,
};
const resolvedSize = icon.props.size ?? props.size;
if (resolvedSize != null) {
iconElementProps.size = resolvedSize;
}
const resolvedColor = icon.props.color ?? color;
if (resolvedColor != null) {
iconElementProps.color = resolvedColor;
}
return (0, react_1.cloneElement)(icon, iconElementProps);
}
return (0, react_1.cloneElement)(icon, { className: mergedClassName });
}
return icon;
}
const cachedIconPaths = next_1.IconsNext.getPaths(icon, variant);
const iconPaths = cachedIconPaths ??
(loadedIconPaths?.icon === icon && loadedIconPaths.variant === variant ? loadedIconPaths.paths : undefined);
const pathElements = iconPaths?.map((d, i) => (0, jsx_runtime_1.jsx)("path", { d: d }, i)) ?? [];
return ((0, jsx_runtime_1.jsx)(next_1.SvgIconContainerNext, { children: pathElements, className: (0, classnames_1.default)(common_1.Classes.intentClass(intent), className), color: color, htmlTitle: htmlTitle, iconName: icon, ref: ref, size: size, svgProps: svgProps, tagName: tagName, title: title, ...(0, common_1.removeNonHTMLProps)(htmlProps) }));
});
exports.IconNext.displayName = `${common_1.DISPLAYNAME_PREFIX}.IconNext`;
//# sourceMappingURL=iconNext.js.map