Using Icon Sets Within Web Components¶
The Web Component SDK library includes a
ptcs-icons package that you can use to display SVG icons in web components. The package contains a cds-icons.js file that is used to display all icons within the SDK.
The following image shows an incomplete preview of the available icons:
Using SVG icon libraries has the following benefits:
- Smaller file size compared to PNG icons, which leads to faster load times.
- Icons scale to any size without losing sharpness, which improves the user experience on high-resolution devices.
- Support for different states, such as rule-based coloring.
You can include an icon package by adding an
import statement to the
.js file of your web components:
You can also use this statement to import your own icons sets.
Icon sets are JS files that are named
.js package file contains a list of predefined icons where every icon has a unique id, followed by the SVG data. For example:
<g id="[icon-id]"><path part...
ptcs-iconspackage within a
ptcs-iconcomponent using the following syntax:
Note: You can use the file as a template to create and import custom icon sets when using SDK components to build web pages and applications.