@jupyter/web-components
Version:
A component library for building extensions in Jupyter frontends.
90 lines (89 loc) • 2.87 kB
JavaScript
var Icon_1;
import { __decorate } from "tslib";
import { DOM, FASTElement, customElement, attr } from '@microsoft/fast-element';
import { iconStyles as styles } from './icon.styles';
/**
* Icon component
*
* Icon must first be registered: `Icon.register({ name, svgStr });`
*
* Then you can use it with `<jp-icon name="{name}"></jp-icon>` .
*
* To style your icon, you should set `fill` and/or `stroke` attributes to `currentColor`.
* Then the icon will be colored with the active text color.
*/
let Icon = Icon_1 = class Icon extends FASTElement {
/**
* Register a new icon.
*
* @param options Icon definition
*/
static register(options) {
if (Icon_1.iconsMap.has(options.name)) {
console.warn(`Redefining previously loaded icon svgStr. name: ${options.name}, svgStrOld: ${Icon_1.iconsMap.get(options.name)}, svgStr: ${options.svgStr}`);
}
Icon_1.iconsMap.set(options.name, DOM.createHTML(options.svgStr));
// Rerender all existing icons with the same name
document === null || document === void 0 ? void 0 : document.querySelectorAll(`jp-icon[name="${options.name}"]`).forEach((node) => {
node.setAttribute('name', '');
node.setAttribute('name', options.name);
});
}
/**
* Set the default icon.
*
* @param svgStr The SVG string to be used as the default icon.
*/
static setDefaultIcon(svgStr) {
Icon_1._defaultIcon = svgStr;
}
/**
* Default icon
*
* This icon will be displayed if the {@link name} does not match any known
* icon names.
*/
static defaultIcon() {
return Icon_1._defaultIcon;
}
nameChanged() {
if (this.shadowRoot) {
this.shadowRoot.innerHTML = this.getSvg();
}
}
/**
* The connected callback for this FASTElement.
* @remarks
* This method is invoked by the platform whenever this FASTElement
* becomes connected to the document.
*/
connectedCallback() {
super.connectedCallback();
this.nameChanged();
}
/**
* Get the icon SVG
*/
getSvg() {
var _a;
return (_a = Icon_1.iconsMap.get(this.name)) !== null && _a !== void 0 ? _a : Icon_1.defaultIcon();
}
};
Icon.iconsMap = new Map();
Icon._defaultIcon = DOM.createHTML(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16">
<path
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z"
fill="currentColor"
/>
</svg>`);
__decorate([
attr
], Icon.prototype, "name", void 0);
Icon = Icon_1 = __decorate([
customElement({
name: 'jp-icon',
styles
})
], Icon);
export { Icon };
export { styles as iconStyles };