From eb143f9af311251ac6bffd10be524c7a7efef75e Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Thu, 8 Apr 2021 11:17:37 +0100 Subject: [PATCH] Add spectrum icon support --- packages/builder/package.json | 2 ++ packages/builder/src/main.js | 3 +++ packages/builder/src/spectrum-icons.js | 32 ++++++++++++++++++++++++++ packages/builder/yarn.lock | 10 ++++++++ 4 files changed, 47 insertions(+) create mode 100644 packages/builder/src/spectrum-icons.js diff --git a/packages/builder/package.json b/packages/builder/package.json index c7f0667203..27a55b509c 100644 --- a/packages/builder/package.json +++ b/packages/builder/package.json @@ -64,12 +64,14 @@ } }, "dependencies": { + "@adobe/spectrum-css-workflow-icons": "^1.2.0", "@budibase/bbui": "^1.58.13", "@budibase/client": "^0.8.9", "@budibase/colorpicker": "1.1.2", "@budibase/string-templates": "^0.8.9", "@budibase/svelte-ag-grid": "^1.0.4", "@sentry/browser": "5.19.1", + "@spectrum-css/icon": "^3.0.1", "@spectrum-css/page": "^3.0.1", "@spectrum-css/vars": "^3.0.1", "@svelteschool/svelte-forms": "0.7.0", diff --git a/packages/builder/src/main.js b/packages/builder/src/main.js index dace5d7c10..fb0219566a 100644 --- a/packages/builder/src/main.js +++ b/packages/builder/src/main.js @@ -9,6 +9,9 @@ import "@spectrum-css/vars/dist/spectrum-medium.css" import "@spectrum-css/vars/dist/spectrum-darkest.css" import "@spectrum-css/page/dist/index-vars.css" +import { loadSpectrumIcons } from "./spectrum-icons" +loadSpectrumIcons() + import App from "./App.svelte" export default new App({ diff --git a/packages/builder/src/spectrum-icons.js b/packages/builder/src/spectrum-icons.js new file mode 100644 index 0000000000..bd23e88d4c --- /dev/null +++ b/packages/builder/src/spectrum-icons.js @@ -0,0 +1,32 @@ +import "@spectrum-css/icon/dist/index-vars.css" +import SpectrumUIIcons from "@spectrum-css/icon/dist/spectrum-css-icons.svg?raw" +import SpectrumWorkflowIcons from "@adobe/spectrum-css-workflow-icons/dist/spectrum-icons.svg?raw" + +export const loadSpectrumIcons = () => { + loadIconSet("Spectrum UI Icons", SpectrumUIIcons) + loadIconSet("Spectrum Workflow Icons", SpectrumWorkflowIcons) +} + +const loadIconSet = (name, markup) => { + // Parse the SVG + const parser = new DOMParser() + try { + const doc = parser.parseFromString(markup, "image/svg+xml") + const svg = doc.firstChild + + // Check a real SVG was parsed + if (svg && svg.tagName === "svg") { + // Hide the element + svg.style.display = "none" + + // Insert it into the head + document.head.insertBefore(svg, null) + } else { + throw "Invalid tag type for SVG definition" + } + } catch (err) { + // Swallow error, but icons won't work + console.error(err) + console.error(`Failed to parse ${name}. Icons won't work.`) + } +} diff --git a/packages/builder/yarn.lock b/packages/builder/yarn.lock index 59ead660ae..7b0886dc89 100644 --- a/packages/builder/yarn.lock +++ b/packages/builder/yarn.lock @@ -2,6 +2,11 @@ # yarn lockfile v1 +"@adobe/spectrum-css-workflow-icons@^1.2.0": + version "1.2.0" + resolved "https://registry.yarnpkg.com/@adobe/spectrum-css-workflow-icons/-/spectrum-css-workflow-icons-1.2.0.tgz#cda8bbe873ba9317160458858ae979e5393e5550" + integrity sha512-STSQQHvoBM0kf1JrNL3KEt88RklIctaGyGOzwUTnhtTkT1jHLaF4FgxrPDCvr1AT8VOq1nGplKUCeyZ9vdUUmA== + "@babel/code-frame@7.12.11": version "7.12.11" resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.12.11.tgz#f4ad435aa263db935b8f10f2c552d23fb716a63f" @@ -1388,6 +1393,11 @@ dependencies: "@sinonjs/commons" "^1.7.0" +"@spectrum-css/icon@^3.0.1": + version "3.0.1" + resolved "https://registry.yarnpkg.com/@spectrum-css/icon/-/icon-3.0.1.tgz#e300a6fc353c85c6b5d6e7a364408a940c31b177" + integrity sha512-cGFtIrcQ/7tthdkHK1npuEFiCdYVHLqwmLxghUYQw8Tb8KgJaw3OBO1tpjgsUizexNgu26BjVRIbGxNWuBXIHQ== + "@spectrum-css/page@^3.0.1": version "3.0.1" resolved "https://registry.yarnpkg.com/@spectrum-css/page/-/page-3.0.1.tgz#5e1c3dd5b1a1ee591f9d636b75f03665f542d846"