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 mouseUpBy 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 mouseUpCustom 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 preOpenStackReferences
The coffee cup icon used in this lesson is from
https://www.iconfinder.com/iconsets/food-beverages-outline-1
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