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.

A 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/