tyoshikawa1106のブログ

- Force.com Developer Blog -

SFDC:Lightning開発とSVGコンポーネントの作成

Lightning Componentの開発では一手間追加しないとSVGタグを利用できません。Trailheadにそれを解決するためのSVGコンポーネントの作り方が紹介されていました。

f:id:tyoshikawa1106:20160113214338p:plain

Build a basic SVG Icon Component Step | Salesforce Trailhead

自作のSVGコンポーネント

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;
  }
})
account.app
<aura:application>  
  <div class="slds" style="margin-top:10px;margin-left:10px;">
    <ltng:require styles="/resource/SLDS090/assets/styles/salesforce-lightning-design-system-ltng.css" />
    <span class="slds-icon__container slds-icon-standard-account">
        <c:svg class="slds-icon" xlinkHref="/resource/SLDS090/assets/icons/standard-sprite/svg/symbols.svg#account" />
        <span class="slds-assistive-text">Account Icon</span>
    </span>
  </div>
</aura:application>

f:id:tyoshikawa1106:20160113214528p:plain