Show labels instead of icons for PNG, SVG (#606)

src/components/ExportDialog.tsx

@@ -4,7 +4,7 @@ import React, { useState, useEffect, useRef } from "react";
 
 import { Modal } from "./Modal";
 import { ToolButton } from "./ToolButton";
-import { clipboard, exportFile, downloadFile, svgFile, link } from "./icons";
+import { clipboard, exportFile, link } from "./icons";
 import { Island } from "./Island";
 import { ExcalidrawElement } from "../element/types";
 import { AppState } from "../types";
@@ -133,7 +133,7 @@ function ExportModal({
             <Stack.Row gap={2}>
               <ToolButton
                 type="button"
-                icon={downloadFile}
+                label="PNG"
                 title={t("buttons.exportToPng")}
                 aria-label={t("buttons.exportToPng")}
                 onClick={() => onExportToPng(exportedElements, scale)}
@@ -141,7 +141,7 @@ function ExportModal({
               />
               <ToolButton
                 type="button"
-                icon={svgFile}
+                label="SVG"
                 title={t("buttons.exportToSvg")}
                 aria-label={t("buttons.exportToSvg")}
                 onClick={() => onExportToSvg(exportedElements, scale)}

src/components/ToolButton.tsx

@@ -5,9 +5,10 @@ import React from "react";
 type ToolIconSize = "s" | "m";
 
 type ToolButtonBaseProps = {
-  icon: React.ReactNode;
+  icon?: React.ReactNode;
   "aria-label": string;
   "aria-keyshortcuts"?: string;
+  label?: string;
   title?: string;
   name?: string;
   id?: string;
@@ -44,7 +45,7 @@ export const ToolButton = React.forwardRef(function(
         ref={innerRef}
       >
         <div className="ToolIcon__icon" aria-hidden="true">
-          {props.icon}
+          {props.icon || props.label}
         </div>
       </button>
     );

src/components/ToolIcon.scss

@@ -1,6 +1,7 @@
 .ToolIcon {
   display: inline-block;
   position: relative;
+  font-family: Cascadia;
   cursor: pointer;
 }
 

src/components/icons.tsx

@@ -76,21 +76,3 @@ export const exportFile = (
     />
   </svg>
 );
-
-export const downloadFile = (
-  <svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 384 512">
-    <path
-      fill="currentColor"
-      d="M224 136V0H24C10.7 0 0 10.7 0 24v464c0 13.3 10.7 24 24 24h336c13.3 0 24-10.7 24-24V160H248c-13.2 0-24-10.8-24-24zm76.45 211.36l-96.42 95.7c-6.65 6.61-17.39 6.61-24.04 0l-96.42-95.7C73.42 337.29 80.54 320 94.82 320H160v-80c0-8.84 7.16-16 16-16h32c8.84 0 16 7.16 16 16v80h65.18c14.28 0 21.4 17.29 11.27 27.36zM377 105L279.1 7c-4.5-4.5-10.6-7-17-7H256v128h128v-6.1c0-6.3-2.5-12.4-7-16.9z"
-    />
-  </svg>
-);
-
-export const svgFile = (
-  <svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 50 50">
-    <path
-      fill="currentColor"
-      d="M 19 8 L 19 20 L 31 20 L 31 8 Z M 3 11 C 1.34375 11 0 12.34375 0 14 C 0 15.65625 1.34375 17 3 17 C 4.300781 17 5.398438 16.160156 5.8125 15 L 17 15 C 12.121094 17.609375 8.785156 22.492188 8.125 28 L 10.15625 28 C 10.804688 23.21875 13.734375 18.980469 18 16.71875 L 18 13 L 5.8125 13 C 5.398438 11.839844 4.300781 11 3 11 Z M 47 11 C 45.699219 11 44.601563 11.839844 44.1875 13 L 32 13 L 32 16.71875 C 36.269531 18.976563 39.195313 23.203125 39.84375 28 L 41.875 28 C 41.21875 22.476563 37.882813 17.609375 33 15 L 44.1875 15 C 44.601563 16.160156 45.699219 17 47 17 C 48.65625 17 50 15.65625 50 14 C 50 12.34375 48.65625 11 47 11 Z M 3 29 L 3 41 L 15 41 L 15 29 Z M 35 29 L 35 41 L 47 41 L 47 29 Z"
-    ></path>
-  </svg>
-);