UNPKG

@ndbx/runtime

Version:

The `@ndbx/runtime` package provides a runtime environment to embed NodeBox visualizations directly into React applications. NodeBox is a powerful tool for creating interactive and generative visualizations, and this runtime allows you to integrate those

71 lines (64 loc) • 24.1 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
/** * Load Icon from Boxicons * * See <boxicons.com> for a full list of icons * @category Graphics */ import { parseSVG } from "@ndbx/g"; const iconCache = new Map(); export default function (node) { const styleIn = node.stringIn({ name: "style", value: "regular", choices: ["regular", "solid", "logo"] }); // prettier-ignore const regularIn = node.stringIn({ name: "regular", value: "abacus", choices: ["abacus", "accessibility", "add-to-queue", "adjust", "alarm-add", "alarm-exclamation", "alarm-off", "alarm-snooze", "alarm", "album", "align-justify", "align-left", "align-middle", "align-right", "analyse", "anchor", "angry", "aperture", "arch", "archive-in", "archive-out", "archive", "area", "arrow-back", "arrow-from-bottom", "arrow-from-left", "arrow-from-right", "arrow-from-top", "arrow-to-bottom", "arrow-to-left", "arrow-to-right", "arrow-to-top", "at", "atom", "award", "badge-check", "badge", "baguette", "ball", "band-aid", "bar-chart-alt-2", "bar-chart-alt", "bar-chart-square", "bar-chart", "barcode-reader", "barcode", "baseball", "basket", "basketball", "bath", "battery", "bed", "been-here", "beer", "bell-minus", "bell-off", "bell-plus", "bell", "bible", "bitcoin", "blanket", "block", "bluetooth", "body", "bold", "bolt-circle", "bomb", "bone", "bong", "book-add", "book-alt", "book-bookmark", "book-content", "book-heart", "book-open", "book-reader", "book", "bookmark-alt-minus", "bookmark-alt-plus", "bookmark-alt", "bookmark-heart", "bookmark-minus", "bookmark-plus", "bookmark", "bookmarks", "border-all", "border-bottom", "border-inner", "border-left", "border-none", "border-outer", "border-radius", "border-right", "border-top", "bot", "bowl-hot", "bowl-rice", "bowling-ball", "box", "bracket", "braille", "brain", "briefcase-alt-2", "briefcase-alt", "briefcase", "brightness-half", "brightness", "broadcast", "brush-alt", "brush", "bug-alt", "bug", "building-house", "building", "buildings", "bulb", "bullseye", "buoy", "bus-school", "bus", "cabinet", "cable-car", "cake", "calculator", "calendar-alt", "calendar-check", "calendar-edit", "calendar-event", "calendar-exclamation", "calendar-heart", "calendar-minus", "calendar-plus", "calendar-star", "calendar-week", "calendar-x", "calendar", "camera-home", "camera-movie", "camera-off", "camera", "candles", "capsule", "captions", "car", "card", "caret-down-circle", "caret-down-square", "caret-down", "caret-left-circle", "caret-left-square", "caret-left", "caret-right-circle", "caret-right-square", "caret-right", "caret-up-circle", "caret-up-square", "caret-up", "carousel", "cart-add", "cart-alt", "cart-download", "cart", "cast", "category-alt", "category", "cctv", "certification", "chair", "chalkboard", "chart", "chat", "check-circle", "check-double", "check-shield", "check-square", "check", "checkbox-checked", "checkbox-minus", "checkbox-square", "checkbox", "cheese", "chevron-down-circle", "chevron-down-square", "chevron-down", "chevron-left-circle", "chevron-left-square", "chevron-left", "chevron-right-circle", "chevron-right-square", "chevron-right", "chevron-up-circle", "chevron-up-square", "chevron-up", "chevrons-down", "chevrons-left", "chevrons-right", "chevrons-up", "child", "chip", "church", "circle-half", "circle-quarter", "circle-three-quarter", "circle", "clinic", "clipboard", "closet", "cloud-download", "cloud-drizzle", "cloud-light-rain", "cloud-lightning", "cloud-rain", "cloud-snow", "cloud-upload", "cloud", "code-alt", "code-block", "code-curly", "code", "coffee-togo", "coffee", "cog", "coin-stack", "coin", "collapse-alt", "collapse-horizontal", "collapse-vertical", "collapse", "collection", "color-fill", "color", "columns", "command", "comment-add", "comment-check", "comment-detail", "comment-dots", "comment-edit", "comment-error", "comment-minus", "comment-x", "comment", "compass", "confused", "conversation", "cookie", "cool", "copy-alt", "copy", "copyright", "credit-card-alt", "credit-card-front", "credit-card", "cricket-ball", "crop", "cross", "crosshair", "crown", "cube-alt", "cube", "cuboid", "current-location", "customize", "cut", "cycling", "cylinder", "data", "desktop", "detail", "devices", "dialpad-alt", "dialpad", "diamond", "dice-1", "dice-2", "dice-3", "dice-4", "dice-5", "dice-6", "directions", "disc", "dish", "dislike", "dizzy", "dna", "dock-bottom", "dock-left", "dock-right", "dock-top", "dollar-circle", "dollar", "donate-blood", "donate-heart", "door-open", "dots-horizontal-rounded", "dots-horizontal", "dots-vertical-rounded", "dots-vertical", "doughnut-chart", "down-arrow-alt", "down-arrow-circle", "down-arrow", "download", "downvote", "drink", "droplet", "dumbbell", "duplicate", "edit-alt", "edit", "envelope-open", "envelope", "equalizer", "eraser", "error-alt", "error-circle", "error", "euro", "exclude", "exit-fullscreen", "exit", "expand-alt", "expand-horizontal", "expand-vertical", "expand", "export", "extension", "face", "fast-forward-circle", "fast-forward", "female-sign", "female", "file-blank", "file-find", "file", "film", "filter-alt", "filter", "fingerprint", "first-aid", "first-page", "flag", "folder-minus", "folder-open", "folder-plus", "folder", "font-color", "font-family", "font-size", "font", "food-menu", "food-tag", "football", "fork", "fridge", "fullscreen", "game", "gas-pump", "ghost", "gift", "git-branch", "git-commit", "git-compare", "git-merge", "git-pull-request", "git-repo-forked", "glasses-alt", "glasses", "globe-alt", "globe", "grid-alt", "grid-horizontal", "grid-small", "grid-vertical", "grid", "group", "handicap", "happy-alt", "happy-beaming", "happy-heart-eyes", "happy", "hard-hat", "hash", "hdd", "heading", "headphone", "health", "heart-circle", "heart-square", "heart", "help-circle", "hide", "highlight", "history", "hive", "home-alt-2", "home-alt", "home-circle", "home-heart", "home-smile", "home", "horizontal-center", "horizontal-left", "horizontal-right", "hotel", "hourglass", "id-card", "image-add", "image-alt", "image", "images", "import", "infinite", "info-circle", "info-square", "injection", "intersect", "italic", "joystick-alt", "joystick-button", "joystick", "key", "knife", "label", "landscape", "laptop", "last-page", "laugh", "layer-minus", "layer-plus", "layer", "layout", "leaf", "left-arrow-alt", "left-arrow-circle", "left-arrow", "left-down-arrow-circle", "left-indent", "left-top-arrow-circle", "lemon", "library", "like", "line-chart-down", "line-chart", "link-alt", "link-external", "link", "lira", "list-check", "list-minus", "list-ol", "list-plus", "list-ul", "loader-alt", "loader-circle", "loader", "location-plus", "lock-alt", "lock-open-alt", "lock-open", "lock", "log-in-circle", "log-in", "log-out-circle", "log-out", "low-vision", "magnet", "mail-send", "male-female", "male-sign", "male", "map-alt", "map-pin", "map", "mask", "math", "medal", "meh-alt", "meh-blank", "meh", "memory-card", "menu-alt-left", "menu-alt-right", "menu", "merge", "message-add", "message-alt-add", "message-alt-check", "message-alt-detail", "message-alt-dots", "message-alt-edit", "message-alt-error", "message-alt-minus", "message-alt-x", "message-alt", "message-check", "message-detail", "message-dots", "message-edit", "message-error", "message-minus", "message-rounded-add", "message-rounded-check", "message-rounded-detail", "message-rounded-dots", "message-rounded-edit", "message-rounded-error", "message-rounded-minus", "message-rounded-x", "message-rounded", "message-square-add", "message-square-check", "message-square-detail", "message-square-dots", "message-square-edit", "message-square-error", "message-square-minus", "message-square-x", "message-square", "message-x", "message", "meteor", "microchip", "microphone-off", "microphone", "minus-back", "minus-circle", "minus-front", "minus", "mobile-alt", "mobile-landscape", "mobile-vibration", "mobile", "money-withdraw", "money", "moon", "mouse-alt", "mouse", "move-horizontal", "move-vertical", "move", "movie-play", "movie", "music", "navigation", "network-chart", "news", "no-entry", "no-signal", "note", "notepad", "notification-off", "notification", "objects-horizontal-center", "objects-horizontal-left", "objects-horizontal-right", "objects-vertical-bottom", "objects-vertical-center", "objects-vertical-top", "outline", "package", "paint-roll", "paint", "palette", "paper-plane", "paperclip", "paragraph", "party", "paste", "pause-circle", "pause", "pen", "pencil", "phone-call", "phone-incoming", "phone-off", "phone-outgoing", "phone", "photo-album", "pie-chart-alt-2", "pie-chart-alt", "pie-chart", "pin", "planet", "play-circle", "play", "plug", "plus-circle", "plus-medical", "plus", "podcast", "pointer", "poll", "polygon", "popsicle", "pound", "power-off", "printer", "pulse", "purchase-tag-alt", "purchase-tag", "pyramid", "qr-scan", "qr", "question-mark", "radar", "radio-circle-marked", "radio-circle", "radio", "receipt", "rectangle", "recycle", "redo", "reflect-horizontal", "reflect-vertical", "refresh", "registered", "rename", "repeat", "reply-all", "reply", "repost", "reset", "restaurant", "revision", "rewind-circle", "rewind", "rfid", "right-arrow-alt", "right-arrow-circle", "right-arrow", "right-down-arrow-circle", "right-indent", "right-top-arrow-circle", "rocket", "rotate-left", "rotate-right", "rss", "ruble", "ruler", "run", "rupee", "sad", "save", "scan", "scatter-chart", "screenshot", "search-alt-2", "search-alt", "search", "select-multiple", "selection", "send", "server", "shape-circle", "shape-polygon", "shape-square", "shape-triangle", "share-alt", "share", "shekel", "shield-alt-2", "shield-alt", "shield-minus", "shield-plus", "shield-quarter", "shield-x", "shield", "shocked", "shopping-bag", "show-alt", "show", "shower", "shuffle", "sidebar", "signal-1", "signal-2", "signal-3", "signal-4", "signal-5", "sitemap", "skip-next-circle", "skip-next", "skip-previous-circle", "skip-previous", "sleepy", "slider-alt", "slider", "slideshow", "smile", "sort-a-z", "sort-alt-2", "sort-down", "sort-up", "sort-z-a", "sort", "spa", "space-bar", "speaker", "spray-can", "spreadsheet", "square-rounded", "square", "star", "station", "stats", "sticker", "stop-circle", "stop", "stopwatch", "store-alt", "store", "street-view", "strikethrough", "subdirectory-left", "subdirectory-right", "sun", "support", "sushi", "swim", "sync", "tab", "table", "tachometer", "tag-alt", "tag", "target-lock", "task-x", "task", "taxi", "tennis-ball", "terminal", "test-tube", "text", "time-five", "time", "timer", "tired", "toggle-left", "toggle-right", "tone", "traffic-cone", "train", "transfer-alt", "transfer", "trash-alt", "trash", "trending-down", "trending-up", "trim", "trip", "trophy", "tv", "underline", "undo", "unite", "universal-access", "unlink", "up-arrow-alt", "up-arrow-circle", "up-arrow", "upload", "upside-down", "upvote", "usb", "user-check", "user-circle", "user-minus", "user-pin", "user-plus", "user-voice", "user-x", "user", "vector", "vertical-bottom", "vertical-center", "vertical-top", "vial", "video-off", "video-plus", "video-recording", "video", "voicemail", "volume-full", "volume-low", "volume-mute", "volume", "walk", "wallet-alt", "wallet", "water", "webcam", "wifi-0", "wifi-1", "wifi-2", "wifi-off", "wifi", "wind", "window-alt", "window-close", "window-open", "window", "windows", "wine", "wink-smile", "wink-tongue", "won", "world", "wrench", "x-circle", "x", "yen", "zoom-in", "zoom-out"]}); // prettier-ignore const solidIn = node.stringIn({ name: "solid", value: "dog", choices: ["add-to-queue", "adjust-alt", "adjust", "alarm-add", "alarm-exclamation", "alarm-off", "alarm-snooze", "alarm", "album", "ambulance", "analyse", "angry", "arch", "archive-in", "archive-out", "archive", "area", "arrow-from-bottom", "arrow-from-left", "arrow-from-right", "arrow-from-top", "arrow-to-bottom", "arrow-to-left", "arrow-to-right", "arrow-to-top", "award", "baby-carriage", "backpack", "badge-check", "badge-dollar", "badge", "baguette", "ball", "balloon", "band-aid", "bank", "bar-chart-alt-2", "bar-chart-square", "barcode", "baseball", "basket", "basketball", "bath", "battery-charging", "battery-full", "battery-low", "battery", "bed", "been-here", "beer", "bell-minus", "bell-off", "bell-plus", "bell-ring", "bell", "bible", "binoculars", "blanket", "bolt-circle", "bolt", "bomb", "bone", "bong", "book-add", "book-alt", "book-bookmark", "book-content", "book-heart", "book-open", "book-reader", "book", "bookmark-alt-minus", "bookmark-alt-plus", "bookmark-alt", "bookmark-heart", "bookmark-minus", "bookmark-plus", "bookmark-star", "bookmark", "bookmarks", "bot", "bowl-hot", "bowl-rice", "bowling-ball", "box", "brain", "briefcase-alt-2", "briefcase-alt", "briefcase", "brightness-half", "brightness", "brush-alt", "brush", "bug-alt", "bug", "building-house", "building", "buildings", "bulb", "bullseye", "buoy", "bus-school", "bus", "business", "cabinet", "cable-car", "cake", "calculator", "calendar-alt", "calendar-check", "calendar-edit", "calendar-event", "calendar-exclamation", "calendar-heart", "calendar-minus", "calendar-plus", "calendar-star", "calendar-week", "calendar-x", "calendar", "camera-home", "camera-movie", "camera-off", "camera-plus", "camera", "capsule", "captions", "car-battery", "car-crash", "car-garage", "car-mechanic", "car-wash", "car", "card", "caret-down-circle", "caret-down-square", "caret-left-circle", "caret-left-square", "caret-right-circle", "caret-right-square", "caret-up-circle", "caret-up-square", "carousel", "cart-add", "cart-alt", "cart-download", "cart", "castle", "cat", "category-alt", "category", "cctv", "certification", "chalkboard", "chart", "chat", "check-circle", "check-shield", "check-square", "checkbox-checked", "checkbox-minus", "checkbox", "cheese", "chess", "chevron-down-circle", "chevron-down-square", "chevron-down", "chevron-left-circle", "chevron-left-square", "chevron-left", "chevron-right-circle", "chevron-right-square", "chevron-right", "chevron-up-circle", "chevron-up-square", "chevron-up", "chevrons-down", "chevrons-left", "chevrons-right", "chevrons-up", "chip", "church", "circle-half", "circle-quarter", "circle-three-quarter", "circle", "city", "clinic", "cloud-download", "cloud-lightning", "cloud-rain", "cloud-upload", "cloud", "coffee-alt", "coffee-bean", "coffee-togo", "coffee", "cog", "coin-stack", "coin", "collection", "color-fill", "color", "comment-add", "comment-check", "comment-detail", "comment-dots", "comment-edit", "comment-error", "comment-minus", "comment-x", "comment", "compass", "component", "confused", "contact", "conversation", "cookie", "cool", "copy-alt", "copy", "copyright", "coupon", "credit-card-alt", "credit-card-front", "credit-card", "cricket-ball", "crop", "crown", "cube-alt", "cube", "cuboid", "customize", "cylinder", "dashboard", "data", "detail", "devices", "diamond", "dice-1", "dice-2", "dice-3", "dice-4", "dice-5", "dice-6", "direction-left", "direction-right", "directions", "disc", "discount", "dish", "dislike", "dizzy", "dock-bottom", "dock-left", "dock-right", "dock-top", "dog", "dollar-circle", "donate-blood", "donate-heart", "door-open", "doughnut-chart", "down-arrow-alt", "down-arrow-circle", "down-arrow-square", "down-arrow", "download", "downvote", "drink", "droplet-half", "droplet", "dryer", "duplicate", "edit-alt", "edit-location", "edit", "eject", "envelope-open", "envelope", "eraser", "error-alt", "error-circle", "error", "ev-station", "exit", "extension", "eyedropper", "face-mask", "face", "factory", "fast-forward-circle", "file-archive", "file-blank", "file-css", "file-doc", "file-export", "file-find", "file-gif", "file-html", "file-image", "file-import", "file-jpg", "file-js", "file-json", "file-md", "file-pdf", "file-plus", "file-png", "file-txt", "file", "film", "filter-alt", "first-aid", "flag-alt", "flag-checkered", "flag", "flame", "flask", "florist", "folder-minus", "folder-open", "folder-plus", "folder", "food-menu", "fridge", "game", "gas-pump", "ghost", "gift", "graduation", "grid-alt", "grid", "group", "guitar-amp", "hand-down", "hand-left", "hand-right", "hand-up", "hand", "happy-alt", "happy-beaming", "happy-heart-eyes", "happy", "hard-hat", "hdd", "heart-circle", "heart-square", "heart", "help-circle", "hide", "home-alt-2", "home-circle", "home-heart", "home-smile", "home", "hot", "hotel", "hourglass-bottom", "hourglass-top", "hourglass", "id-card", "image-add", "image-alt", "image", "inbox", "info-circle", "info-square", "injection", "institution", "invader", "joystick-alt", "joystick-button", "joystick", "key", "keyboard", "label", "landmark", "landscape", "laugh", "layer-minus", "layer-plus", "layer", "layout", "leaf", "left-arrow-alt", "left-arrow-circle", "left-arrow-square", "left-arrow", "left-down-arrow-circle", "left-top-arrow-circle", "lemon", "like", "location-plus", "lock-alt", "lock-open-alt", "lock-open", "lock", "log-in-circle", "log-in", "log-out-circle", "log-out", "low-vision", "magic-wand", "magnet", "map-alt", "map-pin", "map", "mask", "medal", "megaphone", "meh-alt", "meh-blank", "meh", "memory-card", "message-add", "message-alt-add", "message-alt-check", "message-alt-detail", "message-alt-dots", "message-alt-edit", "message-alt-error", "message-alt-minus", "message-alt-x", "message-alt", "message-check", "message-detail", "message-dots", "message-edit", "message-error", "message-minus", "message-rounded-add", "message-rounded-check", "message-rounded-detail", "message-rounded-dots", "message-rounded-edit", "message-rounded-error", "message-rounded-minus", "message-rounded-x", "message-rounded", "message-square-add", "message-square-check", "message-square-detail", "message-square-dots", "message-square-edit", "message-square-error", "message-square-minus", "message-square-x", "message-square", "message-x", "message", "meteor", "microchip", "microphone-alt", "microphone-off", "microphone", "minus-circle", "minus-square", "mobile-vibration", "mobile", "moon", "mouse-alt", "mouse", "movie-play", "movie", "music", "navigation", "network-chart", "news", "no-entry", "note", "notepad", "notification-off", "notification", "objects-horizontal-center", "objects-horizontal-left", "objects-horizontal-right", "objects-vertical-bottom", "objects-vertical-center", "objects-vertical-top", "offer", "package", "paint-roll", "paint", "palette", "paper-plane", "parking", "party", "paste", "pear", "pen", "pencil", "phone-call", "phone-incoming", "phone-off", "phone-outgoing", "phone", "photo-album", "piano", "pie-chart-alt-2", "pie-chart-alt", "pie-chart", "pin", "pizza", "plane-alt", "plane-land", "plane-take-off", "plane", "planet", "playlist", "plug", "plus-circle", "plus-square", "pointer", "polygon", "popsicle", "printer", "purchase-tag-alt", "purchase-tag", "pyramid", "quote-alt-left", "quote-alt-right", "quote-left", "quote-right", "quote-single-left", "quote-single-right", "radiation", "radio", "receipt", "rectangle", "registered", "rename", "report", "rewind-circle", "right-arrow-alt", "right-arrow-circle", "right-arrow-square", "right-arrow", "right-down-arrow-circle", "right-top-arrow-circle", "rocket", "ruler", "sad", "save", "school", "search-alt-2", "search", "select-multiple", "send", "server", "shapes", "share-alt", "share", "shield-alt-2", "shield-minus", "shield-plus", "shield-x", "shield", "ship", "shocked", "shopping-bag-alt", "shopping-bag", "shopping-bags", "show", "shower", "skip-next-circle", "skip-previous-circle", "skull", "sleepy", "slideshow", "smile", "sort-alt", "spa", "speaker", "spray-can", "spreadsheet", "square-rounded", "square", "star-half", "star", "sticker", "stopwatch", "store-alt", "store", "sun", "sushi", "t-shirt", "tachometer", "tag-alt", "tag-x", "tag", "taxi", "tennis-ball", "terminal", "thermometer", "time-five", "time", "timer", "tired", "to-top", "toggle-left", "toggle-right", "tone", "torch", "traffic-barrier", "traffic-cone", "traffic", "train", "trash-alt", "trash", "tree-alt", "tree", "trophy", "truck", "tv", "universal-access", "up-arrow-alt", "up-arrow-circle", "up-arrow-square", "up-arrow", "upside-down", "upvote", "user-account", "user-badge", "user-check", "user-circle", "user-detail", "user-minus", "user-pin", "user-plus", "user-rectangle", "user-voice", "user-x", "user", "vector", "vial", "video-off", "video-plus", "video-recording", "video", "videos", "virus-block", "virus", "volume-full", "volume-low", "volume-mute", "volume", "wallet-alt", "wallet", "washer", "watch-alt", "watch", "webcam", "widget", "window-alt", "wine", "wink-smile", "wink-tongue", "wrench", "x-circle", "x-square", "yin-yang", "zap", "zoom-in", "zoom-out"]}); // prettier-ignore const logoIn = node.stringIn({ name: "logo", value: "wikipedia", choices: ["500px", "99designs", "adobe", "airbnb", "algolia", "amazon", "android", "angular", "apple", "audible", "aws", "baidu", "behance", "bing", "bitcoin", "blender", "blogger", "bootstrap", "c-plus-plus", "chrome", "codepen", "creative-commons", "css3", "dailymotion", "deezer", "dev-to", "deviantart", "digg", "digitalocean", "discord-alt", "discord", "discourse", "django", "docker", "dribbble", "dropbox", "drupal", "ebay", "edge", "etsy", "facebook-circle", "facebook-square", "facebook", "figma", "firebase", "firefox", "flask", "flickr-square", "flickr", "flutter", "foursquare", "git", "github", "gitlab", "gmail", "go-lang", "google-cloud", "google-plus-circle", "google-plus", "google", "graphql", "heroku", "html5", "imdb", "instagram-alt", "instagram", "internet-explorer", "invision", "java", "javascript", "joomla", "jquery", "jsfiddle", "kickstarter", "kubernetes", "less", "linkedin-square", "linkedin", "magento", "mailchimp", "markdown", "mastercard", "mastodon", "medium-old", "medium-square", "medium", "messenger", "meta", "microsoft-teams", "microsoft", "mongodb", "netlify", "nodejs", "ok-ru", "opera", "patreon", "paypal", "periscope", "php", "pinterest-alt", "pinterest", "play-store", "pocket", "postgresql", "product-hunt", "python", "quora", "react", "redbubble", "reddit", "redux", "sass", "shopify", "sketch", "skype", "slack-old", "slack", "snapchat", "soundcloud", "spotify", "spring-boot", "squarespace", "stack-overflow", "steam", "stripe", "tailwind-css", "telegram", "tiktok", "trello", "trip-advisor", "tumblr", "tux", "twitch", "twitter", "typescript", "unity", "unsplash", "upwork", "venmo", "vimeo", "visa", "visual-studio", "vk", "vuejs", "whatsapp-square", "whatsapp", "wikipedia", "windows", "wix", "wordpress", "xing", "yahoo", "yelp", "youtube", "zoom"] }); const sizeIn = node.numberIn({ name: "size", value: 24, min: 1 }); const fillIn = node.colorIn({ name: "fill", value: "white" }); const strokeIn = node.colorIn({ name: "stroke", value: "transparent" }); const strokeWidthIn = node.numberIn({ name: "strokeWidth", value: 1, min: 0 }); const shapeOut = node.shapeOut({ name: "out" }); node.onRender = async () => { const style = styleIn.value; const cdnRoot = "https://esm.sh/boxicons@2.1.4/svg"; let name, url; if (style === "regular") { name = regularIn.value; url = `${cdnRoot}/regular/bx-${name}.svg`; } else if (style === "solid") { name = solidIn.value; url = `${cdnRoot}/solid/bxs-${name}.svg`; } else if (style === "logo") { name = logoIn.value; url = `${cdnRoot}/logos/bxl-${name}.svg`; } const text = await loadIcon(url); const shape = parseSVG(text); if (sizeIn.value !== 24) { const s = sizeIn.value / 24; shape.transform.scale(s, s); shape.bakeTransform(); } setStyleRecursive(shape, fillIn.value, strokeIn.value, strokeWidthIn.value); shapeOut.set(shape); }; async function loadIcon(url) { const cached = iconCache.get(url); if (cached) return cached; const res = await fetch(url); const text = await res.text(); iconCache.set(url, text); return text; } function setStyleRecursive(shape, fill, stroke, strokeWidth) { shape.fill = fill; shape.stroke = stroke; shape.strokeWidth = strokeWidth; if (shape.children) { for (const child of shape.children) { setStyleRecursive(child, fill, stroke, strokeWidth); } } } }