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

Get the Developer Name for Record Types without SOQL query

Hi, Previously, the developer name was accessible only via SOQL on the RecordType SObject, and not via describe information. Now you can ...