Use custom svg for navicon

Ignition Early Access
1

Hi
I design some custom svg icon that I want to use in my menu tree navigation. The navIcon.path property only accept material/… library icon. I wonder how I can use my own icon in this component.

2

Hi @nader.chinichian, the best way to do this is to create your own SVG icon sprite file in the same format as the material or ignition icon sprite files (format show below). This file will then live under the <gateway install>\data\modules\com.inductiveautomation.perspective\icons directory (you’ll see the material and ignition icon sprites in this directory). You’ll then reference your icon by sprite-file-name\icon-id inside of the designer.

SVG Icon Sprite File Format

<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
	<defs>
		<style>
			.icon { display: none }
			.icon:target { display: inline }
		</style>
	</defs>
	<svg viewBox="0 0 16 16">
		<g class="icon" id="about">
			<path d="M9,3l-2.62268e-07,7.10543e-15c-3.31371,1.44847e-07 -6,2.68629 -6,6c1.44847e-07,3.31371 2.68629,6 6,6c3.31371,-1.44847e-07 6,-2.68629 6,-6l5.32907e-15,2.62268e-07c0,-3.31371 -2.68629,-6 -6,-6Zm2,8.75v0c0,0.138071 -0.111929,0.25 -0.25,0.25h-3.5h-1.09278e-08c-0.138071,-6.03528e-09 -0.25,-0.111929 -0.25,-0.25c0,0 0,0 0,0v-0.5l2.66454e-15,-2.68211e-08c2.08482e-08,-0.138071 0.111929,-0.25 0.25,-0.25h0.75v-2h-0.75h-1.09278e-08c-0.138071,-6.03528e-09 -0.25,-0.111929 -0.25,-0.25c0,0 0,0 0,0v-0.5l2.66454e-15,-2.68211e-08c2.08482e-08,-0.138071 0.111929,-0.25 0.25,-0.25h2.49l-1.1365e-08,1.77636e-15c0.143594,-6.27669e-09 0.26,0.116406 0.26,0.26v2.74h0.75h-1.09278e-08c0.138071,-6.03528e-09 0.25,0.111929 0.25,0.25Zm-2.74,-6.75h1.48h-1.1365e-08c0.143594,-6.27669e-09 0.26,0.116406 0.26,0.26v1.48v0c0,0.143594 -0.116406,0.26 -0.26,0.26h-1.48h-1.1365e-08c-0.143594,-6.27669e-09 -0.26,-0.116406 -0.26,-0.26v-1.48l3.55271e-15,-3.92589e-08c2.16821e-08,-0.143594 0.116406,-0.26 0.26,-0.26Z"></path>
		</g>
	</svg>
	
    ...

</svg>
1 Like
3

Hi
But how should convert my drawing to something like this:
<path d="M9,3l-2.62268e-07,7.10543e-15c-3.31371,1.44847e-07

Isn’t there any easier way to do this? If I some how can understand it it seems really time consuming.

4

Opening an svg file in a text editor should provide you all the xml properties necessary to create your image. No need to necessarily understand what it means, just design your graphics in your favorite vector program and copy the xml from your saved file. You’ll have to massage it a little bit to fit the overall structure of the sprite file Josh mentioned, but all the xml drawing work is already done for you.

1 Like
5

Having a tough time finding that directory you’re referring to. I’m on Windows 10. Any help?

6

I amended Josh’s post, but assuming you used the installer and didn’t change the install location, the icons directory would be C:\Program Files\Inductive Automation\Ignition\data\com.inductiveautomation.com.perspective\icons\.

1 Like