2

I am creating a resuable message component for use in the Lightning App Builder, and previously was using ui:message. However, as that uses Classic styling and this will be used in Lightning, I used the following component and design to create a version using SLDS-standard styles (straight from the SLDS site):

globalMessageBlock Component

<aura:component implements="flexipage:availableForAllPageTypes">

    <aura:attribute name="message" type="String" />
    <aura:attribute name="messageType" type="String" />

    <div class="{!'slds-notify slds-notify_alert slds-theme_alert-texture slds-theme_' + v.messageType}" role="alert">
        <span class="slds-assistive-text">{!v.messageType}</span>
        <span class="slds-icon_container slds-icon-utility-warning slds-m-right_x-small" title="Description of icon when needed">
        <svg class="slds-icon slds-icon_x-small" aria-hidden="true">
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#warning" />
        </svg>
        </span>

        <h2>{!v.message}</h2>

    </div>
</aura:component>

globalMessageBlock Design

<design:component label="Message Block">
    <design:attribute name="message" label="Message" description="Contents of the message to appear in this component" />
    <design:attribute name="messageType" label="Message Type" description="Controls the appearance of the message on the record page" datasource="warning,error,offline" />
</design:component>

When trying to save the component, I receive the error message

"Failed to save globalMessageBlock.cmp: null: Source"

which isn't entirely helpful.

It's also worth noting that I get the same error if I simply copy and paste the example code for this alert from the SLDS website (at this page).

Is implementing a component using SLDS in this manner unsupported? Or is there some issue in the code when creating a component that I can fix?

2 Answers 2

2

SVG elements are not directly supported at this time. Use lightning:icon instead.

Change this code:

    <svg class="slds-icon slds-icon_x-small" aria-hidden="true">
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#warning" />
    </svg>

To this code:

<lightning:icon iconName="utility:warning" size="x-small" />
2
  • bamm.. we posted with margin of miliseconds :)
    – Himanshu
    Nov 17, 2017 at 4:08
  • This worked like a charm! Using lightning:icon also allowed me to use standard icons and give users more options. Thanks! Nov 17, 2017 at 5:33
0

The Design System uses SVG icons. You can use them in your Lightning components by using one of the new Base Lightning Components called lightning:icon.

it means you need to replace your svg icon with lightning:icon

<aura:attribute name="message" type="String" />
<aura:attribute name="messageType" type="String" />

<div class="{!'slds-notify slds-notify_alert slds-theme_alert-texture slds-theme_' + v.messageType}" role="alert">
    <span class="slds-assistive-text">{!v.messageType}</span>
    <span class="slds-icon_container slds-icon-utility-warning slds-m-right_x-small" title="Description of icon when needed">
    <lightning:icon iconName="utility:warning" size="large" alternativeText="Indicates approval"/>
    </span>

    <h2>{!v.message}</h2>

</div>

Alternative solution:

Craete one svg component

svg.cmp

<aura:component >
  <aura:attribute name="class" type="String" description="CSS classname for the SVG element" />
  <aura:attribute name="xlinkHref" type="String" description="SLDS icon path. Ex: /assets/icons/utility-sprite/svg/symbols.svg#download" />
  <aura:attribute name="ariaHidden" type="String" default="true" description="aria-hidden true or false. defaults to true" />
</aura:component>

svgRenderer.js

({
  render: function(component, helper) {
    //grab attributes from the component markup
    var classname = component.get("v.class");
    var xlinkhref = component.get("v.xlinkHref");
    var ariaHidden = component.get("v.ariaHidden");

    //return an svg element w/ the attributes
    var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
    svg.setAttribute('class', classname);
    svg.setAttribute('aria-hidden', ariaHidden);
    svg.innerHTML = '<use xlink:href="'+xlinkhref+'"></use>';
    return svg;
  }
})

and use as c:svg in your component.

<c:svg ariahidden="true" xlinkHref="/resource/slds/assets/icons/utility-sprite/svg/symbols.svg#warning"/>
1
  • This was a great option as well, though using lightning:icon allowed me to use the built-in lightning icon library. Thank you for the input, this may come in handy on another project I'm working on. Nov 17, 2017 at 5:34

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .