docusaurus-live-brython 3.0.0-beta.8 → 3.0.1

package/src/theme/CodeEditor/Editor/utils/saveSvg.ts

@@ -1,78 +1,88 @@
-import { removeAnimations } from "docusaurus-live-brython/theme/CodeEditor/Editor/utils/svgWithoutAnimations";
+import { removeAnimations } from '@theme/CodeEditor/Editor/utils/svgWithoutAnimations';
 
 const duration = (anim: SVGAnimateElement) => {
-  const dur = anim.getAttribute('dur') || '';
-  if (/ms$/.test(dur)) {
-    return Number.parseFloat(dur) / 1000 || 0;
-  } else if (/s$/.test(dur)) {
-    return Number.parseFloat(dur) || 0;
-  }
-  return 0;
-}
+    const dur = anim.getAttribute('dur') || '';
+    if (/ms$/.test(dur)) {
+        return Number.parseFloat(dur) / 1000 || 0;
+    } else if (/s$/.test(dur)) {
+        return Number.parseFloat(dur) || 0;
+    }
+    return 0;
+};
 
 const saveSvg = (svgEl: SVGSVGElement, name: string, code?: string, animated?: boolean) => {
-    svgEl.setAttribute("xmlns", "http://www.w3.org/2000/svg");
-    
+    svgEl.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+
     const bbox = svgEl.getBBox();
     const svgProps = {
-      viewBox: `${bbox.x - 5},${bbox.y - 5},${bbox.width + 10},${bbox.height + 10}`,
-      width: bbox.width + 10,
-      height: bbox.height + 10
-    }
+        viewBox: `${bbox.x - 5},${bbox.y - 5},${bbox.width + 10},${bbox.height + 10}`,
+        width: bbox.width + 10,
+        height: bbox.height + 10
+    };
     var svgData = svgEl.outerHTML;
     var preface = '<?xml version="1.0" standalone="no"?>';
     const wrapper = document.createElement('div');
     let animDuration = 0;
     // if animations should be rendered, set window.__KEEP_TURTLE_ANIMATIONS__ = true
     if (animated || (window as any).__KEEP_TURTLE_ANIMATIONS__) {
-      const saveSvg = svgEl.cloneNode(true) as SVGSVGElement;
-      const anims = saveSvg.querySelectorAll('animate');
-      const frameIds =Array.from(anims).map((n) => (n.id.match(/\d+/) || [])[0]).filter((nr) => nr).map(nr => Number.parseInt(nr!)).sort((a,b) => a > b ? 1 : -1);
-      if (frameIds.length > 0) {
-        const lastAnim = frameIds[frameIds.length - 1];
-        const firstAnim = saveSvg.getElementById('animation_frame0') as SVGAnimateElement;
-        if (firstAnim) {
-          const looper = document.createElement("rect");
-          looper.innerHTML = `  <rect><animate id="looper_animation" begin="0;animation_frame${lastAnim}.end" dur="1ms" attributeName="visibility" from="hide" to="hide"/></rect>`
-          firstAnim.parentElement!.insertBefore(looper, firstAnim);
-          firstAnim.setAttribute('begin', 'looper_animation.end');
-          firstAnim.setAttribute('width', `${svgProps.width}`);
+        const saveSvg = svgEl.cloneNode(true) as SVGSVGElement;
+        const anims = saveSvg.querySelectorAll('animate');
+        const frameIds = Array.from(anims)
+            .map((n) => (n.id.match(/\d+/) || [])[0])
+            .filter((nr) => nr)
+            .map((nr) => Number.parseInt(nr!))
+            .sort((a, b) => (a > b ? 1 : -1));
+        if (frameIds.length > 0) {
+            const lastAnim = frameIds[frameIds.length - 1];
+            const firstAnim = saveSvg.getElementById('animation_frame0') as SVGAnimateElement;
+            if (firstAnim) {
+                const looper = document.createElement('rect');
+                looper.innerHTML = `  <rect><animate id="looper_animation" begin="0;animation_frame${lastAnim}.end" dur="1ms" attributeName="visibility" from="hide" to="hide"/></rect>`;
+                firstAnim.parentElement!.insertBefore(looper, firstAnim);
+                firstAnim.setAttribute('begin', 'looper_animation.end');
+                firstAnim.setAttribute('width', `${svgProps.width}`);
+            }
         }
-      }
-      saveSvg.querySelectorAll('animate[attributeName="width"]').forEach((anim) => {
-        if (anim.getAttribute('from') === anim.getAttribute('to')) {
-          anim.setAttribute('from', `${svgProps.width}`);
-        }
-        anim.setAttribute('to', `${svgProps.width}`);
-      })
-      saveSvg.setAttribute('viewBox', svgProps.viewBox);
-      saveSvg.setAttribute('height', `${svgProps.height}`);
-      saveSvg.setAttribute('width', `${svgProps.width}`);
-      wrapper.innerHTML = `${preface}\r\n${saveSvg.outerHTML}`;
-      animDuration = Array.from(saveSvg.querySelectorAll('animate')).map(duration).reduce((d, c) => d + c, 0)
-
+        saveSvg.querySelectorAll('animate[attributeName="width"]').forEach((anim) => {
+            if (anim.getAttribute('from') === anim.getAttribute('to')) {
+                anim.setAttribute('from', `${svgProps.width}`);
+            }
+            anim.setAttribute('to', `${svgProps.width}`);
+        });
+        saveSvg.setAttribute('viewBox', svgProps.viewBox);
+        saveSvg.setAttribute('height', `${svgProps.height}`);
+        saveSvg.setAttribute('width', `${svgProps.width}`);
+        wrapper.innerHTML = `${preface}\r\n${saveSvg.outerHTML}`;
+        animDuration = Array.from(saveSvg.querySelectorAll('animate'))
+            .map(duration)
+            .reduce((d, c) => d + c, 0);
     } else {
-      const svgWithoutAnim = removeAnimations(`${preface}${svgData}`, svgProps)
-      wrapper.innerHTML = svgWithoutAnim;
+        const svgWithoutAnim = removeAnimations(`${preface}${svgData}`, svgProps);
+        wrapper.innerHTML = svgWithoutAnim;
     }
     // if no metadata should be added, set window.__DISABLE_TURTLE_METADATA__ = true
     if (!(window as any).__DISABLE_TURTLE_METADATA__) {
-      const svg = wrapper.querySelector('svg')!;
-      const metadata = document.createElement('metadata');
-      const script = document.createElement('raw');
-      script.innerHTML = code || ''
-      metadata.appendChild(script);
-      svg.appendChild(metadata)
+        const svg = wrapper.querySelector('svg')!;
+        const metadata = document.createElement('metadata');
+        const script = document.createElement('raw');
+        script.innerHTML = code || '';
+        metadata.appendChild(script);
+        svg.appendChild(metadata);
     }
 
-    var svgBlob = new Blob([wrapper.innerHTML], { type: "image/svg+xml;charset=utf-8" });
+    var svgBlob = new Blob([wrapper.innerHTML], {
+        type: 'image/svg+xml;charset=utf-8'
+    });
     var svgUrl = URL.createObjectURL(svgBlob);
-    var downloadLink = document.createElement("a");
+    var downloadLink = document.createElement('a');
     downloadLink.href = svgUrl;
-    downloadLink.download = animDuration > 0 ? `${name}__${(Math.round(animDuration*10)/10).toString().replace('.','_')}s.svg` : `${name}.svg`;
+    downloadLink.download =
+        animDuration > 0
+            ? `${name}__${(Math.round(animDuration * 10) / 10).toString().replace('.', '_')}s.svg`
+            : `${name}.svg`;
     document.body.appendChild(downloadLink);
     downloadLink.click();
     document.body.removeChild(downloadLink);
-  }
+};
 
-  export {saveSvg};
+export { saveSvg };

package/src/theme/CodeEditor/Editor/utils/svgWithoutAnimations.ts

@@ -1,218 +1,199 @@
-import { parse, RootNode, Node } from "svg-parser";
+import { parse, RootNode, Node } from 'svg-parser';
 
 const objToAttr = (obj: Object) => {
-  return Object.entries(obj || {})
-    .map((v) => `${v[0]}="${v[1]}"`)
-    .join(" ");
+    return Object.entries(obj || {})
+        .map((v) => `${v[0]}="${v[1]}"`)
+        .join(' ');
 };
 
 const mergeSvgProps = (parsedSvg: Node | RootNode, svgProps: Record<string, string | number> | undefined) => {
-  if (parsedSvg.type === "root") {
-    parsedSvg.children.forEach((child) => {
-      mergeSvgProps(child, svgProps);
-    });
-  } else if (
-    parsedSvg.type === "element" &&
-    parsedSvg.tagName === "svg" &&
-    "properties" in parsedSvg
-  ) {
-    parsedSvg.properties = { ...(parsedSvg.properties || {}), ...svgProps };
-  }
+    if (parsedSvg.type === 'root') {
+        parsedSvg.children.forEach((child) => {
+            mergeSvgProps(child, svgProps);
+        });
+    } else if (parsedSvg.type === 'element' && parsedSvg.tagName === 'svg' && 'properties' in parsedSvg) {
+        parsedSvg.properties = { ...(parsedSvg.properties || {}), ...svgProps };
+    }
 };
 
 const svgWithoutAnimations = (element: Node | RootNode | string): string[] => {
-  if (typeof element === "string") {
-    return [element];
-  }
-  const newSvg: string[] = [];
-  // const { properties, tagName, type, children } = element;
-  if (element.type === "root") {
-    element.children.forEach((child) => {
-      newSvg.push(...svgWithoutAnimations(child));
-    });
-  }
-  if (element.type === 'element') {
-    const { tagName, type, children } = element;
-    const properties = element.properties || {};
-    switch (element.tagName) {
-      case "svg":
-        if (element.metadata) {
-          newSvg.push(element.metadata);
-        }
-        newSvg.push(`<svg ${objToAttr(properties)}>`);
-        children.forEach((child) => {
-          newSvg.push(...svgWithoutAnimations(child));
-        });
-        newSvg.push(`</svg>`);
-        break;
-      case "rect":
-        children.forEach((child) => {
-          if (typeof child === "string" || child.type !== "element") {
-            return;
-          }
-          if (["animate", "set"].includes(child.tagName || '') && !!child.properties) {
-            const animProps = child.properties;
-            if (!("to" in animProps) || !("attributeName" in animProps)) {
-              return;
-            }
-            if (
-              animProps.attributeName === "display" &&
-              animProps.attributeType === "CSS"
-            ) {
-              properties.style = `${properties.style}`.replace(
-                /display:\s*\b\w+\b;/g,
-                `display: ${animProps.to};`
-              );
-            }
-            properties[animProps.attributeName] = animProps.to;
-          }
-        });
-        newSvg.push(`<rect ${objToAttr(properties)}></rect>`);
-        break;
-      case "g":
-        if ((children || []).length === 0) {
-          return newSvg;
-        }
-        newSvg.push(`<g ${objToAttr(properties)}>`);
-        children.forEach((child) => {
-          newSvg.push(...svgWithoutAnimations(child));
-        });
-        newSvg.push("</g>");
-        break;
-      case "line":
-        children.forEach((child) => {
-          if (typeof child === "string" || child.type !== "element") {
-            return;
-          }
-          if (["animate", "set"].includes(child.tagName || '') && !!child.properties) {
-            const animProps = child.properties;
-            if (!("to" in animProps) || !("attributeName" in animProps)) {
-              return;
-            }
-            properties[animProps.attributeName] = animProps.to;
-          }
-        });
-        newSvg.push(`<line ${objToAttr(properties)}></line>`);
-        break;
-      case "circle":
-        children.forEach((child) => {
-          if (typeof child === "string" || child.type !== "element") {
-            return;
-          }
-          if (["animate", "set"].includes(child.tagName || '') && !!child.properties) {
-            const animProps = child.properties;
-            if (!("to" in animProps) || !("attributeName" in animProps)) {
-              return;
-            }
-            if (
-              properties.attributeName === "display" &&
-              properties.attributeType === "CSS"
-            ) {
-              properties.style = `${properties.style}`.replace(
-                /display:\s*\b\w+\b;/g,
-                `display: ${animProps.to}`
-              );
-            }
-          }
-        });
-        if (properties.style && /\s*display:\s*none;\s*/.test(`${properties.style}`)) {
-          properties.style = `${properties.style}`.replace(
-            /\s*display:\s*none;\s*/g,
-            ""
-          );
-        }
-        newSvg.push(`<circle ${objToAttr(properties)}></circle>`);
-        break;
-      case "text":
-        var text: string | number | boolean | undefined;
-        children.forEach((child) => {
-          if (typeof child === 'string') {
-            text = child;
-            return;
-          }
-          switch (child.type) {
-            case "text":
-              text = child.value;
-              break;
-            case "element":
-              const textProps = child.properties;
-              if (!textProps || !["animate", "set"].includes(child.tagName || '')) {
-                return;
-              }
-              if (!("to" in textProps) || !("attributeName" in textProps)) {
-                return;
-              }
-              if (
-                textProps.attributeName === "display" &&
-                textProps.attributeType === "CSS"
-              ) {
-                properties.style = `${properties.style}`.replace(
-                  /display:\s*\b\w+\b;/g,
-                  `display: ${textProps.to};`
-                );
-              }
-  
-              properties[textProps.attributeName] = textProps.to;
-              break;
-          }
+    if (typeof element === 'string') {
+        return [element];
+    }
+    const newSvg: string[] = [];
+    // const { properties, tagName, type, children } = element;
+    if (element.type === 'root') {
+        element.children.forEach((child) => {
+            newSvg.push(...svgWithoutAnimations(child));
         });
-        newSvg.push(`<text ${objToAttr(properties)}>${text}</text>`);
-        break;
-      case "polygon":
-        var endRot = "0,0,0";
-        var endPos = "0,0";
-        children.forEach((child) => {
-          if (typeof child === "string" || child.type !== "element" || !child.properties) {
-            return;
-          }
-          const polyProps = child.properties;
-          switch (child.tagName) {
-            case "set":
-            case "animate":
-              if (!("to" in polyProps) || !("attributeName" in polyProps)) {
-                return;
-              }
-              if (
-                polyProps.attributeName === "display" &&
-                polyProps.attributeType === "CSS"
-              ) {
-                properties.style = `${properties.style}`.replace(
-                  /display:\s*\b\w+\b;/g,
-                  `display: ${polyProps.to};`
+    }
+    if (element.type === 'element') {
+        const { tagName, type, children } = element;
+        const properties = element.properties || {};
+        switch (element.tagName) {
+            case 'svg':
+                if (element.metadata) {
+                    newSvg.push(element.metadata);
+                }
+                newSvg.push(`<svg ${objToAttr(properties)}>`);
+                children.forEach((child) => {
+                    newSvg.push(...svgWithoutAnimations(child));
+                });
+                newSvg.push(`</svg>`);
+                break;
+            case 'rect':
+                children.forEach((child) => {
+                    if (typeof child === 'string' || child.type !== 'element') {
+                        return;
+                    }
+                    if (['animate', 'set'].includes(child.tagName || '') && !!child.properties) {
+                        const animProps = child.properties;
+                        if (!('to' in animProps) || !('attributeName' in animProps)) {
+                            return;
+                        }
+                        if (animProps.attributeName === 'display' && animProps.attributeType === 'CSS') {
+                            properties.style = `${properties.style}`.replace(
+                                /display:\s*\b\w+\b;/g,
+                                `display: ${animProps.to};`
+                            );
+                        }
+                        properties[animProps.attributeName] = animProps.to;
+                    }
+                });
+                newSvg.push(`<rect ${objToAttr(properties)}></rect>`);
+                break;
+            case 'g':
+                if ((children || []).length === 0) {
+                    return newSvg;
+                }
+                newSvg.push(`<g ${objToAttr(properties)}>`);
+                children.forEach((child) => {
+                    newSvg.push(...svgWithoutAnimations(child));
+                });
+                newSvg.push('</g>');
+                break;
+            case 'line':
+                children.forEach((child) => {
+                    if (typeof child === 'string' || child.type !== 'element') {
+                        return;
+                    }
+                    if (['animate', 'set'].includes(child.tagName || '') && !!child.properties) {
+                        const animProps = child.properties;
+                        if (!('to' in animProps) || !('attributeName' in animProps)) {
+                            return;
+                        }
+                        properties[animProps.attributeName] = animProps.to;
+                    }
+                });
+                newSvg.push(`<line ${objToAttr(properties)}></line>`);
+                break;
+            case 'circle':
+                children.forEach((child) => {
+                    if (typeof child === 'string' || child.type !== 'element') {
+                        return;
+                    }
+                    if (['animate', 'set'].includes(child.tagName || '') && !!child.properties) {
+                        const animProps = child.properties;
+                        if (!('to' in animProps) || !('attributeName' in animProps)) {
+                            return;
+                        }
+                        if (properties.attributeName === 'display' && properties.attributeType === 'CSS') {
+                            properties.style = `${properties.style}`.replace(
+                                /display:\s*\b\w+\b;/g,
+                                `display: ${animProps.to}`
+                            );
+                        }
+                    }
+                });
+                if (properties.style && /\s*display:\s*none;\s*/.test(`${properties.style}`)) {
+                    properties.style = `${properties.style}`.replace(/\s*display:\s*none;\s*/g, '');
+                }
+                newSvg.push(`<circle ${objToAttr(properties)}></circle>`);
+                break;
+            case 'text':
+                var text: string | number | boolean | undefined;
+                children.forEach((child) => {
+                    if (typeof child === 'string') {
+                        text = child;
+                        return;
+                    }
+                    switch (child.type) {
+                        case 'text':
+                            text = child.value;
+                            break;
+                        case 'element':
+                            const textProps = child.properties;
+                            if (!textProps || !['animate', 'set'].includes(child.tagName || '')) {
+                                return;
+                            }
+                            if (!('to' in textProps) || !('attributeName' in textProps)) {
+                                return;
+                            }
+                            if (textProps.attributeName === 'display' && textProps.attributeType === 'CSS') {
+                                properties.style = `${properties.style}`.replace(
+                                    /display:\s*\b\w+\b;/g,
+                                    `display: ${textProps.to};`
+                                );
+                            }
+
+                            properties[textProps.attributeName] = textProps.to;
+                            break;
+                    }
+                });
+                newSvg.push(`<text ${objToAttr(properties)}>${text}</text>`);
+                break;
+            case 'polygon':
+                var endRot = '0,0,0';
+                var endPos = '0,0';
+                children.forEach((child) => {
+                    if (typeof child === 'string' || child.type !== 'element' || !child.properties) {
+                        return;
+                    }
+                    const polyProps = child.properties;
+                    switch (child.tagName) {
+                        case 'set':
+                        case 'animate':
+                            if (!('to' in polyProps) || !('attributeName' in polyProps)) {
+                                return;
+                            }
+                            if (polyProps.attributeName === 'display' && polyProps.attributeType === 'CSS') {
+                                properties.style = `${properties.style}`.replace(
+                                    /display:\s*\b\w+\b;/g,
+                                    `display: ${polyProps.to};`
+                                );
+                            }
+
+                            properties[polyProps.attributeName] = polyProps.to;
+                            break;
+                        case 'animateTransform':
+                            if (child.properties.type === 'rotate') {
+                                endRot = `${child.properties.to}`;
+                            }
+                            break;
+                        case 'animateMotion':
+                            if ('to' in child.properties) {
+                                endPos = `${child.properties.to}`;
+                            }
+                            break;
+                    }
+                });
+                newSvg.push(
+                    `<polygon ${objToAttr(
+                        properties
+                    )} transform="translate(${endPos}) rotate(${endRot})"></polygon>`
                 );
-              }
-  
-              properties[polyProps.attributeName] = polyProps.to;
-              break;
-            case "animateTransform":
-              if (child.properties.type === "rotate") {
-                endRot = `${child.properties.to}`;
-              }
-              break;
-            case "animateMotion":
-              if ("to" in child.properties) {
-                endPos = `${child.properties.to}`;
-              }
-              break;
-          }
-        });
-        newSvg.push(
-          `<polygon ${objToAttr(
-            properties
-          )} transform="translate(${endPos}) rotate(${endRot})"></polygon>`
-        );
+        }
     }
-  }
-  return newSvg;
+    return newSvg;
 };
 
 const removeAnimations = (svg: string, svgProps: Record<string, string | number>): string => {
-  const parsed = parse(svg);
-  if (svgProps) {
-    mergeSvgProps(parsed, svgProps);
-  }
-  const elements = svgWithoutAnimations(parsed);
-  return elements.join("\n");
+    const parsed = parse(svg);
+    if (svgProps) {
+        mergeSvgProps(parsed, svgProps);
+    }
+    const elements = svgWithoutAnimations(parsed);
+    return elements.join('\n');
 };
 
 export { removeAnimations };

package/src/theme/CodeEditor/Icon/icons.ts

@@ -1,15 +1,27 @@
-
 const Download = 'M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z';
-const Python = 'M19.14,7.5A2.86,2.86 0 0,1 22,10.36V14.14A2.86,2.86 0 0,1 19.14,17H12C12,17.39 12.32,17.96 12.71,17.96H17V19.64A2.86,2.86 0 0,1 14.14,22.5H9.86A2.86,2.86 0 0,1 7,19.64V15.89C7,14.31 8.28,13.04 9.86,13.04H15.11C16.69,13.04 17.96,11.76 17.96,10.18V7.5H19.14M14.86,19.29C14.46,19.29 14.14,19.59 14.14,20.18C14.14,20.77 14.46,20.89 14.86,20.89A0.71,0.71 0 0,0 15.57,20.18C15.57,19.59 15.25,19.29 14.86,19.29M4.86,17.5C3.28,17.5 2,16.22 2,14.64V10.86C2,9.28 3.28,8 4.86,8H12C12,7.61 11.68,7.04 11.29,7.04H7V5.36C7,3.78 8.28,2.5 9.86,2.5H14.14C15.72,2.5 17,3.78 17,5.36V9.11C17,10.69 15.72,11.96 14.14,11.96H8.89C7.31,11.96 6.04,13.24 6.04,14.82V17.5H4.86M9.14,5.71C9.54,5.71 9.86,5.41 9.86,4.82C9.86,4.23 9.54,4.11 9.14,4.11C8.75,4.11 8.43,4.23 8.43,4.82C8.43,5.41 8.75,5.71 9.14,5.71Z';
-const Play = 'M 7.4219 1.8281 c -0.6938 -0.4266 -1.5656 -0.4406 -2.2734 -0.0422 S 4 2.9344 4 3.75 V 20.25 c 0 0.8156 0.4406 1.5656 1.1484 1.9641 s 1.5797 0.3797 2.2734 -0.0422 L 20.9219 13.9219 c 0.6703 -0.4078 1.0781 -1.1344 1.0781 -1.9219 s -0.4078 -1.5094 -1.0781 -1.9219 L 7.4219 1.8281 Z'
-const Close = 'M13.46,12L19,17.54V19H17.54L12,13.46L6.46,19H5V17.54L10.54,12L5,6.46V5H6.46L12,10.54L17.54,5H19V6.46L13.46,12Z';
-const AnimationPlay = 'M4,2H14V4H4V14H2V4C2,2.89 2.89,2 4,2M8,6H18V8H8V18H6V8C6,6.89 6.89,6 8,6M12,10H20C21.11,10 22,10.89 22,12V20C22,21.11 21.11,22 20,22H12C10.89,22 10,21.11 10,20V12C10,10.89 10.89,10 12,10M14,12V20L20,16L14,12Z';
-const Sync = 'M12,18A6,6 0 0,1 6,12C6,11 6.25,10.03 6.7,9.2L5.24,7.74C4.46,8.97 4,10.43 4,12A8,8 0 0,0 12,20V23L16,19L12,15M12,4V1L8,5L12,9V6A6,6 0 0,1 18,12C18,13 17.75,13.97 17.3,14.8L18.76,16.26C19.54,15.03 20,13.57 20,12A8,8 0 0,0 12,4Z';
-const Check = 'M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z';
-const ErrorIcon = 'M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z';
-const EditCode = 'M 9.54 13.65 L 11.63 15.74 L 10.35 17 L 7 13.65 L 10.35 10.3 L 11.63 11.56 L 9.54 13.65 M 17 13.65 L 13.65 17 L 12.38 15.74 L 14.47 13.65 L 12.38 11.56 L 13.65 10.3 l 3.35 3.35 Z M 10 20 H 6 V 4 H 13 V 9 H 18 V 12.1 L 20 10.1 V 8 L 14 2 H 6 A 2 2 0 0 0 4 4 V 20 A 2 2 0 0 0 6 22 H 10 V 20 M 20.2 13 C 20.3 13 20.5 13.1 20.6 13.2 L 21.9 14.5 C 22.1 14.7 22.1 15.1 21.9 15.3 L 20.9 16.3 L 18.8 14.2 L 19.8 13.2 C 19.9 13.1 20 13 20.2 13 M 20.2 16.9 L 14.1 23 H 12 V 20.9 L 18.1 14.8 L 20.2 16.9 Z';
-const Code = 'M14 2H6C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2M18 20H6V4H13V9H18V20M9.54 15.65L11.63 17.74L10.35 19L7 15.65L10.35 12.3L11.63 13.56L9.54 15.65M17 15.65L13.65 19L12.38 17.74L14.47 15.65L12.38 13.56L13.65 12.3L17 15.65Z';
-const Reset = 'M13,3A9,9 0 0,0 4,12H1L4.89,15.89L4.96,16.03L9,12H6A7,7 0 0,1 13,5A7,7 0 0,1 20,12A7,7 0 0,1 13,19C11.07,19 9.32,18.21 8.06,16.94L6.64,18.36C8.27,20 10.5,21 13,21A9,9 0 0,0 22,12A9,9 0 0,0 13,3Z';
+const Python =
+    'M19.14,7.5A2.86,2.86 0 0,1 22,10.36V14.14A2.86,2.86 0 0,1 19.14,17H12C12,17.39 12.32,17.96 12.71,17.96H17V19.64A2.86,2.86 0 0,1 14.14,22.5H9.86A2.86,2.86 0 0,1 7,19.64V15.89C7,14.31 8.28,13.04 9.86,13.04H15.11C16.69,13.04 17.96,11.76 17.96,10.18V7.5H19.14M14.86,19.29C14.46,19.29 14.14,19.59 14.14,20.18C14.14,20.77 14.46,20.89 14.86,20.89A0.71,0.71 0 0,0 15.57,20.18C15.57,19.59 15.25,19.29 14.86,19.29M4.86,17.5C3.28,17.5 2,16.22 2,14.64V10.86C2,9.28 3.28,8 4.86,8H12C12,7.61 11.68,7.04 11.29,7.04H7V5.36C7,3.78 8.28,2.5 9.86,2.5H14.14C15.72,2.5 17,3.78 17,5.36V9.11C17,10.69 15.72,11.96 14.14,11.96H8.89C7.31,11.96 6.04,13.24 6.04,14.82V17.5H4.86M9.14,5.71C9.54,5.71 9.86,5.41 9.86,4.82C9.86,4.23 9.54,4.11 9.14,4.11C8.75,4.11 8.43,4.23 8.43,4.82C8.43,5.41 8.75,5.71 9.14,5.71Z';
+const Play =
+    'M 7.4219 1.8281 c -0.6938 -0.4266 -1.5656 -0.4406 -2.2734 -0.0422 S 4 2.9344 4 3.75 V 20.25 c 0 0.8156 0.4406 1.5656 1.1484 1.9641 s 1.5797 0.3797 2.2734 -0.0422 L 20.9219 13.9219 c 0.6703 -0.4078 1.0781 -1.1344 1.0781 -1.9219 s -0.4078 -1.5094 -1.0781 -1.9219 L 7.4219 1.8281 Z';
+const Close =
+    'M13.46,12L19,17.54V19H17.54L12,13.46L6.46,19H5V17.54L10.54,12L5,6.46V5H6.46L12,10.54L17.54,5H19V6.46L13.46,12Z';
+const AnimationPlay =
+    'M4,2H14V4H4V14H2V4C2,2.89 2.89,2 4,2M8,6H18V8H8V18H6V8C6,6.89 6.89,6 8,6M12,10H20C21.11,10 22,10.89 22,12V20C22,21.11 21.11,22 20,22H12C10.89,22 10,21.11 10,20V12C10,10.89 10.89,10 12,10M14,12V20L20,16L14,12Z';
+const Sync =
+    'M12,18A6,6 0 0,1 6,12C6,11 6.25,10.03 6.7,9.2L5.24,7.74C4.46,8.97 4,10.43 4,12A8,8 0 0,0 12,20V23L16,19L12,15M12,4V1L8,5L12,9V6A6,6 0 0,1 18,12C18,13 17.75,13.97 17.3,14.8L18.76,16.26C19.54,15.03 20,13.57 20,12A8,8 0 0,0 12,4Z';
+const Check =
+    'M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z';
+const ErrorIcon =
+    'M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z';
+const EditCode =
+    'M 9.54 13.65 L 11.63 15.74 L 10.35 17 L 7 13.65 L 10.35 10.3 L 11.63 11.56 L 9.54 13.65 M 17 13.65 L 13.65 17 L 12.38 15.74 L 14.47 13.65 L 12.38 11.56 L 13.65 10.3 l 3.35 3.35 Z M 10 20 H 6 V 4 H 13 V 9 H 18 V 12.1 L 20 10.1 V 8 L 14 2 H 6 A 2 2 0 0 0 4 4 V 20 A 2 2 0 0 0 6 22 H 10 V 20 M 20.2 13 C 20.3 13 20.5 13.1 20.6 13.2 L 21.9 14.5 C 22.1 14.7 22.1 15.1 21.9 15.3 L 20.9 16.3 L 18.8 14.2 L 19.8 13.2 C 19.9 13.1 20 13 20.2 13 M 20.2 16.9 L 14.1 23 H 12 V 20.9 L 18.1 14.8 L 20.2 16.9 Z';
+const Code =
+    'M14 2H6C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2M18 20H6V4H13V9H18V20M9.54 15.65L11.63 17.74L10.35 19L7 15.65L10.35 12.3L11.63 13.56L9.54 15.65M17 15.65L13.65 19L12.38 17.74L14.47 15.65L12.38 13.56L13.65 12.3L17 15.65Z';
+const Reset =
+    'M13,3A9,9 0 0,0 4,12H1L4.89,15.89L4.96,16.03L9,12H6A7,7 0 0,1 13,5A7,7 0 0,1 20,12A7,7 0 0,1 13,19C11.07,19 9.32,18.21 8.06,16.94L6.64,18.36C8.27,20 10.5,21 13,21A9,9 0 0,0 22,12A9,9 0 0,0 13,3Z';
+const TrayPlus =
+    'M2 12H4V17H20V12H22V17A2 2 0 0 1 20 19H4A2 2 0 0 1 2 17M11 5H13V8H16V10H13V13H11V10H8V8H11Z';
+const TrayMinus = 'M16 10H8V8H16M2 17A2 2 0 0 0 4 19H20A2 2 0 0 0 22 17V12H20V17H4V12H2Z';
 
 export {
     Download,
@@ -22,5 +34,7 @@ export {
     ErrorIcon,
     EditCode,
     Code,
-    Reset
-}
+    Reset,
+    TrayPlus,
+    TrayMinus
+};