NG Client SVG Icons

[kwpsd]

Servoy 2020.03

We are implementing responsive design in our UI and are only using SVG icons (for scaling purposes in the response design). We have created multiple levels in our Media folder as follows to hold various SVG icons:

Media
----images
--------Icons
------------Menu

We are finding some very peculiar behavior getting the icons to display. For each icon, we created its own CSS class containing the following sample code:

Code: Select all

    .icon-name
    {
        content: url('../images/Icons/Menu/iconName.svg');
    }


sideNav

For sideNav menu items, the iconStyleClass is set to the icon's unique class name...but, the icon does not display.

Workaround: We moved the menu icons up one level to the 'Icons' folder, adjusted the content pathname, then the icons showed in the sideNav component.


Bootstrap Label and Button

Like the sideNav component, using the full media path does not find the icons using iconStyleClass for the buttons and StyleClass for the labels.

Workaround: We moved the icons to the 'images' folder...then, after adjusting the content pathname, the icons showed on the labels and buttons.


Also, sizing in the bootstrap labels and buttons work differently/inconsistently:

Labels: max-width: 50%; // has no effect on button

Buttons: width: 50%; // has no effect on label

And, the SVG images do not render in Developer but are displayed when the solution is run in a browser.

Has anyone else experienced this behavior? We have been unable to determine whether its us, the SVG icons, or the way the media folder is handled.

[kwpsd]

Regarding the icon folders...

I discovered that once an icon is moved to an upper level Media folder (where it is finally recognized and used by Servoy), I can then move it back to the lower level folders (where is was not originally recognized), adjust the pathname in the code, and it continues to be recognized and used by Servoy. Somehow, Servoy is not initially aware of the icons in the Media folders. The icons and the folder structure were created using the import mechanism...perhaps, that is causing the problem?

[kwpsd]

We recently were listening to the recording of the webinar Servoy UI/Style Tips & Tricks whereby Sean Devlin mentions that the Font Awesomme library is not recognized until you execute the following code when opening the solution:

Code: Select all

onSolutionOpen()
{
    plugins.fontawesomeLib.load()
}


Since Font Awesome icons are based on SVG graphics, we surmise that we are running into a similar issue. How is this done for our own SVG icons? What is the .load() function doing, and can we replicate it? How is Servoy assuring that our SVG icons will deploy with the solution? Any insight from Servoy on this? Help!

[john1598360627]

So I had a project where I could apply a style class to a label to make the label into an Icon.


I wanted to start a fresh new project so I imported the less files I created and all the .svg files that were used for the icons into it. Once I got my less files working, I have an asset page for buttons that I got up and working, I moved onto the icons. However, even though I had the same setup that I did for the icons in the old project, icons would NOT appear when I launched the NG client.

I can see the icons fine from the media folder, I have even removed all the style class code for the icons except for one to simplify it for testing. Still nothing.

As in, the label's supposed to turn into the icon but instead it's just bland. So Servoy is not registering it somehow. It's what Kim mentions here, that the svg's need to be initialized somehow such that Servoy can then see the .svg files. But I don't know how.


So this is still an ongoing issue.