@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