1

I have made a custom lightning aura component in Salesforce.

Currently in the Lightning App Builder its coming as the name of the component file callLogs. Like in the image below, under the header

Custom (3)

How can I give it a proper name and an icon like the components appearing in the Standard section in the section above the Custom section? Please help.

enter image description here

Improve this question

1 Answer 1

Reset to default
3

In DESIGN component of lightning component bundle (you can press Ctrl + Shift + 7) add the label attribute like

<design:component label="Some Another Label">
</design:component>

For custom icon, you need to add the svg code in SVG component (Ctrl + Shift + 8), like one sample which you can copy-paste and try:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="96px" height="97px" viewBox="0 0 96 97" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
    <title>image</title>
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="image" fill="#54698D">
            <g id="Layer_1_copy_2">
                <path d="M95.5238095,10.126294 C95.5238095,4.95031056 91.6628057,0.80952381 87.3728014,0.80952381 L8.43672244,0.80952381 C4.14671815,0.80952381 0.285714286,4.95031056 0.285714286,10.126294 L0.285714286,86.7308489 C0.285714286,91.9068323 4.14671815,96.047619 8.43672244,96.047619 L87.3728014,96.047619 C91.6628057,96.047619 95.5238095,91.9068323 95.5238095,86.7308489 L95.5238095,10.126294 L95.5238095,10.126294 Z M78.3809524,75.5714286 L14.5714286,75.5714286 C11.7142857,75.5714286 10.2857143,72.7142857 11.7142857,70.8095238 L31.2380952,37 C31.7142857,35.5714286 34.0952381,35.5714286 34.5714286,37 L46.4761905,57 C47.4285714,58.4285714 49.3333333,58.4285714 50.2857143,57.4761905 L59.8095238,43.6666667 C60.2857143,42.2380952 62.6666667,42.2380952 63.1428571,43.6666667 L80.7619048,71.2857143 C82.1904762,73.1904762 80.7619048,75.5714286 78.3809524,75.5714286 L78.3809524,75.5714286 Z M72.6666667,36.047619 C67.9047619,36.047619 63.6190476,32.2380952 63.6190476,27.4761905 C63.6190476,22.7142857 67.9047619,18.4285714 72.6666667,18.4285714 C77.4285714,18.4285714 81.2380952,22.7142857 81.2380952,27.4761905 C81.2380952,32.2380952 77.4285714,36.047619 72.6666667,36.047619 L72.6666667,36.047619 Z" id="Shape"></path>
            </g>
        </g>
    </g>
</svg>
Improve this answer
3
  • Hi, what are the shortcuts (Ctrl + Shift + 8) and (Ctrl + Shift + 7) for?
    – ghostCoder
    Mar 11, 2019 at 9:57
  • @ghostCoder when you have your component open, these shortcuts are to open different markups of your component bundle, (I mentioned shortcuts just in case you don't want to find) you can check it here.. prntscr.com/mw8gt0
    – Aditya Vijay
    Mar 11, 2019 at 10:02
  • 1
    Oh got it. Thank you so much!
    – ghostCoder
    Mar 11, 2019 at 10:14

You must log in to answer this question.

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