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

References

The coffee cup icon used in this lesson is from

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

0 Comments

Add your comment

E-Mail me when someone replies to this comment