2

So that my Lightning component displays nicely in the App Builder I added a .svg file to the bundle and copy & pasted the SVG from the Lightning Design System Icons.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg height="450" width="450" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <path fill="#4bca81" d="m15.2 68.2l14.2-17.2c0.4-0.7 0.4-1.5 0-2.1l-14.2-17c-0.1-0.2-0.2-0.4-0.2-0.6 0-0.6 0.5-1 1-1h20.7c0.6 0 1.1 0.2 1.4 0.7l14.9 18c0.4 0.6 0.4 1.4 0 2.1l-14.8 18c-0.3 0.4-0.9 0.7-1.4 0.7h-20.7c-0.6 0-1-0.4-1-1-0.1-0.2 0-0.5 0.1-0.6z m31.6 0l14.1-17.2c0.4-0.7 0.4-1.5 0-2.1l-14.2-17c-0.1-0.2-0.2-0.4-0.2-0.6 0-0.6 0.5-1 1-1h20.7c0.6 0 1.1 0.2 1.4 0.7l14.9 18c0.4 0.6 0.4 1.4 0 2.1l-14.8 18c-0.3 0.4-0.9 0.7-1.4 0.7h-20.7c-0.6 0-1-0.4-1-1 0-0.2 0.1-0.5 0.2-0.6z"></path>
</svg>

But all I see is a blank white area:

enter image description here

What am I doing wrong and where is a Salesforce documentation on how to add and create such icons?

3

Update below code in svg and verify.

<?xml version="1.0" encoding="UTF-8" standalone="no"?> <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>

| improve this answer | |
1

Did you try to add the following line ?

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

as it is displayed in documentation

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.