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:
import '<path_to_package>/ptcs-icons/cds-icons.js'
You can also use this statement to import your own icons sets.
Icon sets are JS files that are named [iconset-name]-icons.js
. Each .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-icons
package within a ptcs-icon
component using the following syntax:
<ptcs-icon icon="cds:[icon-id]"></ptcs-icon>
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.