+ Start a Discussion
Alex Waddell 12Alex Waddell 12 

Making my first Lightning Component Page. HELP! SVG File

Hey everyone,

I am in the process of writing my first Lightning Component Bundle. It's very simple, i just want to expose some text to some "Read only" users that aren't familiar with SalesForce.

I was able to get the text to work and show up on the lightning page which is awesome but it just looks like this...

User-added image
It's a little plain for my liking. So i would like to add something like the picture below so i can give it a more "Lightning" look.

User-added image

I would like to use the Custom 83 button

User-added image

Below is my code as it stands now, but when i try to add the icon and title i get the following error:

Failed to save undefined: No COMPONENT named markup://svg found : [markup://c:HealthNetFilterCheatSheet]: Source​
<aura:component implements="flexipage:availableForAllPageTypes" access="global" >
    <div class="slds-page-header">
  <div class="slds-grid">
    <div class="slds-col slds-has-flexi-truncate">
      <div class="slds-media slds-no-space slds-grow">
        <div class="slds-media__figure">
          <svg class="slds-icon slds-icon-standard-user" aria-hidden="true">
            <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#user"></use>
          </svg>
        </div>
        <div class="slds-media__body">
          <p class="slds-text-title--caps slds-line-height--reset">Health Net</p>
          <h1 class="slds-page-header__title slds-m-right--small slds-align-middle slds-truncate" title="this should match the Record Title">Date Code Cheat Sheet</h1>
        </div>
      </div>
    </div>
<div class="slds-text-longform">
  <h3 class="slds-section-title--divider"> Date Filter - Cheat Sheet </h3>
    <h2 class="slds-text-heading--small"> Use these codes when wanting to change the Date range on a report </h2>
  <ul>
    <li>Last Month</li>
    <li>This Month</li>
      <li>Current and Previous Month</li>
    <li>Last Week</li>
      <li>This Week</li>
    <li>Yesterday</li>
      <li>Today</li>
    <li>Last 7 Days</li>
      <li>Last 30 Days</li>
      <li>Last 60 Days</li>
      <li>Last 90 Days</li>
      <li>Last 120 Days</li>
  </ul>	
    </div>
        </div>
    </div>
</aura:component>

Can anyone help me expose this icon and give it that Lightning look i am looking for?
 
Alex Waddell 12Alex Waddell 12
I mean the Custom 83 Icon... Not button. Sorry :D