Wednesday, 4 April 2018

lightning:icon (No svg component creation needed now)

Hi,

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

directly.

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}"/>
</aura:component>


IconComponentApp :

<aura:application  extends="force:slds">
    Icons:<br/>
    <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/>
</aura:application>



References:
------------

https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/aura_compref_lightning_icon.htm

https://lightningdesignsystem.com/icons/



1 comment:

  1. your blog is really useful for me. Thanks for sharing this useful blog..https://www.calfre.com/India/Hyderabad/Ameerpet/Salesforce-Training/listing

    ReplyDelete

Convert 15 character IDs to 18 character IDs in formula field

Hi , We have new method " CASESAFEID() "in formula field now to make 15 character Id to 18 character. Classic 1. Go to  Se...