Question about adding custom symbols to Ignition symbol libraries

[Michal_Goralczyk]

Hello I have a question how to add my own SVG as an icon in Ignition library?
What I have already found is the information that I should prepare a library along the lines of the following code:

<?xml version="1.0" encoding="utf-8"?>
 
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">   
    <!--Red Circle-->
    <svg viewBox="0 0 24 24" id="red-circle">
        <circle cx="12" cy="12" r="6" stroke="black" stroke-width="1" fill="red" /> 
    </svg>
     
    <!--Blue Circle-->
    <svg viewBox="0 0 24 24" id="blue-circle">
        <circle cx="12" cy="12" r="6" stroke="black" stroke-width="1" fill="blue" /> 
    </svg>
</svg>

These two graphics appear in the designer when I select the indicated library however when I want to add my own svg I fail.

What are the rules for adding such svg icons. I conclude that it has to be done strictly according to the pattern but I don't know much about SVG graphics. Is anyone able to tell how to add a sample icon from SVG code?

For example:

<?xml version="1.0" encoding="utf-8"?>


<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 256 256" enable-background="new 0 0 256 256" xml:space="preserve">
<metadata> Svg Vector Icons : http://www.onlinewebfonts.com/icon </metadata>
<g><g><g><path fill="#000000" d="M45.1,38C43.3,42.3,10,160.1,10,162.2c0,1.1,0.7,2.3,1.7,2.7s25.2,0.6,54,0.6H118v6.2c0,5.9-0.1,6.1-3,6.4c-2.4,0.3-3,0.9-2.7,2.7c0.2,1.6,1.2,2.4,3.1,2.7c2.7,0.3,2.7,0.5,2.9,8.7l0.2,8.5l-33.8,0.2L51,201.2v9.6v9.6h77.2h77.1v-9.6v-9.6l-33.2-0.3l-33.3-0.2v-8.4c0-8,0.1-8.5,2.4-8.8c1.5-0.2,2.4-1.2,2.7-2.8c0.3-1.9-0.1-2.3-2.3-2.3c-2.7,0-2.8-0.2-2.8-6.4v-6.4h52.6c44.8,0,52.9-0.2,54.2-1.6c1.4-1.4,0.3-5.7-8.5-36.4c-5.5-19.2-13.8-47.6-18.3-63.1l-8.1-28.2l-82.3-0.3l-82.2-0.2L45.1,38z M70.7,42.6c0,0.8-1,6.5-2.1,12.4c-1.2,6.1-2.1,11.1-2.1,11.2c0,0.2-5.2,0.3-11.7,0.3c-7.6,0-11.7-0.4-11.7-1.2c0-0.5,1.5-6.3,3.4-12.8L49.7,41h10.5C68.6,41,70.7,41.3,70.7,42.6z M97.9,44.4c-0.3,1.9-0.9,7.7-1.3,12.8l-0.7,9.4H84H72L74,56.1c3.2-17,1.5-15.1,13.8-15.1h10.7L97.9,44.4z M124.9,53.8v12.8h-11.8h-11.9l0.7-7.8c0.4-4.2,1-9.9,1.4-12.8l0.6-5h10.4h10.5V53.8z M152.8,49.5c0.4,4.4,1,10,1.3,12.4l0.6,4.6h-12.2h-12.2V53.8V40.9l11,0.3l10.9,0.3L152.8,49.5z M179.2,41.3c0,0.1,1,5.2,2.1,11.4c1.2,6.2,2.1,11.8,2.1,12.4c0,1.1-3,1.4-11.6,1.4h-11.6l-0.6-4.6c-0.3-2.4-1-8.2-1.3-12.8l-0.7-8.2h10.9C174.3,41,179.2,41.1,179.2,41.3z M209.6,53.8c2,6.7,3.6,12.3,3.6,12.4c0,0.2-5.2,0.3-11.6,0.3c-10.2,0-11.7-0.2-12.2-1.9c-0.2-1-1.3-5.9-2.2-10.9c-0.9-5-1.8-9.9-2-11c-0.4-1.7,0.4-1.8,10.2-1.6l10.7,0.3L209.6,53.8z M65,74.1c-0.3,1.3-1.5,7-2.6,12.8l-1.9,10.5H47H33.5l1.6-5.6c1-3,2.6-8.7,3.7-12.8l2.1-7.1h12.3C65.3,71.9,65.5,71.9,65,74.1z M94.7,77.4c-0.3,3.1-0.9,8.8-1.3,12.8l-0.6,7.2H79.5H66.2l0.6-3.5c0.4-1.8,1.5-7.6,2.4-12.8l1.7-9.3h12.1h12.2L94.7,77.4z M124.9,84.6v12.8h-13.4H98.1l0.5-4.6c0.4-2.4,1-8.2,1.4-12.8l0.6-8.2h12.1h12.1L124.9,84.6L124.9,84.6z M154.8,72.1c0,0.2,0.6,6,1.4,12.8l1.3,12.6h-13.6h-13.6V84.6V71.9h12.2C149.2,71.9,154.7,72,154.8,72.1z M187.1,82.3c1,5.7,2,11.5,2.4,12.8c0.5,2.3,0.4,2.3-12.9,2.3c-7.3,0-13.4-0.1-13.5-0.3c0-0.1-0.6-5.9-1.4-12.8l-1.3-12.4h12.3h12.5L187.1,82.3z M218.4,83.8c1.9,6.6,3.4,12.3,3.4,12.8c0,0.5-5.9,0.8-13.1,0.8h-13.1l-1.9-9.9c-1.1-5.3-2.1-11.1-2.4-12.8l-0.5-2.9h12.1H215L218.4,83.8z M59,104c0,0.6-1.1,6.6-2.2,13.3l-2.2,12H39.7c-8.2,0-14.8-0.3-14.8-0.7c0-1.1,6.5-24,7.1-25.1C32.8,102.2,59,102.5,59,104z M91.5,110.9c-0.4,4.6-1,10.5-1.4,13.3l-0.6,5.1H74.8c-14.8,0-14.8,0-14.4-2.4c0.3-1.3,1.3-6.4,2.2-11.4c1-5,2-9.9,2.2-11c0.5-1.6,2.1-1.8,13.9-1.8h13.4L91.5,110.9z M124.9,116v13.3h-15h-15l0.5-3.5c0.4-1.8,1-7.4,1.4-12.5c0.4-5,0.8-9.4,1.2-9.9c0.2-0.4,6.4-0.7,13.7-0.7h13.2L124.9,116L124.9,116z M158.2,106.7c0.3,2.2,1,8.3,1.4,13.4l0.7,9.4l-14.8-0.3l-14.8-0.3l-0.3-11.6c-0.1-6.5,0-12.3,0.2-13.1c0.4-1.1,3.8-1.4,13.7-1.4h13.2L158.2,106.7z M191.3,105.1c0.3,1.4,1.3,6.5,2.2,11.5c1,5,2,9.9,2.2,10.9c0.5,1.8-0.6,1.9-14.4,1.9c-8.3,0-15-0.1-15.1-0.3c-0.5-1.3-2.7-24.9-2.3-25.5c0.2-0.4,6.4-0.7,13.6-0.7C190.5,102.7,190.9,102.8,191.3,105.1z M226,110.4c1.3,4.3,3,9.9,3.8,12.4c0.7,2.7,1.5,5.1,1.5,5.6c0,0.4-6.6,0.8-14.8,0.8h-14.7l-2.3-11.5c-3.3-16.7-4.5-15.1,11.1-15.1h13.2L226,110.4z M51.8,142.8c-0.8,4.6-1.9,10-2.3,12l-0.7,3.7l-16.2,0.3c-8.9,0.1-16.2-0.1-16.2-0.5c0-0.5,1.5-6,3.3-12.3l3.4-11.4h15.1h15.2L51.8,142.8z M88.3,145c-1.2,15.6,0.6,14.2-17.8,14.2c-9.2,0-15.9-0.4-15.9-1s0.6-4.3,1.5-8.3c0.9-3.9,1.8-9,2.1-11.3l0.7-3.9h15H89L88.3,145z M124.9,146.9v12.2h-16.1H92.7l0.9-10.9c0.4-5.9,1-11.4,1.3-12.2c0.4-1.1,3.9-1.4,15.3-1.4h14.8L124.9,146.9L124.9,146.9z M161.5,139.1c0.3,2.6,0.9,8.1,1.3,12.2l0.7,7.8h-16.1h-16.1l-0.3-11c-0.2-6-0.1-11.5,0.1-12.2c0.2-1,4.1-1.3,15-1.3h14.7L161.5,139.1z M199.3,146c1.2,6.4,2.2,11.8,2.2,12.2c0,0.5-7.3,0.9-16.4,0.9h-16.4l-0.6-9.4c-0.4-5.1-1-10.5-1.3-12.2l-0.6-2.9h15.4H197L199.3,146z M236.5,146.2c1.9,6.5,3.4,11.9,3.4,12.2c0,0.3-7.3,0.6-16.3,0.6h-16.2l-2-11c-1.1-6-2.2-11.5-2.4-12.2c-0.4-1,3-1.3,14.8-1.3h15.4L236.5,146.2z M132.4,183.1v17.6h-4.8h-4.8v-17.6v-17.6h4.8h4.8L132.4,183.1L132.4,183.1z M200.5,210.7v4.8h-72.4H55.8v-4.8v-4.8h72.4h72.4V210.7z"/></g></g></g>
</svg>

Best regards,
Michał

[Michal_Goralczyk]

This post solved my probem:

[Feature-11983] Perspective - Icon component path property

In the Perspective module, I’ve dragged on an Icon component which has the path property, however it’s a simple text entry with no image browser, and I’m struggling to work out where this path should come from? [image]