How do I add a custom SVG to use in my app?
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
The coffee cup icon used in this lesson is from