Using svg icons inside custom component

Module Development
1

Hello everyone

I would like to use the icons already present inside ignition. (~\Inductive Automation\Ignition\data_20221121021\modules\com.inductiveautomation.perspective\icons) How can you access these inside React?

While developing I copied the material.svg file and used it succesfully like this: const iconSheet = require('../icons/material.svg').default;.
What path should I use inside of the Ignition module?

A related question I had was how to use custom types inside of the Ignition Designer? Like the icon or color props.
image

image

2

@victordcq would you know the answer?

1 Like
3

You get a color picker (or an icon picker) at design time if you set a key in your JSON schema for format to "icon-path" or "color".

To render an icon at runtime, import IconRenderer and IconRendererConfig from '@inductiveautomation/perspective-client'.

2 Likes
4

@PGriffith, cool! What other options are there? And where would this be documented?
I've seen dropdown-options, style option to a style-property, how about those?

With this renderer, you can just insert a path like 'material/iconname'?

5

Some of the possible format and schema options are listed in the example image component schema:

We should definitely do a better job listing them in one cohesive location though. There's a fair number of special formats we use internally.

1 Like
6

Thanks again Paul. It works, using IconRenderer makes it really easy. Also the color picker and icon-paths do work!

2 Likes
7

I'm having troubles getting this solution to work. When I use IconRenderer, it results in a blank (white square) svg element.

In my code I have:

<IconRenderer path={"./enterprise.svg"} style={{width: 20, height: 20}} color={'red'}/>

where enterprise.svg is an svg I put in the same directory as the code.

The blank svg in the chrome element inspector looks like:

<svg viewBox="0 0 24 24" class="" data-icon="./enterprise.svg" style="fill: red; width: 20px; height: 20px;"></svg>

enterprise.svg looks like:

<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path d="M11 19.95V18Q10.175 18 9.588 17.413Q9 16.825 9 16V15L4.2 10.2Q4.125 10.65 4.062 11.1Q4 11.55 4 12Q4 15.025 5.988 17.3Q7.975 19.575 11 19.95ZM17.9 17.4Q18.925 16.275 19.462 14.887Q20 13.5 20 12Q20 9.55 18.638 7.525Q17.275 5.5 15 4.6V5Q15 5.825 14.413 6.412Q13.825 7 13 7H11V9Q11 9.425 10.713 9.712Q10.425 10 10 10H8V12H14Q14.425 12 14.713 12.287Q15 12.575 15 13V16H16Q16.65 16 17.175 16.387Q17.7 16.775 17.9 17.4ZM12 22Q9.925 22 8.1 21.212Q6.275 20.425 4.925 19.075Q3.575 17.725 2.788 15.9Q2 14.075 2 12Q2 9.925 2.788 8.1Q3.575 6.275 4.925 4.925Q6.275 3.575 8.1 2.787Q9.925 2 12 2Q14.075 2 15.9 2.787Q17.725 3.575 19.075 4.925Q20.425 6.275 21.212 8.1Q22 9.925 22 12Q22 14.075 21.212 15.9Q20.425 17.725 19.075 19.075Q17.725 20.425 15.9 21.212Q14.075 22 12 22Z"/></svg>

I'm able to get enterprise.svg to render if I copy and paste the whole svg element directly into the program, but I'd rather not do that for all of the icons I need.

Am I using IconRenderer correctly? I've been stuck on this for a while.

8

IconRenderer is for using our built in icon management mechanism, e.g. {path: 'material/chevron_right'}; if you already have an SVG you want to display I think you just embed and display it in the 'traditional' React way?

9

Gotcha.
I was having a similar problem with the traditional react ways (blank svg elements), so I thought this might be a solution.
Thanks for the info!