Hey lieben Ninox Entwickler. Eine Funktion, die wir in jedem unserer Projekte standardmäßig als Globale Funktion reinnehmen, sind die Feather Icons, die von Ninox in einigen Bereiche schon verwendet werden. Dadurch könnt ihr im Ninox Layout bleiben und trotzdem von der riesigen Icon Vielfalt auf https://feathericons.com/ profitieren. Diese möchte ich heute mit euch teilen :)

Hier der Code Schnipsel dazu:
z.B. check-circle --> die Bezeichnungen findet ihr auf der Website von Feather.

icon("check-circle", "#000", 2, 40)

Hier die globale Funktion (es fehlen noch einige Icons. Wir können sie ja gemeinsam vervollständigen )

function icon(name : text,color : text,width : number,size : number) do
    let icon := switch name do
        case "edit":
            "<svg viewBox='0 0 24 24' width='" + size + "' height='" + size + "' stroke='" + color + "' stroke-width='" + width + "' fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1'><path d='M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z'></path></svg>"
        case "copy":
            "<svg viewBox='0 0 24 24'  width='" + size + "' height='" + size + "' stroke='" + color + "' stroke-width='" + width + "'  fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1'><rect x='9' y='9' width='13' height='13' rx='2' ry='2'></rect><path d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'></path></svg>"
        case "grid":
            "<svg viewBox='0 0 24 24'  width='" + size + "' height='" + size + "' stroke='" + color + "' stroke-width='" + width + "'  fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1'><rect x='3' y='3' width='7' height='7'></rect><rect x='14' y='3' width='7' height='7'></rect><rect x='14' y='14' width='7' height='7'></rect><rect x='3' y='14' width='7' height='7'></rect></svg>"
        case "plus":
            "<svg viewBox='0 0 24 24'  width='" + size + "' height='" + size + "' stroke='" + color + "' stroke-width='" + width + "'  fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1'><line x1='12' y1='5' x2='12' y2='19'></line><line x1='5' y1='12' x2='19' y2='12'></line></svg>"
        case "shuffle":
            "<svg viewBox='0 0 24 24'  width='" + size + "' height='" + size + "' stroke='" + color + "' stroke-width='" + width + "'  fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1'><polyline points='16 3 21 3 21 8'></polyline><line x1='4' y1='20' x2='21' y2='3'></line><polyline points='21 16 21 21 16 21'></polyline><line x1='15' y1='15' x2='21' y2='21'></line><line x1='4' y1='4' x2='9' y2='9'></line></svg>"
        case "camera":
            "<svg viewBox='0 0 24 24'  width='" + size + "' height='" + size + "' stroke='" + color + "' stroke-width='" + width + "'  fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1'><path d='M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z'></path><circle cx='12' cy='13' r='4'></circle></svg>"
        case "trash":
            "<svg viewBox='0 0 24 24'  width='" + size + "' height='" + size + "' stroke='" + color + "' stroke-width='" + width + "'  fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1'><polyline points='3 6 5 6 21 6'></polyline><path d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'></path><line x1='10' y1='11' x2='10' y2='17'></line><line x1='14' y1='11' x2='14' y2='17'></line></svg>"
        case "home":
            "<svg viewBox='0 0 24 24'  width='" + size + "' height='" + size + "' stroke='" + color + "' stroke-width='" + width + "'  fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1'><path d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'></path><polyline points='9 22 9 12 15 12 15 22'></polyline></svg>"
        case "check-circle":
            "<svg viewBox='0 0 24 24'  width='" + size + "' height='" + size + "' stroke='" + color + "' stroke-width='" + width + "'  fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1'><path d='M22 11.08V12a10 10 0 1 1-5.93-9.14'></path><polyline points='22 4 12 14.01 9 11.01'></polyline></svg>"
        case "dot":
            "<svg viewBox='0 0 24 24'  width='" + size + "' height='" + size + "' stroke='" + color + "' stroke-width='" + width + "'  fill='" + color + "' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1'><circle cx='12' cy='12' r='6'></circle></svg>"
        case "check-square":
            "<svg viewBox='0 0 24 24'  width='" + size + "' height='" + size + "' stroke='" + color + "' stroke-width='" + width + "'  fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1'><polyline points='9 11 12 14 22 4'></polyline><path d='M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11'></path></svg>"
        case "check-circle":
            "<svg viewBox='0 0 24 24'  width='" + size + "' height='" + size + "' stroke='" + color + "' stroke-width='" + width + "'  fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1'><path d='M22 11.08V12a10 10 0 1 1-5.93-9.14'></path><polyline points='22 4 12 14.01 9 11.01'></polyline></svg>"
        case "list":
            "<svg viewBox='0 0 24 24'  width='" + size + "' height='" + size + "' stroke='" + color + "' stroke-width='" + width + "'  fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1'><line x1='8' y1='6' x2='21' y2='6'></line><line x1='8' y1='12' x2='21' y2='12'></line><line x1='8' y1='18' x2='21' y2='18'></line><line x1='3' y1='6' x2='3.01' y2='6'></line><line x1='3' y1='12' x2='3.01' y2='12'></line><line x1='3' y1='18' x2='3.01' y2='18'></line></svg>"
        case "box":
            "<svg viewBox='0 0 24 24'  width='" + size + "' height='" + size + "' stroke='" + color + "' stroke-width='" + width + "'  fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1'><path d='M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z'></path><polyline points='3.27 6.96 12 12.01 20.73 6.96'></polyline><line x1='12' y1='22.08' x2='12' y2='12'></line></svg>"
        case "flag":
            "<svg viewBox='0 0 24 24'  width='" + size + "' height='" + size + "' stroke='" + color + "' stroke-width='" + width + "'  fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1'><path d='M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z'></path><line x1='4' y1='22' x2='4' y2='15'></line></svg>"
        case "airplay":
            "<svg viewBox='0 0 24 24'  width='" + size + "' height='" + size + "' stroke='" + color + "' stroke-width='" + width + "'  fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1'><path d='M5 17H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-1'></path><polygon points='12 15 17 21 7 21 12 15'></polygon></svg>"
        case "shopping-cart":
            "<svg viewBox='0 0 24 24'  width='" + size + "' height='" + size + "' stroke='" + color + "' stroke-width='" + width + "'  fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1'><circle cx='9' cy='21' r='1'></circle><circle cx='20' cy='21' r='1'></circle><path d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'></path></svg>"
        case "shopping-cart":
            "<svg viewBox='0 0 24 24'  width='" + size + "' height='" + size + "' stroke='" + color + "' stroke-width='" + width + "'  fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1'><circle cx='9' cy='21' r='1'></circle><circle cx='20' cy='21' r='1'></circle><path d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'></path></svg>"
        case "repeat":
            "<svg viewBox='0 0 24 24'  width='" + size + "' height='" + size + "' stroke='" + color + "' stroke-width='" + width + "'  fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1'><polyline points='17 1 21 5 17 9'></polyline><path d='M3 11V9a4 4 0 0 1 4-4h14'></path><polyline points='7 23 3 19 7 15'></polyline><path d='M21 13v2a4 4 0 0 1-4 4H3'></path></svg>"
        case "x-square":
            "<svg viewBox='0 0 24 24'  width='" + size + "' height='" + size + "' stroke='" + color + "' stroke-width='" + width + "'  fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1'><rect x='3' y='3' width='18' height='18' rx='2' ry='2'></rect><line x1='9' y1='9' x2='15' y2='15'></line><line x1='15' y1='9' x2='9' y2='15'></line></svg>"
        case "smallCheck":
            "<svg viewBox='0 0 24 24'  width='" + size + "' height='" + size + "' stroke='" + color + "' stroke-width='" + width + "'  fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1'><path d='M 1.125 7.49 L 5.576 11.607 L 12.699 1.207'></path></svg>"
        case "plus":
            "<svg viewBox='0 0 24 24'  width='" + size + "' height='" + size + "' stroke='" + color + "' stroke-width='" + width + "'  fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1'><line x1='12' y1='5' x2='12' y2='19'></line><line x1='5' y1='12' x2='19' y2='12'></line></svg>"
        case "minus":
            "<svg viewBox='0 0 24 24'  width='" + size + "' height='" + size + "' stroke='" + color + "' stroke-width='" + width + "'  fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1'><line x1='5' y1='12' x2='19' y2='12'></line></svg>"
        case "user":
            "<svg viewBox='0 0 24 24'  width='" + size + "' height='" + size + "' stroke='" + color + "' stroke-width='" + width + "'  fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1'><path d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'></path><circle cx='12' cy='7' r='4'></circle></svg>"
        case "facingCheck":
            "<svg viewBox='0 0 24 24'  width='" + size + "' height='" + size + "' stroke='" + color + "' stroke-width='" + width + "'  fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1'><path d='M12 3h7a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-7m0-18H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h7m0-18v18'></path></svg>"
        case "oos":
            "<svg viewBox='0 0 24 24'  width='" + size + "' height='" + size + "' stroke='" + color + "' stroke-width='" + width + "'  fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1'><path d='M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z'></path><polyline points='3.27 6.96 12 12.01 20.73 6.96'></polyline><line x1='12' y1='22.08' x2='12' y2='12'></line></svg>"
        case "chevron-right":
            "<svg viewBox='0 0 24 24'  width='" + size + "' height='" + size + "' stroke='" + color + "' stroke-width='" + width + "'  fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1'><polyline points='9 18 15 12 9 6'></polyline></svg>"
        case "chevron-left":
            "<svg viewBox='0 0 24 24'  width='" + size + "' height='" + size + "' stroke='" + color + "' stroke-width='" + width + "'  fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1'><polyline points='15 18 9 12 15 6'></polyline></svg>"
        case "chevron-down":
            "<svg viewBox='0 0 24 24'  width='" + size + "' height='" + size + "' stroke='" + color + "' stroke-width='" + width + "'  fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1'><polyline points='6 9 12 15 18 9'></polyline></svg>"
        case "chevrons-right":
            "<svg viewBox='0 0 24 24'  width='" + size + "' height='" + size + "' stroke='" + color + "' stroke-width='" + width + "'  fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1'><polyline points='13 17 18 12 13 7'></polyline><polyline points='6 17 11 12 6 7'></polyline></svg>"
        case "chevrons-left":
            "<svg viewBox='0 0 24 24'  width='" + size + "' height='" + size + "' stroke='" + color + "' stroke-width='" + width + "'  fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1'><polyline points='11 17 6 12 11 7'></polyline><polyline points='18 17 13 12 18 7'></polyline></svg>"
        case "calendar":
            "<svg viewBox='0 0 24 24'  width='" + size + "' height='" + size + "' stroke='" + color + "' stroke-width='" + width + "'  fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1'><rect x='3' y='4' width='18' height='18' rx='2' ry='2'></rect><line x1='16' y1='2' x2='16' y2='6'></line><line x1='8' y1='2' x2='8' y2='6'></line><line x1='3' y1='10' x2='21' y2='10'></line></svg>"
        case "help-circle":
            "<svg viewBox='0 0 24 24'  width='" + size + "' height='" + size + "' stroke='" + color + "' stroke-width='" + width + "'  fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1'><circle cx='12' cy='12' r='10'></circle><path d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'></path><line x1='12' y1='17' x2='12.01' y2='17'></line></svg>"
        case "x-cirlce":
            "<svg viewBox='0 0 24 24'  width='" + size + "' height='" + size + "' stroke='" + color + "' stroke-width='" + width + "'  fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1'><circle cx='12' cy='12' r='10'></circle><line x1='15' y1='9' x2='9' y2='15'></line><line x1='9' y1='9' x2='15' y2='15'></line></svg>"
        case "play":
            "<svg viewBox='0 0 24 24'  width='" + size + "' height='" + size + "' stroke='" + color + "' stroke-width='" + width + "'  fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1'><polygon points='5 3 19 12 5 21 5 3'></polygon></svg>"
        case "map-pin":
            "<svg viewBox='0 0 24 24'  width='" + size + "' height='" + size + "' stroke='" + color + "' stroke-width='" + width + "'  fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1'><path d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'></path><circle cx='12' cy='10' r='3'></circle></svg>"
        case "log-out":
            "<svg viewBox='0 0 24 24'  width='" + size + "' height='" + size + "' stroke='" + color + "' stroke-width='" + width + "'  fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1'><path d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'></path><polyline points='16 17 21 12 16 7'></polyline><line x1='21' y1='12' x2='9' y2='12'></line></svg>"
        case "x":
            "<svg viewBox='0 0 24 24'  width='" + size + "' height='" + size + "' stroke='" + color + "' stroke-width='" + width + "'  fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1'><line x1='18' y1='6' x2='6' y2='18'></line><line x1='6' y1='6' x2='18' y2='18'></line></svg>"
        case "check":
            "<svg viewBox='0 0 24 24'  width='" + size + "' height='" + size + "' stroke='" + color + "' stroke-width='" + width + "'  fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1'><polyline points='20 6 9 17 4 12'></polyline></svg>"
        case "edit":
            "<svg viewBox='0 0 24 24'  width='" + size + "' height='" + size + "' stroke='" + color + "' stroke-width='" + width + "'  fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1'><path d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'></path><path d='M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z'></path></svg>"
        case "printer":
            "<svg viewBox='0 0 24 24'  width='" + size + "' height='" + size + "' stroke='" + color + "' stroke-width='" + width + "'  fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1'><polyline points='6 9 6 2 18 2 18 9'></polyline><path d='M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2'></path><rect x='6' y='14' width='12' height='8'></rect></svg>"
        case "x-circle":
            "<svg viewBox='0 0 24 24'  width='" + size + "' height='" + size + "' stroke='" + color + "' stroke-width='" + width + "'  fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1'><circle cx='12' cy='12' r='10'></circle><line x1='15' y1='9' x2='9' y2='15'></line><line x1='9' y1='9' x2='15' y2='15'></line></svg>"
        case "house":
            "<svg viewBox='0 0 24 24'  width='" + size + "' height='" + size + "' stroke='" + color + "' stroke-width='" + width + "'  fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1'><path d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'></path><polyline points='9 22 9 12 15 12 15 22'></polyline></svg>"
        case "user":
            "<svg viewBox='0 0 24 24'  width='" + size + "' height='" + size + "' stroke='" + color + "' stroke-width='" + width + "'  fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1'><path d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'></path><circle cx='12' cy='7' r='4'></circle></svg>"
        case "paperclip":
            "<svg viewBox='0 0 24 24'  width='" + size + "' height='" + size + "' stroke='" + color + "' stroke-width='" + width + "'  fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1'><path d='M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48'></path></svg>"
        case "pen-tool":
            "<svg viewBox='0 0 24 24'  width='" + size + "' height='" + size + "' stroke='" + color + "' stroke-width='" + width + "'  fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1'><path d='M12 19l7-7 3 3-7 7-3-3z'></path><path d='M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z'></path><path d='M2 2l7.586 7.586'></path><circle cx='11' cy='11' r='2'></circle></svg>"
        case "arrow-right":
            "<svg viewBox='0 0 24 24'  width='" + size + "' height='" + size + "' stroke='" + color + "' stroke-width='" + width + "'  fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1'><line x1='5' y1='12' x2='19' y2='12'></line><polyline points='12 5 19 12 12 19'></polyline></svg>"
        case "clock":
            "<svg viewBox='0 0 24 24'  width='" + size + "' height='" + size + "' stroke='" + color + "' stroke-width='" + width + "'  fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1'><circle cx='12' cy='12' r='10'></circle><polyline points='12 6 12 12 16 14'></polyline></svg>"
        case "__":
            "<svg viewBox='0 0 24 24'  width='" + size + "' height='" + size + "' stroke='" + color + "' stroke-width='" + width + "'  fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1'>______</svg>"
        default:
            "<svg viewBox='0 0 24 24'  width='" + size + "' height='" + size + "' stroke='" + color + "' stroke-width='" + width + "'  fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1'><path d='M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48'></path></svg>"
        end;
    html(icon)
end;

Viel Spaß beim stylen!
Euer Jakob