Here I'm exploring how to create a script that imports a folder full of svg icons. I have sourced a number of interesting mit licensed libraries: - phosphor-icons - lucide-icons - octicons - tabler-icons
# How
- codepoint = a Unicode code point you associate with the icon** (think “the glyph number this icon would have if it were in an icon font”).
- **Today, LiveCode’s icon widgets don’t actually use it**, so you can leave it blank or `"0"` and everything still works - lessons.livecode.com 
If you *do* want to assign codepoints (future-proofing, or you plan to build an icon font): * Use the **Unicode Private Use Area (PUA)** so you won’t collide with real characters: **U+E000–U+F8FF** (BMP). Those are safe ranges reserved for custom glyphs. ([unicode.org][2], [Wikipedia][3]) * In practice, LiveCode expects the codepoint as a **hex string with no prefix**, e.g. `"E000"`, `"E001"`, … (the docs example shows `"FFFE"`, `"FFFF"`). ([docs.livecode.com][4]) * Keep them **unique** within your sets. (Names are searched across families; `addIconFamily` merges data and replaces on name collisions.) ([beta.docs.livecode.com][5], [docs.livecode.com][4])
Here’s a ready-to-drop script to bulk-add hundreds of SVG paths into a family and auto-assign PUA codepoints:
# pIconsA is an array: pIconsA[name]["svg"] = path string ("M10 10 ...") command addFamilyWithAutoCodepoints pFamily, pIconsA local tIconData, tUsed, tNext, tHex put gatherUsedCodepoints() into tUsed -- avoid reusing values put 0xE000 into tNext -- start of PUA (BMP) repeat for each key tName in pIconsA put pIconsA[tName]["svg"] into tIconData[tName]["svg"] -- Skip any codepoint already in use: repeat while (toUpper(format("%04X", tNext)) is among the keys of tUsed) add 1 to tNext end repeat if tNext > 0xF8FF then answer error "Ran out of BMP PUA codepoints (E000–F8FF)." exit addFamilyWithAutoCodepoints end if put toUpper(format("%04X", tNext)) into tHex put tHex into tIconData[tName]["codepoint"] put true into tUsed[tHex] add 1 to tNext end repeat addIconFamily pFamily, tIconData end command function gatherUsedCodepoints local tOut, tFams, tFam, tData, tName, tCP put iconFamilies() into tFams repeat for each line tFam in tFams put iconDataForFamily(tFam) into tData repeat for each key tName in tData put toUpper(tData[tName]["codepoint"]) into tCP if tCP is not empty then put true into tOut[tCP] end repeat end repeat return tOut end function
Usage:
# Build your input array (name → svg path) local tIconsA put "M10 10 H90 V90 H10 Z" into tIconsA["square"]["svg"] put "M100 100 m-50 0 a50 50 0 1 0 100 0 a50 50 0 1 0 -100 0" into tIconsA["circle"]["svg"] # Create/merge the family (name collisions replace existing icons) addFamilyWithAutoCodepoints "Shapes", tIconsA
A few practical tips: * If you aren’t using Font Awesome or an icon font, **it’s perfectly fine to set `codepoint` to `""` or `"0"`** and move on. ([lessons.livecode.com][1]) * `addIconFamily` **merges** with an existing family; to fully replace one, call `deleteIconFamily` first. ([docs.livecode.com][4]) * Syntax references for `addIcon` / `addIconFamily` / `iconNames` / `iconSVGPathFromName` are here if you need them. ([docs.livecode.com][6], [beta.docs.livecode.com][5])
# References 1. https://www.unicode.org/charts/PDF/UE000.pdf "Private Use Area" 1. https://en.wikipedia.org/wiki/Private_Use_Areas "Private Use Areas" 1. https://docs.livecode.com/docs/LiveCode%20Script/Libraries/Icon%20SVG%20Library/Handlers/addIconFamily "addIconFamily | LiveCode Documentation" 1. https://beta.docs.livecode.com/docs/LiveCode%20Script/Libraries/Icon%20SVG%20Library/ "Icon SVG Library | LiveCode Documentation" 1. https://docs.livecode.com/docs/LiveCode%20Script/Libraries/Icon%20SVG%20Library/Handlers/addIcon "addIcon | LiveCode Documentation"
# See - https://github.com/primer/octicons
- Svg Icons - onetab
- phosphoricons.com and github
- lucide.dev and github
- tablericons.com and github