Lightning components and SLDS

Question

I'm building a lightning component and want to style it using the SLDS.

The relevant Trailhead Module recommends that you download the SLDS and install it as a static resource.

So do the answers to these questions:

• Lightning component with SLDS
• Lightning components in Community requires SLDS package?

However, the SLDS lightning page clearly indicates that this is no longer necessary:

The Lightning Design System is ready to use in your Lightning apps and components. It is now automatically included for Lightning Components running in the Lightning Experience and Salesforce S1 mobile application. It is no longer necessary to add a static resource for Lightning Components running within these environments.

Can I use SLDS without downloading it as a local resource? If so, is there an up-to-date tutorial on how to do this? Alternatively, can anybody give me some pointers on how to do this?

Answer 1

I have been working on this, and I've reached the following conclusions:

• The CSS styles are automatically available to your lightning components. Directly adding them to your markup will make them appear. There is no need to download the SLDS as an unmanaged package and no need to add it as a static resource

Something like this will automatically render your div with the right style:

<aura:component access="global">
    <div class="slds-page-header">
    </div>
</aura:component>

• I've found no way to access the lightning icon library. If you F12 inspect the icons displayed in your browser, they show the following url:

  src="https://(my-domain)/img/icon/t4v35/standard/account_120.png"

I don't think that referencing those PNG icons from a hard-coded path is best practice. In the end I just included the sprites from the SLDS in my project and I'm referencing the icons from the resource.

If anyone can improve on this answer I'd be grateful.