Method onBeforeRendering

packages/main/src/Icon.ts:311–376

()

	}

	async onBeforeRendering() {
		if (this.fontIcon.length) {
			// Font-based icon via slot — skip registry, accessibility is app's responsibility
			if (!this.accessibleName) {
				this.effectiveAccessibleName = undefined;
			} else {
				this.effectiveAccessibleName = this.accessibleName;
			}
			return;
		}

		const name = this.name;
		if (!name) {
			return;
		}

		let iconData: typeof ICON_NOT_FOUND | IconData | UnsafeIconData | undefined = getIconDataSync(name);
		if (!iconData) {
			iconData = await getIconData(name);
		}

		if (!iconData) {
			this.invalid = true;
			/* eslint-disable-next-line */
			return console.warn(`Required icon is not registered. Invalid icon name: ${this.name}`);
		}

		if (iconData === ICON_NOT_FOUND) {
			this.invalid = true;
			/* eslint-disable-next-line */
			return console.warn(`Required icon is not registered. You can either import the icon as a module in order to use it e.g. "@ui5/webcomponents-icons/dist/${name.replace("sap-icon://", "")}.js", or setup a JSON build step and import "@ui5/webcomponents-icons/dist/AllIcons.js".`);
		}

		this.viewBox = iconData.viewBox || "0 0 512 512";

		if ("customTemplate" in iconData && iconData.customTemplate) {
			this.customTemplate = executeTemplate(iconData.customTemplate, this);
		}

		if ("customTemplateAsString" in iconData) {
			this.customTemplateAsString = iconData.customTemplateAsString;
		}

		// in case a new valid name is set, show the icon
		this.invalid = false;
		if ("pathData" in iconData && iconData.pathData) {
			this.pathData = Array.isArray(iconData.pathData) ? iconData.pathData : [iconData.pathData];
		}

		this.accData = iconData.accData;
		this.ltr = iconData.ltr;
		this.packageName = iconData.packageName;

		if (this.accessibleName) {
			this.effectiveAccessibleName = this.accessibleName;
		} else if (this.accData) {
			if (this.packageName) {
				const i18nBundle = await getI18nBundle(this.packageName);