@salesforce-ux/wes-icon v0.1.1
@salesforce-ux/wes-icon
About
Icons are symbols used to represent features, functionality, or content.
Getting Started
Let's start by installing wes-icon as a dependency of your project with npm.
npm i @salesforce-ux/wes-iconDistributable
After installation, all the distributables for the wes-icon are found under @salesforce-ux/wes-icon/dist/ folder.
| File Name | Description |
|---|---|
icon.css | The CSS file specific to wes-icon only. It doesnot include the styles for it's parent sds-icon. wes-icon extends from sds-icon |
icon.compiled.css | The Compiled CSS file for wes-icon.This file includes styles for both wes-icon and its parent sds-icon |
icon.js | The bundled JS file for wes-icon component. |
wes-icon Integration
Dependency Inclusion
wes-styling-hooks is a styling dependency for wes-icon. Hence, this needs to be embedded into the root of the web app in order to make the wes-icon render properly.
There are different ways wes-styling-hooks can be embedded. Please checkout the wes-styling-hooks Integration Guide to learn more.
If you are using the Salesforce Experience Cloud platform, WES is supported through an Unlocked Package, see the Confluence page for the WES Unlocked Package.
Component Import
import WESIcon from "@salesforce-ux/wes-icon/dist/icon";Component Registration
customElements.define('wes-icon', WESIcon);Example
<wes-icon symbol="activity"></wes-icon>Interactive Demo
To see more examples with interactive demo, please visit WES Subsytem's Storybook Environment