How do I add a custom SVG to use in my app?

CustomIcons.zip

LiveCode provides a set of SVG icons to use with widgets like the Header or Navigation bar but  if your app needs custom icons you can add them to the available set of icons.

The Icon SVG Library

The Icon SVG Library allows you to add SVG icons, you can add an icon to an existing family(set), the custom family or create and delete your own icon familiies.

In this lesson we will add our custom icon to the default 'custom' family.

Adding an icon

To add an icon we need a name for the icon, the SVG path data and the codepoint to be used for the icon. We use the addIcon handler to add the icon to the library.

on mouseUp
   addIcon "coffeecup",field "svgPath","c999"
end mouseUp

By default, new icons are added to the "custom" family. The family may be specified by including the family name and a "/" before the icon name (appicons/coffeecup).

Using the custom icon

Now your icon has been added you can use it by referring to it by name. Widgets such as the Header and Navigation bar use iconSVGPathFromName to get SVG paths, all families are searched for the icon name so your icon should be found whatever family it has been added to.

on mouseUp
   set the itemIcons of widget "Navigation Bar" to "coffeecup,star empty,music,search"
end mouseUp

Custom icons in a standalone

To use custom icons in a standalone the icons must be added and then any widget properties set. The icon data could be stored in an external file that is included with the standalone and loaded in when the app starts.

on preOpenStack
   local tSVGDataFile, tSVGDataArray
   
   set the fullScreenMode of this stack to "exactFit"
   
   // Load custom icons
   put specialFolderPath("resources") & "/customIconData.json" into tSVGDataFile
   put jsonToArray(url ("file:" & tSVGDataFile)) into tSVGDataArray
   
   repeat with x = 1 to the number of elements in tSVGDataArray
      addIcon tSVGDataArray[x]["name"],tSVGDataArray[x]["path"],tSVGDataArray[x]["codepoint"]
   end repeat
   
   // Set navigation bar icons
   set the itemIcons of widget "Navigation Bar" to "coffeecup,ticket,music,search"
end preOpenStack

References

The coffee cup icon used in this lesson is from

https://www.iconfinder.com/iconsets/food-beverages-outline-1

12 Comments

Mark

Hi, I get what a name and path for SVG are, but what is a codepoint and where do I find (or how do I determine) it? Thanks

Panos Merakos

@Mark

The codepoint is for icons that are in font awesome. This might be helpful:

https://fontawesome.com/cheatsheet?from=io

Mark

Thanks Panos. So safe to say if I am not using Font Awesome (which looks pretty damn awesome btw) I don't need to provide a codepoint? Or, is there a default we should use instead?

Thanks

Panos Merakos

@Mark
Yes, it is safe to ignore it for now. You can leave it empty or use "0". Currently the widget does not use the codepoint parameter at all. In the future it might do so, with font awesome.
Kind regards,
Panos
--

Mark

Thanks Panos. One last question. This example uses specialFolderPath("resources") to store the custom icon data file, which on macOS is the same folder as your application. But on iOS which folder should I store it in? (my sandbox does not have a 'resources' folder). Would 'engine' be a suitable choice? Thanks

Panos Merakos

Hello Mark,
Any files and folders that are added in the Copy Files section, they are stored in the folder returned by specialFolderPath("resources"). This returns different paths depending on the platform, but you do not really care. All you have to do is add a file "customIconData.json" to the Copy Files section, and then access it using:

put specialFolderPath("resources") & "/customIconData.json" into tSVGDataFile

just as the example. This code works cross-platform.

Hope this helps.

Kind regards,
Panos
--

Mark

Thanks Panos. Could not be clearer :) However, I did not get the result I was expecting. In the ide this code works perfectly, yet when I create a standalone (iOS or macOS) I do not get the expected rendering (ie. no SVG icon generated). Any ideas?

on mouseUp
## Load custom icons
put specialFolderPath("resources") & "/customIconData.json" into tSVGDataFile
put jsonToArray(url ("file:" & tSVGDataFile)) into tSVGDataArray

repeat with x = 1 to the number of elements in tSVGDataArray
addIcon tSVGDataArray[x]["name"],tSVGDataArray[x]["path"],tSVGDataArray[x]["codepoint"]
end repeat
end mouseUp

The svg data file is either in Copy Files or in the same folder as app on desktop. Of course, after this I try and use the icon. Works fine in ide, but not when compiled.

Elanor Buchanan

Hi Mark

JSONToArray is part of the mergJSON library, it could be that the Standalone Builder is not including it automatically. If you choose to "Select Inclusions" on the General pane of the Standalone Application Settings and make sure mergJSON is included on the Inclusions pane that might fix it.

I hope that helps.

Elanor

Mark

Hi Elanor, that did the trick. Thank you

Elanor Buchanan

No problem, glad I could help!

Daniel

Dear all

Question: Any idea why I had a new icon first vertical flipping that afterwords it is shown correct in the header bar widget?

And here is an example of a customIconData.json with two icons, may be helpful. A comma is for seperation. And the Path has to be on ONE line, that would be my last hint.

[
{
"codepoint": "",
"name": "zoom_1",
"path": "...... "
},
{
"codepoint": "",
"name": "zoom_2",
"path": "......."
},
]

Panos Merakos

Hello Daniel,

Not sure why this happened for you, but if you have the icon file, and you can reliable reproduce the issue, I suggest filing a bug report (quality.livecode.com) and we will investigate this further. Please make sure you include a sample stack that can be used to reproduce the issue, as well as the sample icon file.

Cheers,
Panos

Add your comment

E-Mail me when someone replies to this comment

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.