scope exports of icon paths

packages/perseus-editor/src/article-editor.tsx

@@ -4,7 +4,7 @@
  * multiple (Renderer) sections concatenated together.
  */
 
-import {components, icons, ApiOptions} from "@khanacademy/perseus";
+import {components, ApiOptions, iconTrash} from "@khanacademy/perseus";
 import {Errors, PerseusError} from "@khanacademy/perseus-core";
 import * as React from "react";
 import _ from "underscore";
@@ -14,11 +14,15 @@ import JsonEditor from "./components/json-editor";
 import SectionControlButton from "./components/section-control-button";
 import Editor from "./editor";
 import IframeContentRenderer from "./iframe-content-renderer";
+import {
+    iconCircleArrowDown,
+    iconCircleArrowUp,
+    iconPlus,
+} from "./styles/icon-paths";
 
 import type {APIOptions, Changeable, ImageUploader} from "@khanacademy/perseus";
 
 const {HUD, InlineIcon} = components;
-const {iconCircleArrowDown, iconCircleArrowUp, iconPlus, iconTrash} = icons;
 
 type RendererProps = {
     content?: string;

packages/perseus-editor/src/components/__stories__/section-control-button.stories.tsx

@@ -1,4 +1,4 @@
-import {icons} from "@khanacademy/perseus";
+import {iconTrash} from "@khanacademy/perseus";
 import * as React from "react";
 
 import SectionControlButton from "../section-control-button";
@@ -18,7 +18,7 @@ export const ButtonForEditingSectionsOfContentWithInArticleEditor = (
 ): React.ReactElement => {
     return (
         <SectionControlButton
-            icon={icons.iconTrash}
+            icon={iconTrash}
             onClick={() => {}}
             title="Remove image widget"
         />

packages/perseus-editor/src/components/viewport-resizer.tsx

@@ -2,14 +2,15 @@
  * A component that displays controls for choosing a viewport size.
  * Renders three buttons: "Phone", "Tablet", and "Desktop".
  */
-import {components, constants, icons} from "@khanacademy/perseus";
+import {components, constants} from "@khanacademy/perseus";
 import * as React from "react";
 
+import {iconDesktop, iconMobilePhone, iconTablet} from "../styles/icon-paths";
+
 import type {DeviceType} from "@khanacademy/perseus";
 
 const {ButtonGroup, InlineIcon} = components;
 const {devices} = constants;
-const {iconDesktop, iconMobilePhone, iconTablet} = icons;
 
 type Props = {
     /** The current device type that is selected. */

packages/perseus-editor/src/components/widget-editor.tsx

@@ -1,9 +1,10 @@
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
 import {
     components,
-    icons,
     Widgets,
     WIDGET_PROP_DENYLIST,
+    iconChevronDown,
+    iconTrash,
 } from "@khanacademy/perseus";
 import {useUniqueIdWithMock} from "@khanacademy/wonder-blocks-core";
 import {Strut} from "@khanacademy/wonder-blocks-layout";
@@ -12,13 +13,14 @@ import Switch from "@khanacademy/wonder-blocks-switch";
 import * as React from "react";
 import _ from "underscore";
 
+import {iconChevronRight} from "../styles/icon-paths";
+
 import SectionControlButton from "./section-control-button";
 
 import type Editor from "../editor";
 import type {APIOptions, Alignment, PerseusWidget} from "@khanacademy/perseus";
 
 const {InlineIcon} = components;
-const {iconChevronDown, iconChevronRight, iconTrash} = icons;
 
 type WidgetEditorProps = {
     // Unserialized props

packages/perseus-editor/src/hint-editor.tsx

@@ -4,13 +4,18 @@
  * Collection of classes for rendering the hint editor area,
  * hint editor boxes, and hint previews
  */
-import {components, icons} from "@khanacademy/perseus";
+import {components, iconTrash} from "@khanacademy/perseus";
 import * as React from "react";
 import _ from "underscore";
 
 import DeviceFramer from "./components/device-framer";
 import Editor from "./editor";
 import IframeContentRenderer from "./iframe-content-renderer";
+import {
+    iconCircleArrowDown,
+    iconCircleArrowUp,
+    iconPlus,
+} from "./styles/icon-paths";
 
 import type {
     APIOptions,
@@ -23,7 +28,6 @@ import type {
 } from "@khanacademy/perseus";
 
 const {InfoTip, InlineIcon} = components;
-const {iconCircleArrowDown, iconCircleArrowUp, iconPlus, iconTrash} = icons;
 
 type HintEditorProps = {
     itemId?: string;

packages/perseus-editor/src/multirenderer-editor.tsx

@@ -8,7 +8,8 @@ import {
     ApiOptions,
     buildEmptyItemTreeForShape,
     components,
-    icons,
+    iconChevronDown,
+    iconTrash,
     itemToTree,
     MultiItems,
 } from "@khanacademy/perseus";
@@ -48,7 +49,6 @@ import type {
 } from "@khanacademy/perseus";
 
 const {InlineIcon} = components;
-const {iconChevronDown, iconTrash} = icons;
 const {MultiRenderer} = MultiItems;
 
 // TODO(CP-4849): figure out when $ReadOnlyArray<number> vs $ReadOnlyArray<string> should be used

packages/perseus-editor/src/styles/icon-paths.ts

@@ -0,0 +1,41 @@
+export const iconChevronRight = {
+    path: "M62.808 49.728q0 3.36-2.352 5.88l-41.72 41.664q-2.352 2.408-5.768 2.408t-5.768-2.408l-4.872-4.76q-2.352-2.52-2.352-5.88t2.352-5.712l31.08-31.136-31.08-31.024q-2.352-2.52-2.352-5.88t2.352-5.712l4.872-4.76q2.296-2.408 5.768-2.408t5.768 2.408l41.72 41.664q2.352 2.296 2.352 5.656z",
+    width: 63.034,
+    height: 100,
+} as const;
+export const iconCircleArrowDown = {
+    path: "M50.046 83.676q1.767 0 2.907-1.14l29.526-29.526q1.197-1.197 1.197-2.907t-1.197-2.964l-5.928-5.928q-1.197-1.14-2.964-1.14t-2.907 1.14l-12.312 12.312l0-32.661q0-1.71-1.254-2.964t-2.907-1.254l-8.322 0q-1.71 0-2.964 1.254t-1.254 2.964l0 32.661l-12.312-12.312q-1.197-1.254-2.907-1.254t-2.907 1.254l-5.928 5.928q-1.197 1.197-1.197 2.964t1.197 2.907l29.469 29.526q1.197 1.14 2.964 1.14zm49.989-33.63q.057 13.623-6.669 25.137t-18.24 18.183-25.08 6.669-25.137-6.726q-11.514-6.726-18.183-18.183-6.726-11.571-6.726-25.137t6.726-25.08 18.24-18.24 25.08-6.669q13.566 0 25.08 6.726 11.514 6.669 18.24 18.183t6.669 25.137z",
+    width: 100,
+    height: 100,
+} as const;
+export const iconCircleArrowUp = {
+    path: "M54.207 83.391q1.653 0 2.907-1.254t1.254-2.907l0-32.718l12.312 12.312q1.254 1.254 2.964 1.254t2.907-1.254l5.928-5.928q1.197-1.197 1.14-2.964 0-1.767-1.14-2.907l-29.526-29.526q-1.197-1.14-2.907-1.14t-2.964 1.14l-29.469 29.526q-1.197 1.254-1.197 2.964t1.197 2.907l5.928 5.928q1.197 1.197 2.907 1.197t2.907-1.197l12.312-12.312l0 32.718q0 1.653 1.254 2.907t2.964 1.254l8.322 0zm45.828-33.345q.057 13.623-6.669 25.137t-18.24 18.183-25.08 6.669-25.137-6.726q-11.514-6.726-18.183-18.183-6.726-11.571-6.726-25.137t6.726-25.08 18.24-18.24 25.08-6.669q13.566 0 25.08 6.726 11.514 6.669 18.24 18.183t6.669 25.137z",
+    width: 100,
+    height: 100,
+} as const;
+export const iconDesktop = {
+    path: "M94.208 52.119l0-43.746q0-.69-.506-1.15t-1.196-.506l-84.088 0q-.69 0-1.196.506t-.506 1.15l0 43.746q0 .69.506 1.196t1.196.506l84.088 0q.69 0 1.196-.506t.506-1.196zm6.716-43.746l0 57.224q0 3.45-2.484 5.934t-5.934 2.484l-28.566 0q0 3.128 2.53 7.774.828 1.61.828 2.622t-1.012 2.07q-1.012 1.012-2.346.966l-26.91 0q-1.38 0-2.392-1.012t-1.012-2.024q0-1.058 1.656-4.14t1.748-6.256l-28.612 0q-3.45 0-5.934-2.484t-2.484-5.934l0-57.224q0-3.45 2.484-5.934t5.934-2.438l84.088 0q3.45 0 5.98 2.438 2.438 2.484 2.438 5.934z",
+    width: 100,
+    height: 86.648,
+} as const;
+// Grabbed from https://github.com/encharm/Font-Awesome-SVG-PNG
+export const iconGear = {
+    path: "M1152 896q0-106-75-181t-181-75-181 75-75 181 75 181 181 75 181-75 75-181zm512-109v222q0 12-8 23t-20 13l-185 28q-19 54-39 91 35 50 107 138 10 12 10 25t-9 23q-27 37-99 108t-94 71q-12 0-26-9l-138-108q-44 23-91 38-16 136-29 186-7 28-36 28h-222q-14 0-24.5-8.5t-11.5-21.5l-28-184q-49-16-90-37l-141 107q-10 9-25 9-14 0-25-11-126-114-165-168-7-10-7-23 0-12 8-23 15-21 51-66.5t54-70.5q-27-50-41-99l-183-27q-13-2-21-12.5t-8-23.5v-222q0-12 8-23t19-13l186-28q14-46 39-92-40-57-107-138-10-12-10-24 0-10 9-23 26-36 98.5-107.5t94.5-71.5q13 0 26 10l138 107q44-23 91-38 16-136 29-186 7-28 36-28h222q14 0 24.5 8.5t11.5 21.5l28 184q49 16 90 37l142-107q9-9 24-9 13 0 25 10 129 119 165 170 7 8 7 22 0 12-8 23-15 21-51 66.5t-54 70.5q26 50 41 98l183 28q13 2 21 12.5t8 23.5z",
+    width: 1792,
+    height: 1792,
+} as const;
+export const iconMobilePhone = {
+    path: "M36.04 89.557q0-2.584-1.836-4.42t-4.42-1.836-4.352 1.836q-1.836 1.836-1.836 4.42t1.836 4.352 4.42 1.836q2.652-.068 4.42-1.836t1.768-4.352zm16.184-12.444l0-54.74q0-1.088-.748-1.768t-1.768-.68l-39.78 0q-1.088 0-1.768.748t-.68 1.7l0 54.74q0 1.02.748 1.768t1.7.68l39.78 0q1.02-.068 1.768-.748t.748-1.7zm-14.892-65.892q0-1.224-1.292-1.292l-12.444 0q-1.224.068-1.224 1.292t1.224 1.224l12.444 0q1.292 0 1.292-1.224zm22.372-1.292l0 79.628q0 3.944-2.992 6.936t-7.004 2.992l-39.78 0q-4.012 0-7.004-2.924-2.924-2.924-2.924-7.004l0-79.628q0-4.012 2.924-6.936t7.004-2.992l39.78 0q4.012-.068 7.004 2.924t2.992 7.004z",
+    width: 60.013,
+    height: 100,
+} as const;
+export const iconPlus = {
+    path: "M99.758 43.09l0 13.578q0 2.852-1.984 4.836t-4.836 1.984l-29.45 0l0 29.45q0 2.852-1.984 4.836t-4.836 1.984l-13.578 0q-2.852 0-4.836-1.984t-1.984-4.836l0-29.45l-29.45 0q-2.852 0-4.836-1.984t-1.984-4.836l0-13.578q0-2.852 1.984-4.836t4.836-1.984l29.45 0l0-29.45q0-2.852 1.984-4.836t4.836-1.984l13.578 0q2.852 0 4.836 1.984t1.984 4.836l0 29.45l29.45 0q2.852 0 4.836 1.984t1.984 4.836z",
+    width: 100,
+    height: 100,
+} as const;
+export const iconTablet = {
+    path: "M45.322 90.706q0-1.86-1.302-3.224-1.364-1.364-3.224-1.364t-3.224 1.364-1.302 3.224q0 1.86 1.364 3.224 1.302 1.364 3.162 1.302 1.86.062 3.224-1.302t1.302-3.224zm27.218-11.346l0-68.014q0-.93-.682-1.612t-1.55-.682l-58.962 0q-.93 0-1.612.682t-.682 1.612l0 68.014q0 .93.682 1.612t1.612.62l58.962 0q.992-.062 1.612-.682t.62-1.55zm9.114-68.014l0 77.066q0 4.65-3.348 7.998t-7.998 3.348l-58.962 0q-4.65 0-7.998-3.348t-3.348-7.998l0-77.066q0-4.65 3.348-7.998t7.998-3.348l58.962 0q4.65 0 7.998 3.348t3.348 7.998z",
+    width: 81.852,
+    height: 100,
+} as const;

packages/perseus-editor/src/widgets/dropdown-editor.tsx

@@ -1,12 +1,13 @@
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
-import {components, icons, EditorJsonify} from "@khanacademy/perseus";
+import {components, EditorJsonify, iconTrash} from "@khanacademy/perseus";
 import PropTypes from "prop-types";
 import * as React from "react";
 import ReactDOM from "react-dom";
 import _ from "underscore";
 
+import {iconPlus} from "../styles/icon-paths";
+
 const {InfoTip, InlineIcon} = components;
-const {iconPlus, iconTrash} = icons;
 
 type Props = any;
 

packages/perseus-editor/src/widgets/graded-group-editor.tsx

@@ -1,15 +1,20 @@
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
 /* eslint-disable react/forbid-prop-types */
-import {components, icons, ApiOptions, Changeable} from "@khanacademy/perseus";
+import {
+    components,
+    ApiOptions,
+    Changeable,
+    iconTrash,
+} from "@khanacademy/perseus";
 import {StyleSheet, css} from "aphrodite";
 import PropTypes from "prop-types";
 import * as React from "react";
 import _ from "underscore";
 
 import Editor from "../editor";
+import {iconPlus} from "../styles/icon-paths";
 
 const {InlineIcon, TextInput} = components;
-const {iconPlus, iconTrash} = icons;
 
 type Props = any;
 

packages/perseus-editor/src/widgets/image-editor.tsx

@@ -1,10 +1,10 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
 import {
     components,
-    icons,
     Changeable,
     EditorJsonify,
     Util,
+    iconTrash,
 } from "@khanacademy/perseus";
 import * as React from "react";
 import _ from "underscore";
@@ -152,7 +152,7 @@ class ImageEditor extends React.Component<Props> {
                         // eslint-disable-next-line react/jsx-no-bind
                         onClick={this.removeLabel.bind(this, i)}
                     >
-                        <InlineIcon {...icons.iconTrash} />
+                        <InlineIcon {...iconTrash} />
                     </a>
                 </td>
             </tr>

packages/perseus-editor/src/widgets/interaction-editor/element-container.tsx

@@ -1,8 +1,14 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
 
-import {components, icons} from "@khanacademy/perseus";
+import {components, iconChevronDown, iconTrash} from "@khanacademy/perseus";
 import * as React from "react";
 
+import {
+    iconChevronRight,
+    iconCircleArrowDown,
+    iconCircleArrowUp,
+} from "../../styles/icon-paths";
+
 const {InlineIcon} = components;
 
 type Props = {
@@ -52,9 +58,9 @@ class ElementContainer extends React.Component<Props, State> {
                     onClick={this.toggle}
                 >
                     {this.state.show ? (
-                        <InlineIcon {...icons.iconChevronDown} />
+                        <InlineIcon {...iconChevronDown} />
                     ) : (
-                        <InlineIcon {...icons.iconChevronRight} />
+                        <InlineIcon {...iconChevronRight} />
                     )}
                     {this.props.title}
                 </a>
@@ -71,19 +77,17 @@ class ElementContainer extends React.Component<Props, State> {
                         <div className="edit-controls">
                             {this.props.onUp != null && (
                                 <button onClick={this.props.onUp}>
-                                    <InlineIcon {...icons.iconCircleArrowUp} />
+                                    <InlineIcon {...iconCircleArrowUp} />
                                 </button>
                             )}
                             {this.props.onDown != null && (
                                 <button onClick={this.props.onDown}>
-                                    <InlineIcon
-                                        {...icons.iconCircleArrowDown}
-                                    />
+                                    <InlineIcon {...iconCircleArrowDown} />
                                 </button>
                             )}
                             {this.props.onDelete != null && (
                                 <button onClick={this.props.onDelete}>
-                                    <InlineIcon {...icons.iconTrash} />
+                                    <InlineIcon {...iconTrash} />
                                 </button>
                             )}
                         </div>

packages/perseus-editor/src/widgets/numeric-input-editor.tsx

@@ -1,17 +1,18 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
 import {
     components,
-    icons,
     Changeable,
     EditorJsonify,
     Util,
     PerseusI18nContext,
+    iconTrash,
 } from "@khanacademy/perseus";
 import {Checkbox} from "@khanacademy/wonder-blocks-form";
 import * as React from "react";
 import _ from "underscore";
 
 import Editor from "../editor";
+import {iconGear} from "../styles/icon-paths";
 
 import type {APIOptionsWithDefaults} from "@khanacademy/perseus";
 
@@ -23,7 +24,6 @@ const {
     NumberInput,
     TextInput,
 } = components;
-const {iconGear, iconTrash} = icons;
 const {firstNumericalParse} = Util;
 
 // NOTE(john): Copied from perseus-types.d.ts in the Perseus package.

packages/perseus-editor/src/widgets/radio/editor.tsx

@@ -1,20 +1,20 @@
 /* eslint-disable jsx-a11y/anchor-is-valid, react/forbid-prop-types */
 import {
     components,
-    icons,
     ApiOptions,
     BaseRadio,
     Changeable,
+    iconTrash,
 } from "@khanacademy/perseus";
 import {Checkbox} from "@khanacademy/wonder-blocks-form";
 import PropTypes from "prop-types";
 import * as React from "react";
 import _ from "underscore";
 
 import Editor from "../../editor";
+import {iconPlus} from "../../styles/icon-paths";
 
 const {InlineIcon} = components;
-const {iconPlus, iconTrash} = icons;
 
 class ChoiceEditor extends React.Component<any> {
     static propTypes = {