[FEATURE] Custom SVG icon creation

Ignition Early Access
1

Dear all,
I set the following icon on my custom library “myIcons.svg”.

<svg viewBox="0 0 1000 1000">
	<g class="icon" id="loadEnable">
		<path d="M715.5504 357.46 C743.5503 357.46 770.59 358.66 775.17 359.87 C780 361.08 787.2401 365.66 791.34 370.01 C798.82 377.73 866.8901 469.94 866.8901 472.11 C866.8901 472.83 821.27 473.32 765.5101 473.32 L664.14 473.32 L664.14 415.39 L664.14 357.46 L715.55 357.46 C715.5502 357.46 715.5503 357.46 715.5504 357.46 ZM317.77 78.2 L231.59 162.91 C184.28 209.5 144.69 250.05 143.97 252.95 C143 256.57 144.21 259.95 147.35 263.09 C152.18 267.92 155.07 268.16 216.38 268.16 L280.35 268.16 L280.35 373.63 C280.35 474.77 280.59 479.6 285.18 487.32 C292.17 498.66 303.52 504.7 318 504.7 C333.69 504.7 344.79 497.7 352.28 482.98 C357.59 472.36 357.59 471.39 357.59 370.26 L357.59 268.16 L419.87 268.16 C486.73 268.16 492.77 267.19 492.77 255.61 C492.77 249.82 462.11 217.96 374.49 132.99 L317.77 78.2 ZM607.42 282.3999 L596.79 287.94 C590.76 291.08 583.76 296.63 581.1 300.25 C576.03 307.01 576.03 309.91 575.31 461.49 L574.83 615.73 L94.48 615.73 L94.48 538.97 C94.48 490.93 93.51 458.83 91.82 452.8 C87.0864 435.9913 68.8642 423.0275 51.6083 423.0275 C49.5434 423.0275 47.4924 423.2131 45.48 423.6 C32.93 426.01 21.58 434.7 15.55 446.77 L10 457.39 L10 634.56 L10 811.73 L17 818.73 L24 825.73 L96.66 825.73 L98.1 816.8 C104.38 776.01 114.51 754.52 138.65 730.63 C158.93 710.59 173.89 701.9 199.72 695.39 C211.198 692.4467 222.6617 690.996 233.9431 690.996 C268.9255 690.996 302.1547 704.9457 328.62 731.6 C351.31 754.29 367.24 789.53 367.24 816.57 L367.24 825.74 L620.68 825.74 L620.68 815.36 C620.68 787.12 635.65 755.01 660.5099 730.39 C687.06 703.84 720.9125 690.565 754.7362 690.565 C788.56 690.565 822.355 703.84 848.79 730.39 C873.41 755.01 888.6199 787.6 888.6199 815.84 L888.6199 825.74 L976 825.74 L983 818.74 L990 811.74 L990 772.88 C990 749.71 989.03 731.84 987.35 728.47 C984.45 722.1899 976 717.12 968.28 717.12 C963.45 717.12 963.45 714.46 963.21 592.09 C963.21 480.57 962.73 466.09 959.11 457.16 C953.3199 442.44 840.11 294.71 830.21 288.68 C822.73 284.09 817.42 283.8499 714.83 283.1299 L607.42 282.3999 ZM754.66 794.35 C759.97 794.35 767.69 796.53 771.79 798.94 C779.51 803.77 787.24 816.8 787.24 825.73 C787.24 828.63 785.31 834.9 783.14 839.49 C777.59 851.195 766.125 857.0475 754.66 857.0475 C743.195 857.0475 731.73 851.195 726.18 839.49 C721.11 828.87 721.11 822.59 726.18 811.97 C731.25 801.11 742.35 794.35 754.66 794.35 ZM233.5089 794.2938 C238.7635 794.2938 244.1425 795.5472 249.21 798.22 C256.21 801.6 265.62 817.53 265.87 825.49 C265.87 832.73 255.97 848.9 249.21 853.01 C244.2952 855.8891 238.8906 857.2365 233.5368 857.2365 C220.4811 857.2365 207.7268 849.2239 203.11 835.87 C199.97 826.94 199.97 824.53 203.11 815.59 C207.7729 802.2818 220.2442 794.2938 233.5089 794.2938 ZM229.3357 730.0481 C221.2333 730.0481 213.6794 730.8519 207.93 732.56 C159.9 746.56 129.48 793.63 137.93 840.7 C146.8649 889.6375 188.0705 921.7917 232.4722 921.7917 C245.6669 921.7917 259.1438 918.9523 272.14 912.87 C292.9 903.21 310.04 886.56 319.69 867.01 C326.93 852.05 327.41 849.39 327.41 825.74 C327.41 801.84 326.93 799.19 319.45 784.22 C309.31 763.7 288.31 743.67 269 736.43 C258.2383 732.3363 243.0062 730.0481 229.3357 730.0481 ZM753.2689 729.8466 C743.4868 729.8466 734.0329 731.1476 726.17 733.77 C699.86 742.46 680.07 759.6 668 784.7 C661 799.18 660.52 802.32 660.52 825.74 C660.52 848.19 661.2401 852.53 667.04 865.08 C680.5601 893.8 708.8 915.29 740.42 920.6 C745.1636 921.4237 749.9507 921.8231 754.7349 921.8231 C790.6052 921.8231 826.31 899.3758 842.28 865.08 C848.07 852.53 848.8 848.18 848.8 825.74 C848.8 802.81 848.08 798.95 841.8 785.19 C832.63 765.4 809.94 743.92 790.39 736.43 C779.3224 732.0562 766.017 729.8466 753.2689 729.8466 Z" />
	</g>
</svg>

I test the html code on https://codepen.io/pen/ and the output is as expected.
Neverthless, in an icon component in Perspective, where the “path” property is bound to “myIcons/loadEnable”, I am not able to render the icon.
Where am I wrong?

Thank you for your support.

Best,
Andrea

2

Hi @andrea.morando -

I got your icon library to work with the following modifications:

  1. Add the svg namespace to the opening svg element like so: xmlns="http://www.w3.org/2000/svg"
  2. Change the g to a symbol
  3. Move the viewBox attribute and value from the opening svg element to the opening symbol element

The working svg:

<svg xmlns="http://www.w3.org/2000/svg">
    <symbol class="icon" id="loadEnable" viewBox="0 0 1000 1000">
        <path d="M715.5504 357.46 C743.5503 357.46 770.59 358.66 775.17 359.87 C780 361.08 787.2401 365.66 791.34 370.01 C798.82 377.73 866.8901 469.94 866.8901 472.11 C866.8901 472.83 821.27 473.32 765.5101 473.32 L664.14 473.32 L664.14 415.39 L664.14 357.46 L715.55 357.46 C715.5502 357.46 715.5503 357.46 715.5504 357.46 ZM317.77 78.2 L231.59 162.91 C184.28 209.5 144.69 250.05 143.97 252.95 C143 256.57 144.21 259.95 147.35 263.09 C152.18 267.92 155.07 268.16 216.38 268.16 L280.35 268.16 L280.35 373.63 C280.35 474.77 280.59 479.6 285.18 487.32 C292.17 498.66 303.52 504.7 318 504.7 C333.69 504.7 344.79 497.7 352.28 482.98 C357.59 472.36 357.59 471.39 357.59 370.26 L357.59 268.16 L419.87 268.16 C486.73 268.16 492.77 267.19 492.77 255.61 C492.77 249.82 462.11 217.96 374.49 132.99 L317.77 78.2 ZM607.42 282.3999 L596.79 287.94 C590.76 291.08 583.76 296.63 581.1 300.25 C576.03 307.01 576.03 309.91 575.31 461.49 L574.83 615.73 L94.48 615.73 L94.48 538.97 C94.48 490.93 93.51 458.83 91.82 452.8 C87.0864 435.9913 68.8642 423.0275 51.6083 423.0275 C49.5434 423.0275 47.4924 423.2131 45.48 423.6 C32.93 426.01 21.58 434.7 15.55 446.77 L10 457.39 L10 634.56 L10 811.73 L17 818.73 L24 825.73 L96.66 825.73 L98.1 816.8 C104.38 776.01 114.51 754.52 138.65 730.63 C158.93 710.59 173.89 701.9 199.72 695.39 C211.198 692.4467 222.6617 690.996 233.9431 690.996 C268.9255 690.996 302.1547 704.9457 328.62 731.6 C351.31 754.29 367.24 789.53 367.24 816.57 L367.24 825.74 L620.68 825.74 L620.68 815.36 C620.68 787.12 635.65 755.01 660.5099 730.39 C687.06 703.84 720.9125 690.565 754.7362 690.565 C788.56 690.565 822.355 703.84 848.79 730.39 C873.41 755.01 888.6199 787.6 888.6199 815.84 L888.6199 825.74 L976 825.74 L983 818.74 L990 811.74 L990 772.88 C990 749.71 989.03 731.84 987.35 728.47 C984.45 722.1899 976 717.12 968.28 717.12 C963.45 717.12 963.45 714.46 963.21 592.09 C963.21 480.57 962.73 466.09 959.11 457.16 C953.3199 442.44 840.11 294.71 830.21 288.68 C822.73 284.09 817.42 283.8499 714.83 283.1299 L607.42 282.3999 ZM754.66 794.35 C759.97 794.35 767.69 796.53 771.79 798.94 C779.51 803.77 787.24 816.8 787.24 825.73 C787.24 828.63 785.31 834.9 783.14 839.49 C777.59 851.195 766.125 857.0475 754.66 857.0475 C743.195 857.0475 731.73 851.195 726.18 839.49 C721.11 828.87 721.11 822.59 726.18 811.97 C731.25 801.11 742.35 794.35 754.66 794.35 ZM233.5089 794.2938 C238.7635 794.2938 244.1425 795.5472 249.21 798.22 C256.21 801.6 265.62 817.53 265.87 825.49 C265.87 832.73 255.97 848.9 249.21 853.01 C244.2952 855.8891 238.8906 857.2365 233.5368 857.2365 C220.4811 857.2365 207.7268 849.2239 203.11 835.87 C199.97 826.94 199.97 824.53 203.11 815.59 C207.7729 802.2818 220.2442 794.2938 233.5089 794.2938 ZM229.3357 730.0481 C221.2333 730.0481 213.6794 730.8519 207.93 732.56 C159.9 746.56 129.48 793.63 137.93 840.7 C146.8649 889.6375 188.0705 921.7917 232.4722 921.7917 C245.6669 921.7917 259.1438 918.9523 272.14 912.87 C292.9 903.21 310.04 886.56 319.69 867.01 C326.93 852.05 327.41 849.39 327.41 825.74 C327.41 801.84 326.93 799.19 319.45 784.22 C309.31 763.7 288.31 743.67 269 736.43 C258.2383 732.3363 243.0062 730.0481 229.3357 730.0481 ZM753.2689 729.8466 C743.4868 729.8466 734.0329 731.1476 726.17 733.77 C699.86 742.46 680.07 759.6 668 784.7 C661 799.18 660.52 802.32 660.52 825.74 C660.52 848.19 661.2401 852.53 667.04 865.08 C680.5601 893.8 708.8 915.29 740.42 920.6 C745.1636 921.4237 749.9507 921.8231 754.7349 921.8231 C790.6052 921.8231 826.31 899.3758 842.28 865.08 C848.07 852.53 848.8 848.18 848.8 825.74 C848.8 802.81 848.08 798.95 841.8 785.19 C832.63 765.4 809.94 743.92 790.39 736.43 C779.3224 732.0562 766.017 729.8466 753.2689 729.8466 Z"/>
    </symbol>
</svg>
4 Likes
3

Great! It works fine.

2 Likes