[SalesForce] On click of next button I want to call another lightning component

SVG isn't directly supported in Lightning at this time, although you can do so by way of using an afterRender or the Lightning SVG component helper. However, what that documentation is saying is that the SVG component helper should no longer be used, because we now have lightning:icon and lightning:buttonIcon; the correct method for using a Lightning Icon is to use lightning:icon, as follows:

<lightning:icon size="x-small" iconName="utility:check" />

This emits the appropriate SVG/USE tags on your behalf. If you need to include custom SVG icons, such as those in a static resource, you'd still need to use the SVG helper, or a variant of the helper for including SVG elements, but you should not use the SVG helper component to include Lightning icons.

As a full example, let's say you want to implement Tooltips. To modify the code to be used in a Lightning Component, you would simply do this:

<div style="padding-left:2rem;padding-top:5rem;position:relative;">
    <div class="slds-form-element">
        <div class="slds-form-element__icon slds-align-middle">

            <button class="slds-button slds-button_icon slds-button slds-button_icon" aria-describedby="help" title="Help">
                <lightning:icon iconName="utility:info" size="xx-small" />
                <span class="slds-assistive-text">Help</span>
            </button>
        </div>
    </div>
    <div class="slds-popover slds-popover_tooltip slds-nubbin_bottom-left" role="tooltip" id="help" style="position:absolute;top:0px;left:15px;">
        <div class="slds-popover__body">Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi.</div>
    </div>
</div>

I have recently encountered the same situation. If anyone is looking out for the solution, here is what you need to do !

let me first reframe the situation here,

"Lightning Component is invoked from Visualforce Page using ltng:outApp. You would want to change data or have control on already created Lightning Component from a button click on Visualforce Page"

Solution:

You might have used $Lightning.use already in Visualforce page inside which you create Lightning Component using $Lightning.createComponent.

Now, create a lightning event , let's say "refreshEvent" and handle the event in your lightning component, "MyLC" using aura:handler

<aura:handler event="c:refreshEvent" action="{!c.init}"/>

You need to fire this event inside Visualforce page on button click. But when you implement this, you will be getting error "Cannot read property of fire of undefined".

Let's go back to basics, when you are using Lightning:use, you are implementing Lightning framework inside visualforce page, you can fire lightning event only inside this framework. So, when you fire event directly inside the page, console will not understand fire command. You need to find a way to fire the event inside Lightning:use.

My requirement was to refresh or initialize Lightning Component when I click on a button in Visualforce Page. For this I used a boolean variable in javascript, using which I either create Lightning component or fire Lightning Event. Please check the sample code below,

In the page:

<li><a  href="#" onclick="callLC();">test</a> </li>

Javascript:

<script> 
   var invokeLC = true;
   
   function callLC(){
    $Lightning.use("c:yourLightningApp",    
            function() {
                console.log('invokeLC'+invokeLC);
                if (invokeLC) {                  
                    $Lightning.createComponent(
                        "c:MyLC", 
                        function(cmp) {
                        }
                    );
                }else {
                    fireEvent();
                }
                
                invokeLC = false;
            },          
        );    
   }
   
    function fireEvent() {           
        var myEvent = $A.get("e.c:refreshEvent");
        myEvent.fire();
    }

</script>