SVG icon files are stored in an iconset folder and a single icon is assigned to a component by setting its $iconid, the same as in previous versions. And yet another benefit of SVG support in Studio 10.2 is that you can use any of the thousands of freely available open source SVG icons in your apps (with the proper attribution in your product licensing), such as the ‘Material’ icons provided by Google – in fact, we have provided an icon set in Studio 10.2 comprising over 100 of the material icons which have also been themed (these are described in the online docs, link at the end of this tech note). The main benefit of using SVG icons is that they are vector based and are inherently scalable, so you only need to create one single SVG file to cater to multiple sizes for component icons – therefore as your app is displayed on different devices, such as desktop or mobile, any SVG icons will scale seamlessly (when using PNG, you had to create a separate image file for each icon size).Ī further benefit of using SVG is that in Omnis you can “theme” an SVG icon, so the icon color will always match the current style. SVG images should now be used for component icons in your Omnis applications in preference to PNG images, as used in previous versions.

We have provided a number of sample icons and a library in a zip file: svgicons.zip

This tech note outlines how you can use SVG images for JS component icons and how you can “theme” them using a tool in Omnis. With the release of Omnis Studio 10.2 you can use SVG image files for icons with JavaScript Remote form and Window class components, while specifically for JS components, you can use ‘themed SVG icons’, which means the main color in the icon is changed automatically when the theme changes since it is linked to the control's text color.

Omnis Technical Note TNJC00 Using SVG Icons for your Omnis JavaScript apps

Open source svg icons