Add spectrum icon support

This commit is contained in:
Andrew Kingston 2021-04-08 11:17:37 +01:00
parent 43f2f83640
commit 886f895f58
4 changed files with 47 additions and 0 deletions

View File

@ -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",

View File

@ -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({

View File

@ -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.`)
}
}

View File

@ -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"