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