I got the Salesforce Design System pilot from this morning's Webinar. I uploaded the package (as 'sds.zip') as a static resource. I'm calling the CSS (immediately after '' in the .cmp file) with:
<link href='/resource/sds/index.scss' rel="stylesheet"/>
However when I attempt to save I get the error:
Failed to save undefined: No COMPONENT named markup://use found : [markup://c:contactList]: Source
I think the 'use' error is a refrence to this code block, which is later in the .cmp file:
<svg aria-hidden="true" class="icon icon--large icon-standard-user">
<use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#user" />
</svg>
I assume I'm importing the CSS incorrectly, what's the right way to do it?
You are importing the CSS correctly. That's the way to do it from inside a Lightning Component. From inside a Visualforce page you do
<apex:stylesheet value="{!URLFOR($Resource.sds, '/resource/sds/index.css')}" />.The problem is not the CSS import but VF not understanding the
useandsvgtags inside the component. For Visualforce to properly parse the tags you need to declare the namespace by adding the line<html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">, with its matching closing tag at the end. This works fine if you just put it in VF, and you are using thesvgtag in VF.However, if you are putting the
svgtag inside a Lightning Component, you need to create a separate svg component for it, as described in this tutorial.