Wednesday, 4 April 2018

lightning:icon (No svg component creation needed now)


To show icons in lightning component  we don't  need to create svg component. We can use "lightning:icon"


It represents a visual element that provides context and enhances usability.

lightning:icon is a visual element that provides context and enhances usability. Icons can be used inside the body of another component or on their own.

Component:IconComponent: ( created  reusable component you can use tag directly also)

<aura:component description="IconComp">
    <aura:attribute name="iconName" type="String" default="action:more"/>
    <aura:attribute name="size" type="String" default="small"/>
    <aura:attribute name="iconSize" type="String" default="small"/>
    <aura:attribute name="alternativeText" type="String" default="Indicates More"/>
    <aura:attribute name="className"    type="String" default=""/>
    <aura:attribute name="title" type="String" default=""/>
    <aura:attribute name="variantName" type="String" default=""/>
    <lightning:icon iconName="{!v.iconName}" size="{!v.iconSize}" alternativeText="{!v.alternativeText}" title="{!v.title}"
                    class="{!v.className}" variant="{!v.variantName}"/>

IconComponentApp :

<aura:application  extends="force:slds">
    <c:IconComponent iconName="action:add_photo_video" alternativeText="video" size="small"/> 
    <br/> <br/>
    <c:IconComponent iconName="action:follow" alternativeText="follow" size="small"/> <br/> <br/>
    <c:IconComponent iconName="action:edit_groups" alternativeText="edit_groups" size="small"/> <br/> <br/>
    <c:IconComponent iconName="custom:custom1" alternativeText="custom1" size="large"/> <br/> <br/>
    <c:IconComponent iconName="doctype:attachment" alternativeText="Attachment" size="large"
                      variantName ="warning"/> <br/> <br/>
    <c:IconComponent iconName="standard:account" alternativeText="Account" size="large"/> <br/> <br/>
     <c:IconComponent iconName="utility:activity" alternativeText="Activity" size="large"/> <br/> <br/>


1 comment:

  1. your blog is really useful for me. Thanks for sharing this useful blog..


Create Dynamic Picklists for Your Custom Components (design:component)

Hi, We can expose a component property as a picklist when the component is configured in the Lightning App Builder. The picklist’s value...