@ui5/webcomponents-react

import '@ui5/webcomponents/dist/Icon.js'; import type IconDesign from '@ui5/webcomponents/dist/types/IconDesign.js'; import type IconMode from '@ui5/webcomponents/dist/types/IconMode.js'; import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '@ui5/webcomponents-react-base'; interface IconAttributes { /** * Defines the text alternative of the component. * If not provided a default text alternative will be set, if present. * * **Note:** Every icon should have a text alternative in order to * calculate its accessible name. * @default undefined */ accessibleName?: string | undefined; /** * Defines the component semantic design. * * **Note:** Available since [v1.9.2](https://github.com/UI5/webcomponents/releases/tag/v1.9.2) of **@ui5/webcomponents**. * @default "Default" */ design?: IconDesign | keyof typeof IconDesign; /** * Defines the mode of the component. * * **Note:** Available since [v2.0.0](https://github.com/UI5/webcomponents/releases/tag/v2.0.0) of **@ui5/webcomponents**. * @default "Decorative" */ mode?: IconMode | keyof typeof IconMode; /** * Defines the unique identifier (icon name) of the component. * * To browse all available icons, see the * [SAP Icons](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html), * [SAP Fiori Tools](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/SAP-icons-TNT) and * [SAP Business Suite](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html) * * Example: * `name='add'`, `name='delete'`, `name='employee'`. * * **Note:** To use the SAP Fiori Tools icons, * you need to set the `tnt` prefix in front of the icon's name. * * Example: * `name='tnt/antenna'`, `name='tnt/actor'`, `name='tnt/api'`. * * **Note:** To use the SAP Business Suite icons, * you need to set the `business-suite` prefix in front of the icon's name. * * Example: * `name='business-suite/3d'`, `name='business-suite/1x2-grid-layout'`, `name='business-suite/4x4-grid-layout'`. * @default undefined */ name?: string | undefined; /** * Defines whether the component should have a tooltip. * * **Note:** The tooltip text should be provided via the `accessible-name` property. * @default false */ showTooltip?: boolean; } interface IconDomRef extends Required<IconAttributes>, Ui5DomRef { } interface IconPropTypes extends IconAttributes, Omit<CommonProps, keyof IconAttributes | 'fontIcon' | 'onClick'> { /** * Defines the font icon to be used as an icon. * Intended for font-based icon libraries where * the application loads the font and provides a slotted element with the unicode character. * When this slot is used, the component renders a `<span>` instead of an `<svg>`. * Accessibility is fully delegated to the application — set `accessible-name` and `mode` explicitly. * * **Example:** * ```html * <Icon mode="Image" accessible-name="Home"> * <i class="fa fa-home" slot="fontIcon"></i> * </Icon> * ``` * * __Note:__ The content of the prop will be rendered into a [<slot>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot) by assigning the respective [slot](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/slot) attribute (`slot="fontIcon"`). * Since you can't change the DOM order of slots when declaring them within a prop, it might prove beneficial to manually mount them as part of the component's children, especially when facing problems with the reading order of screen readers. * * __Note:__ When passing a custom React component to this prop, you have to make sure your component reads the `slot` prop and appends it to the most outer element of your component. * Learn more about it [here](https://ui5.github.io/webcomponents-react/v2/?path=/docs/knowledge-base-handling-slots--docs). * * **Note:** Available since [v2.23.0](https://github.com/UI5/webcomponents/releases/tag/v2.23.0) of **@ui5/webcomponents**. * * __Supported Node Type/s:__ `Array<HTMLElement>` */ fontIcon?: UI5WCSlotsNode; /** * Fired when the component is activated by mouse/touch, keyboard (Enter or Space), * or screen reader virtual cursor activation. * * **Note:** The event will not be fired if the `mode` property is set to `Decorative` or `Image`. * * **Note:** Available since [v2.11.0](https://github.com/UI5/webcomponents/releases/tag/v2.11.0) of **@ui5/webcomponents**. * * | cancelable | bubbles | * | :--------: | :-----: | * | ❌|✅| */ onClick?: (event: Ui5CustomEvent<IconDomRef>) => void; } /** * The `Icon` component represents an SVG icon. * There are two main scenarios how the `Icon` component is used: * as a purely decorative element, * or as an interactive element that can be focused and clicked. * * ### Usage * * 1. **Get familiar with the icons collections.** * * Before displaying an icon, you need to explore the icons collections to find and import the desired icon. * * Currently there are 3 icons collection, available as 3 npm packages: * * - [@ui5/webcomponents-icons](https://www.npmjs.com/package/@ui5/webcomponents-icons) represents the "SAP-icons" collection and includes the following * [icons](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/SAP-icons). * - [@ui5/webcomponents-icons-tnt](https://www.npmjs.com/package/@ui5/webcomponents-icons-tnt) represents the "tnt" collection and includes the following * [icons](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/SAP-icons-TNT). * - [@ui5/webcomponents-icons-business-suite](https://www.npmjs.com/package/@ui5/webcomponents-icons-business-suite) represents the "business-suite" collection and includes the following * [icons](https://ui5.sap.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/BusinessSuiteInAppSymbols). * * 2. **After exploring the icons collections, add one or more of the packages as dependencies to your project.** * * `npm i @ui5/webcomponents-icons` * `npm i @ui5/webcomponents-icons-tnt` * `npm i @ui5/webcomponents-icons-business-suite` * * 3. **Then, import the desired icon**. * * `import "@ui5/\{package_name\}/dist/\{icon_name\}.js";` * * **For Example**: * * For the standard "SAP-icons" icon collection, import an icon from the `@ui5/webcomponents-icons` package: * * `import "@ui5/webcomponents-icons/dist/employee.js";` * * For the "tnt" (SAP Fiori Tools) icon collection, import an icon from the `@ui5/webcomponents-icons-tnt` package: * * `import "@ui5/webcomponents-icons-tnt/dist/antenna.js";` * * For the "business-suite" (SAP Business Suite) icon collection, import an icon from the `@ui5/webcomponents-icons-business-suite` package: * * `import "@ui5/webcomponents-icons-business-suite/dist/ab-testing.js";` * * 4. **Display the icon using the `Icon` web component.** * Set the icon collection ("SAP-icons", "tnt" or "business-suite" - "SAP-icons" is the default icon collection and can be skipped) * and the icon name to the `name` property. * * `<Icon name="employee"></Icon>` * `<Icon name="tnt/antenna"></Icon>` * `<Icon name="business-suite/ab-testing"></Icon>` * * ### Keyboard Handling * * - [Space] / [Enter] or [Return] - Fires the `click` event if the `mode` property is set to `Interactive`. * * * * __Note:__ This is a UI5 Web Component! [Icon UI5 Web Component Documentation](https://ui5.github.io/webcomponents/components/Icon) | [Repository](https://github.com/UI5/webcomponents) */ declare const Icon: import("react").ForwardRefExoticComponent<IconPropTypes & import("@ui5/webcomponents-react-base").WithWebComponentPropTypes & import("react").RefAttributes<IconDomRef>>; export { Icon }; export type { IconDomRef, IconPropTypes };