SVG - many questions and no answers

1
A problem has arisen in my mind that I would like to solve. Well, I would like to use specific icons in my application as elements to make the application easier to read. One example? In the file list (list view) there is an icon depending on the file extension (pdf, doc, etc). So I need to have these images in the entity to be able to call them up depending on the parameter. I have a set of icons as SVG but I am already losing my head how to use them properly. The image widget doesn't even have the right options to properly display these types of file. I want there to be a dark mode in my application but by default the imported images are black so they are not readable on a dark background. First question: how do I give them a colour e.g. the same as the text colour (theme dependent)? So that the fill is not black but the colour of the text or another colour defined in scss. An alternative would be to add the icons to the application as a font, but to call the  Second question: I have dozens of these icon images (SVG) - and almost all of them I want to use (an example like above is just one option). Is there an easy way to import them similar to how you import data from Excel? Third question: is it possible to use SVG as a button icon with the right colour (primary colour for example)? Sure, I've seen a lot of solutions but they're all total all around. It would be absurd to want to add one icon to edit several files each time, in external editors. By the way, the functionality regarding icons in the app should definitely be more developed....
asked
1 answers
0

Hi Marc,

 

For displaying the file icons based on the file extension

  1. Identify the file extension with a java action or a widget. 
  2. Add conditional visibility on your pages to display the correct icon based on the file extension identified. 

For changing the theme from light to dark mode, add CSS classes to change the colour of the SVG rendered.

Then add a conditional class to the images based on an attribute that checks which mode the page is currently in (dark of light).

 

See Mendix Forum - Question Details

 

https://marketplace.mendix.com/link/component/108388/Webflight/File-Type-Checker

 

For adding the images in bulk, you can build yourself a page that stores the images to your DB. Alternatively, you can import your images from online. Try google icons. 

 

https://www.w3schools.com/icons/google_icons_intro.asp

 

Material Icons Guide  |  Google Fonts  |  Google Developers

 

Hope that helps!

 

 

 

answered