2d:null 2e:["$","title",null,{"children":"SVG Spritesheets | bitcraft lab | Observable"}] 33:[] 31:{"id":"862a649c7c5a379e","slug":"svg-spritesheets","title":"SVG Spritesheets","thumbnail":"909c183cdb0f58edcb9d7797c311fd6dbc12ff5c55dbc87349b69241bcb96ccd","access_level":"public","create_time":"$D2019-07-26T15:31:31.370Z","update_time":"$D2019-07-26T21:41:31.034Z","view_time":null,"first_public_time":"$D2019-07-26T21:41:38.124Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"0cb69ecc40ac5ee3","login":"bitcraftlab","name":"bitcraft lab","avatar_url":"https://avatars-next.observableusercontent.com/920b55c55412823e1d3a3c4de2fc64a2dcd69d9bf815d431699e4d243c24d9aa","tier":"starter_2024"},"version":750,"publish_version":750,"role":null,"authored":false,"authors":[{"type":"individual","id":"d2b759f455e26bb3","login":"bitcraftlab","name":"bitcraft lab","avatar_url":"https://avatars-next.observableusercontent.com/920b55c55412823e1d3a3c4de2fc64a2dcd69d9bf815d431699e4d243c24d9aa","tier":null}],"members":[{"type":"individual","id":"d2b759f455e26bb3","login":"bitcraftlab","name":"bitcraft lab","avatar_url":"https://avatars-next.observableusercontent.com/920b55c55412823e1d3a3c4de2fc64a2dcd69d9bf815d431699e4d243c24d9aa","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"title":"SVG Spritesheets","cells":[{"id":0,"value":"md`# SVG Spritesheets`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"md`\nJust a little demo on how to use external SVGs. \n(in this case a spritesheet with symbol definitions). \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"md`### Load the spritesheet`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":559,"value":"viewof choice = {\n \n // Create a dictionary of spritesheet choices\n let choices = {\n \"Font Awesome : solid\" : \"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/sprites/solid.svg\",\n \"Font Awesome : regular\" : \"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/sprites/regular.svg\", \n \"Ionicons\" : \"https://raw.githubusercontent.com/rastasheep/ionicons-sprite/master/sprite.svg\",\n };\n \n // Generate entries for Material Design sprite sheets\n const material = \"action alert av communication content device editor file hardware image maps navigation notification places social toggle\"\n .split(\" \")\n .forEach( sheet => choices[ `Material Design: ${sheet}` ] = `https://rawcdn.githack.com/google/material-design-icons/master/sprites/svg-sprite/svg-sprite-${sheet}-symbol.svg` );\n\n return makeChoice(\"Pick a Spritesheet\", choices);\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":433,"value":"spritesheet = loadSVG(choice);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":511,"value":"symbolTable(spritesheet)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":447,"value":"toggleHTML(spritesheet, 'Spritesheet')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":743,"value":"md`### How to use the symbols`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":305,"value":"html`\n\n

\n \n \n \n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":450,"value":"md`## Implementation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"async function loadSVG(url, classid=\"loadSVG\") { \n const text = await (await fetch(url)).text();\n const element = ``;\n // make sure to remove previous SVGs\n document.querySelectorAll(`.${classid}`).forEach( s => s.remove() );\n // add new SVG (will be done automagically by observable)\n // document.body.append(svg`${element}`)\n return svg`${element}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":327,"value":"function toggleHTML(element, label = 'Element') {\n let loaded = true;\n const e = html``;\n function toggle() {\n if(loaded) {\n e.innerHTML = `Deactivate ${label}`;\n document.body.append(element);\n } else {\n e.innerHTML = `Activate ${label}`;\n element.remove();\n }\n loaded = !loaded;\n }\n toggle();\n e.onclick = toggle;\n return e\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":507,"value":"function symbolTable(svg) {\n const entries = Array.from(svg.querySelectorAll('symbol')).map(e => ``);\n return html`\n \n ${entries.join('')}\n`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":736,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":561,"value":"import { makeChoice } from \"@bitcraftlab/make-input\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 32:"$31:body"