[SalesForce] Unable to use SLDS Icons in Lightning Web Component

In your component markup put the SVG inside an CDATA container and surround it with DIV giving an aura:id.

<div aura:id="svg_content">
<![CDATA[
    <svg width="120px" height="120px" viewBox="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
            <path d="M120,108 C120,114.6 114.6,120 108,120 L12,120 C5.4,120 0,114.6 0,108 L0,12 C0,5.4 5.4,0 12,0 L108,0 C114.6,0 120,5.4 120,12 L120,108 L120,108 Z" id="Shape" fill="#2A739E"/>
            <path d="M77.7383308,20 L61.1640113,20 L44.7300055,63.2000173 L56.0543288,63.2000173 L40,99.623291 L72.7458388,54.5871812 L60.907727,54.5871812 L77.7383308,20 Z" id="Path-1" fill="#FFFFFF"/>
        </g>
    </svg>
]]>
</div>

Then in the renderer.js for the component, override the afterRender method:

afterRender: function(component, helper) {
    this.superAfterRender();
    var svg = component.find("svg_content");
    var value = svg.getElement().innerText;
    value = value.replace("<![CDATA[", "").replace("]]>", "");
    svg.getElement().innerHTML = value;        
}

This is a workaround that works for any SVGs outside of those provided by SLDS.

You can't import the @salesforce-ux/design-system directly via require. If you look at the package.json, there is no main or module field designating the module entry point.

The current SLDS version is not compatible with the native shadow DOM (some selectors will attempt to style elements in different shadow trees). We are currently working on a new version of SLDS which better aligns with the shadow DOM restrictions. In the meantime, if you want to use SLDS + LWC standalone you will need to make sure the application runs with @lwc/synthetic-shadow.

The simplest way to add SLDS is to copy over the SLDS artifact to the /dist folder. Here is the commit containing the changes to enable SLDS in an lwc-create-app project: commit.

• install @salesforce-ux/design-system and @lwc/synthetic-shadow as an NPM dev dependency
• add the following line in the resources section lwc-services.config.js file to indicate that the SLDS artifacts should be copied over to the dist folder:

{
    from: 'node_modules/@salesforce-ux/design-system/assets',
    to: 'dist/resources/slds'
}

• import @lwc/synthetic-shadow before the lwc import in the index.js to force the framework to use the synthetic shadow DOM instead of the native one provided by the browser.

import '@lwc/synthetic-shadow';