0.1.5 • Published 2 years ago
@salesforce-ux/c360-icon v0.1.5
@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-iconDistributable
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