Use a Custom Icon Repository
The materials icon repository is a great source for icons, but if you have a custom library of icons, you can set it up to be accessible by Ignition. All icon repositories are stored as SVG files within the Gateway's Installation Directory. A typical path to an icon file will look like:
You can create custom libraries by adding your own SVG file at this path. The properties inside the file are defined using XML, which should follow the pattern provided below. Note that each icon is placed in an enclosing SVG tag that defines values for the id attribute, which is used to specify the name of each icon, and the viewbox attribute, which must have large enough dimensions to fully enclose the graphic.
Once an icon file has been added, a Designer restart is required to pull the new icons into the Designer for development.
Example with Custom Icon Repository
In this example we'll make a custom repository file with icons. The name of the file is
example.svg. We'll then use the icons in this file and other repositories to create a Horizontal Menu component for Proposal, Project Documents, and Appendix headings.
First we created the repository file in xml.Click here to see the icon repository code
- Once created, save the file in the following directory (assuming a Windows install and the default choice of install folder):
C:Program Files\Inductive Automation\Ignition
- Next, we'll need to restart our Designer for the changes to be recognized.
Now we can use the icons in this icon repository in our components. For this example, we put a Horizontal Menu component in a Coordinate view.
We use two icons from the new example repository and one from the materials repository. We set the properties as follows for the Horizontal Menu component:
Top Level Properties
Property Value props.items.0.enabled true props.items.0.icon.path example/one props.items.0.icon.color
props.items.0.label Proposal props.items.0.style.color #4747FF props.items.0.style.fontFamily Verdana props.items.1.enabled true props.items.1.icon example/two props.items.1.color
props.items.1.label Project Documents props.items.1.style.color #008000 props.items.1.style.fontFamily Verdana props.items.2.enabled true props.items.2.icon.path material/folder_special props.items.2.icon.color
props.items.2.label Appendix props.items.2.style.color #AC00AC props.items.2.style.fontFamily Verdana props.style.borderBottomStyle double props.style.borderLeftStyle none props.style.borderRightStyle none props.style.borderTopStyle double props.style.borderTopWidth 4 props.style.borderBottomWidth 4
When we put the Designer into Previewmode, the Horizontal Menu appears.
Converting SVG-based Perspective Components to Drawings
Right-clicking on a built-in SVG-based Perspective component will give an option to convert the SVG into a drawing.
Converting the component to a drawing will result in the component having different properties. For example, the Cylindrical Tank component props list changes to include properties like viewBox, preserveAspectRatio, and elements instead when converted to a drawing.
Properties as a component:
Properties as a drawing: