@react-spectrum/icon 3.0.0-nightly-641446f65-240905

package/dist/types.d.ts

@@ -0,0 +1,70 @@
+import { AriaLabelingProps, DOMProps, IconColorValue, StyleProps } from "@react-types/shared";
+import React, { ReactElement } from "react";
+export interface IconProps extends DOMProps, AriaLabelingProps, StyleProps {
+    /**
+     * A screen reader only label for the Icon.
+     */
+    'aria-label'?: string;
+    /**
+     * The content to display. Should be an SVG.
+     */
+    children: ReactElement<any>;
+    /**
+     * Size of Icon (changes based on scale).
+     */
+    size?: 'XXS' | 'XS' | 'S' | 'M' | 'L' | 'XL' | 'XXL';
+    /**
+     * A slot to place the icon in.
+     * @default 'icon'
+     */
+    slot?: string;
+    /**
+     * Indicates whether the element is exposed to an accessibility API.
+     */
+    'aria-hidden'?: boolean | 'false' | 'true';
+    /**
+     * Color of the Icon.
+     */
+    color?: IconColorValue;
+}
+export type IconPropsWithoutChildren = Omit<IconProps, 'children'>;
+/**
+ * Spectrum icons are clear, minimal, and consistent across platforms. They follow the focused and rational principles of the design system in both metaphor and style.
+ */
+export function Icon(props: IconProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export interface UIIconProps extends DOMProps, AriaLabelingProps, StyleProps {
+    children: ReactElement<any>;
+    slot?: string;
+    /**
+     * Indicates whether the element is exposed to an accessibility API.
+     */
+    'aria-hidden'?: boolean | 'false' | 'true';
+}
+export type UIIconPropsWithoutChildren = Omit<UIIconProps, 'children'>;
+export function UIIcon(props: UIIconProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export interface IllustrationProps extends DOMProps, AriaLabelingProps, StyleProps {
+    /**
+     * A screen reader only label for the Illustration.
+     */
+    'aria-label'?: string;
+    /**
+     * The content to display. Should be an SVG.
+     */
+    children: ReactElement<any>;
+    /**
+     * A slot to place the illustration in.
+     * @default 'illustration'
+     */
+    slot?: string;
+    /**
+     * Indicates whether the element is exposed to an accessibility API.
+     */
+    'aria-hidden'?: boolean | 'false' | 'true';
+}
+export type IllustrationPropsWithoutChildren = Omit<IllustrationProps, 'children'>;
+/**
+ * Wrapper component for illustrations. Use this to wrap your svg element for a custom illustration.
+ */
+export function Illustration(props: IllustrationProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"mappings":";;AAmBA,0BAA2B,SAAQ,QAAQ,EAAE,iBAAiB,EAAE,UAAU;IACxE;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,QAAQ,EAAE,aAAa,GAAG,CAAC,CAAC;IAC5B;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,GAAG,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAE,IAAI,GAAG,KAAK,CAAC;IACpD;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,MAAM,CAAC;IAC3C;;OAEG;IACH,KAAK,CAAC,EAAE,cAAc,CAAA;CACvB;AAED,uCAAuC,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC;AAWnE;;GAEG;AACH,qBAAqB,KAAK,EAAE,SAAS,sEAqCpC;AC/ED,4BAA6B,SAAQ,QAAQ,EAAE,iBAAiB,EAAE,UAAU;IAC1E,QAAQ,EAAE,aAAa,GAAG,CAAC,CAAC;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,MAAM,CAAA;CAC3C;AAED,yCAAyC,IAAI,CAAC,WAAW,EAAE,UAAU,CAAC,CAAC;AAEvE,uBAAuB,KAAK,EAAE,WAAW,sEAqCxC;AClDD,kCAAmC,SAAQ,QAAQ,EAAE,iBAAiB,EAAE,UAAU;IAChF;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,QAAQ,EAAE,aAAa,GAAG,CAAC,CAAC;IAC5B;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,MAAM,CAAA;CAC3C;AAED,+CAA+C,IAAI,CAAC,iBAAiB,EAAE,UAAU,CAAC,CAAC;AAEnF;;GAEG;AACH,6BAA6B,KAAK,EAAE,iBAAiB,sEA0BpD","sources":["packages/@react-spectrum/icon/src/packages/@react-spectrum/icon/src/Icon.tsx","packages/@react-spectrum/icon/src/packages/@react-spectrum/icon/src/UIIcon.tsx","packages/@react-spectrum/icon/src/packages/@react-spectrum/icon/src/Illustration.tsx","packages/@react-spectrum/icon/src/packages/@react-spectrum/icon/src/index.ts","packages/@react-spectrum/icon/src/index.ts"],"sourcesContent":[null,null,null,null,"/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n/// <reference types=\"css-module-types\" />\n\nexport {Icon} from './Icon';\nexport {UIIcon} from './UIIcon';\nexport {Illustration} from './Illustration';\n\nexport type {IconProps, IconPropsWithoutChildren} from './Icon';\nexport type {IllustrationProps, IllustrationPropsWithoutChildren} from './Illustration';\nexport type {UIIconProps, UIIconPropsWithoutChildren} from './UIIcon';\n"],"names":[],"version":3,"file":"types.d.ts.map"}

package/dist/vars.4163ca54.css

@@ -0,0 +1,261 @@
+.yxBNXG_spectrum-Icon, .yxBNXG_spectrum-UIIcon {
+  color: inherit;
+  fill: currentColor;
+  pointer-events: none;
+  display: inline-block;
+}
+
+:is(.yxBNXG_spectrum-Icon, .yxBNXG_spectrum-UIIcon):not(:root) {
+  overflow: hidden;
+}
+
+@media (forced-colors: active) {
+  .yxBNXG_spectrum-Icon, .yxBNXG_spectrum-UIIcon {
+    forced-color-adjust: auto;
+  }
+}
+
+.yxBNXG_spectrum-Icon--sizeXXS, .yxBNXG_spectrum-Icon--sizeXXS img, .yxBNXG_spectrum-Icon--sizeXXS svg {
+  block-size: calc(var(--spectrum-alias-workflow-icon-size, var(--spectrum-global-dimension-size-225)) / 2);
+  inline-size: calc(var(--spectrum-alias-workflow-icon-size, var(--spectrum-global-dimension-size-225)) / 2);
+}
+
+.yxBNXG_spectrum-Icon--sizeXS, .yxBNXG_spectrum-Icon--sizeXS img, .yxBNXG_spectrum-Icon--sizeXS svg {
+  block-size: calc(var(--spectrum-global-dimension-size-300) / 2);
+  inline-size: calc(var(--spectrum-global-dimension-size-300) / 2);
+}
+
+.yxBNXG_spectrum-Icon--sizeS, .yxBNXG_spectrum-Icon--sizeS img, .yxBNXG_spectrum-Icon--sizeS svg {
+  block-size: var(--spectrum-alias-workflow-icon-size, var(--spectrum-global-dimension-size-225));
+  inline-size: var(--spectrum-alias-workflow-icon-size, var(--spectrum-global-dimension-size-225));
+}
+
+.yxBNXG_spectrum-Icon--sizeM, .yxBNXG_spectrum-Icon--sizeM img, .yxBNXG_spectrum-Icon--sizeM svg {
+  block-size: var(--spectrum-global-dimension-size-300);
+  inline-size: var(--spectrum-global-dimension-size-300);
+}
+
+.yxBNXG_spectrum-Icon--sizeL, .yxBNXG_spectrum-Icon--sizeL img, .yxBNXG_spectrum-Icon--sizeL svg {
+  block-size: calc(var(--spectrum-alias-workflow-icon-size, var(--spectrum-global-dimension-size-225)) * 2);
+  inline-size: calc(var(--spectrum-alias-workflow-icon-size, var(--spectrum-global-dimension-size-225)) * 2);
+}
+
+.yxBNXG_spectrum-Icon--sizeXL, .yxBNXG_spectrum-Icon--sizeXL img, .yxBNXG_spectrum-Icon--sizeXL svg {
+  block-size: calc(var(--spectrum-global-dimension-size-300) * 2);
+  inline-size: calc(var(--spectrum-global-dimension-size-300) * 2);
+}
+
+.yxBNXG_spectrum-Icon--sizeXXL, .yxBNXG_spectrum-Icon--sizeXXL img, .yxBNXG_spectrum-Icon--sizeXXL svg {
+  block-size: calc(var(--spectrum-global-dimension-size-300) * 3);
+  inline-size: calc(var(--spectrum-global-dimension-size-300) * 3);
+}
+
+.yxBNXG_spectrum--medium .yxBNXG_spectrum-UIIcon--large {
+  display: none;
+}
+
+.yxBNXG_spectrum--medium .yxBNXG_spectrum-UIIcon--medium {
+  display: inline;
+}
+
+.yxBNXG_spectrum--large .yxBNXG_spectrum-UIIcon--medium {
+  display: none;
+}
+
+.yxBNXG_spectrum--large .yxBNXG_spectrum-UIIcon--large {
+  display: inline;
+}
+
+.yxBNXG_spectrum--large {
+  --ui-icon-large-display: block;
+  --ui-icon-medium-display: none;
+}
+
+.yxBNXG_spectrum--medium {
+  --ui-icon-medium-display: block;
+  --ui-icon-large-display: none;
+}
+
+.yxBNXG_spectrum-UIIcon--large {
+  display: var(--ui-icon-large-display);
+}
+
+.yxBNXG_spectrum-UIIcon--medium {
+  display: var(--ui-icon-medium-display);
+}
+
+.yxBNXG_spectrum-UIIcon-AlertMedium {
+  inline-size: var(--spectrum-icon-alert-medium-width, var(--spectrum-global-dimension-size-225));
+  block-size: var(--spectrum-icon-alert-medium-height, var(--spectrum-global-dimension-size-225));
+}
+
+.yxBNXG_spectrum-UIIcon-AlertSmall {
+  inline-size: var(--spectrum-icon-alert-small-width, var(--spectrum-global-dimension-size-175));
+  block-size: var(--spectrum-icon-alert-small-height, var(--spectrum-global-dimension-size-175));
+}
+
+.yxBNXG_spectrum-UIIcon-ArrowDownSmall {
+  inline-size: var(--spectrum-icon-arrow-down-small-width, var(--spectrum-global-dimension-size-100));
+  block-size: var(--spectrum-icon-arrow-down-small-height);
+}
+
+.yxBNXG_spectrum-UIIcon-ArrowLeftMedium {
+  inline-size: var(--spectrum-icon-arrow-left-medium-width, var(--spectrum-global-dimension-size-175));
+  block-size: var(--spectrum-icon-arrow-left-medium-height);
+}
+
+.yxBNXG_spectrum-UIIcon-Asterisk {
+  inline-size: var(--spectrum-fieldlabel-asterisk-size, var(--spectrum-global-dimension-size-100));
+  block-size: var(--spectrum-fieldlabel-asterisk-size, var(--spectrum-global-dimension-size-100));
+}
+
+.yxBNXG_spectrum-UIIcon-CheckmarkMedium {
+  inline-size: var(--spectrum-icon-checkmark-medium-width);
+  block-size: var(--spectrum-icon-checkmark-medium-height);
+}
+
+.yxBNXG_spectrum-UIIcon-CheckmarkSmall {
+  inline-size: var(--spectrum-icon-checkmark-small-width);
+  block-size: var(--spectrum-icon-checkmark-small-height);
+}
+
+.yxBNXG_spectrum-UIIcon-ChevronDownMedium {
+  inline-size: var(--spectrum-icon-chevron-down-medium-width);
+  block-size: var(--spectrum-icon-chevron-down-medium-height, var(--spectrum-global-dimension-size-75));
+}
+
+.yxBNXG_spectrum-UIIcon-ChevronDownSmall {
+  inline-size: var(--spectrum-icon-chevron-down-small-width, var(--spectrum-global-dimension-size-100));
+  block-size: var(--spectrum-icon-chevron-down-small-height, var(--spectrum-global-dimension-size-75));
+}
+
+.yxBNXG_spectrum-UIIcon-ChevronLeftLarge {
+  inline-size: var(--spectrum-icon-chevron-left-large-width);
+  block-size: var(--spectrum-icon-chevron-left-large-height, var(--spectrum-global-dimension-size-200));
+}
+
+.yxBNXG_spectrum-UIIcon-ChevronLeftMedium {
+  inline-size: var(--spectrum-icon-chevron-left-medium-width, var(--spectrum-global-dimension-size-75));
+  block-size: var(--spectrum-icon-chevron-left-medium-height);
+}
+
+.yxBNXG_spectrum-UIIcon-ChevronRightLarge {
+  inline-size: var(--spectrum-icon-chevron-right-large-width);
+  block-size: var(--spectrum-icon-chevron-right-large-height, var(--spectrum-global-dimension-size-200));
+}
+
+.yxBNXG_spectrum-UIIcon-ChevronRightMedium {
+  inline-size: var(--spectrum-icon-chevron-right-medium-width, var(--spectrum-global-dimension-size-75));
+  block-size: var(--spectrum-icon-chevron-right-medium-height);
+}
+
+.yxBNXG_spectrum-UIIcon-ChevronRightSmall {
+  inline-size: var(--spectrum-icon-chevron-right-small-width, var(--spectrum-global-dimension-size-75));
+  block-size: var(--spectrum-icon-chevron-right-small-height, var(--spectrum-global-dimension-size-100));
+}
+
+.yxBNXG_spectrum-UIIcon-ChevronUpSmall {
+  inline-size: var(--spectrum-icon-chevron-up-small-width, var(--spectrum-global-dimension-size-100));
+  block-size: var(--spectrum-icon-chevron-up-small-height, var(--spectrum-global-dimension-size-75));
+}
+
+.yxBNXG_spectrum-UIIcon-CornerTriangle {
+  inline-size: var(--spectrum-icon-cornertriangle-width, var(--spectrum-global-dimension-size-65));
+  block-size: var(--spectrum-icon-cornertriangle-height, var(--spectrum-global-dimension-size-65));
+}
+
+.yxBNXG_spectrum-UIIcon-CrossLarge {
+  inline-size: var(--spectrum-icon-cross-large-width);
+  block-size: var(--spectrum-icon-cross-large-height);
+}
+
+.yxBNXG_spectrum-UIIcon-CrossMedium {
+  inline-size: var(--spectrum-icon-cross-medium-width, var(--spectrum-global-dimension-size-100));
+  block-size: var(--spectrum-icon-cross-medium-height, var(--spectrum-global-dimension-size-100));
+}
+
+.yxBNXG_spectrum-UIIcon-CrossSmall {
+  inline-size: var(--spectrum-icon-cross-small-width, var(--spectrum-global-dimension-size-100));
+  block-size: var(--spectrum-icon-cross-small-height, var(--spectrum-global-dimension-size-100));
+}
+
+.yxBNXG_spectrum-UIIcon-DashSmall {
+  inline-size: var(--spectrum-icon-dash-small-width);
+  block-size: var(--spectrum-icon-dash-small-height);
+}
+
+.yxBNXG_spectrum-UIIcon-DoubleGripper {
+  inline-size: var(--spectrum-icon-doublegripper-width, var(--spectrum-global-dimension-size-200));
+  block-size: var(--spectrum-icon-doublegripper-height, var(--spectrum-global-dimension-size-50));
+}
+
+.yxBNXG_spectrum-UIIcon-FolderBreadcrumb {
+  inline-size: var(--spectrum-icon-folderbreadcrumb-width, var(--spectrum-global-dimension-size-225));
+  block-size: var(--spectrum-icon-folderbreadcrumb-height, var(--spectrum-global-dimension-size-225));
+}
+
+.yxBNXG_spectrum-UIIcon-HelpMedium {
+  inline-size: var(--spectrum-icon-info-medium-width, var(--spectrum-global-dimension-size-225));
+  block-size: var(--spectrum-icon-info-medium-height, var(--spectrum-global-dimension-size-225));
+}
+
+.yxBNXG_spectrum-UIIcon-HelpSmall {
+  inline-size: var(--spectrum-icon-info-small-width, var(--spectrum-global-dimension-size-175));
+  block-size: var(--spectrum-icon-info-small-height, var(--spectrum-global-dimension-size-175));
+}
+
+.yxBNXG_spectrum-UIIcon-InfoMedium {
+  inline-size: var(--spectrum-icon-info-medium-width, var(--spectrum-global-dimension-size-225));
+  block-size: var(--spectrum-icon-info-medium-height, var(--spectrum-global-dimension-size-225));
+}
+
+.yxBNXG_spectrum-UIIcon-InfoSmall {
+  inline-size: var(--spectrum-icon-info-small-width, var(--spectrum-global-dimension-size-175));
+  block-size: var(--spectrum-icon-info-small-height, var(--spectrum-global-dimension-size-175));
+}
+
+.yxBNXG_spectrum-UIIcon-ListGripper {
+  inline-size: var(--spectrum-global-dimension-size-65);
+  block-size: var(--spectrum-global-dimension-size-150);
+}
+
+.yxBNXG_spectrum-UIIcon-Magnifier {
+  inline-size: var(--spectrum-icon-magnifier-width, var(--spectrum-global-dimension-size-200));
+  block-size: var(--spectrum-icon-magnifier-height, var(--spectrum-global-dimension-size-200));
+}
+
+.yxBNXG_spectrum-UIIcon-SkipLeft {
+  inline-size: var(--spectrum-icon-skip-left-width);
+  block-size: var(--spectrum-icon-skip-left-height);
+}
+
+.yxBNXG_spectrum-UIIcon-SkipRight {
+  inline-size: var(--spectrum-icon-skip-right-width);
+  block-size: var(--spectrum-icon-skip-right-height);
+}
+
+.yxBNXG_spectrum-UIIcon-Star {
+  inline-size: var(--spectrum-icon-star-width, var(--spectrum-global-dimension-size-225));
+  block-size: var(--spectrum-icon-star-height, var(--spectrum-global-dimension-size-225));
+}
+
+.yxBNXG_spectrum-UIIcon-StarOutline {
+  inline-size: var(--spectrum-icon-star-outline-width, var(--spectrum-global-dimension-size-225));
+  block-size: var(--spectrum-icon-star-outline-height, var(--spectrum-global-dimension-size-225));
+}
+
+.yxBNXG_spectrum-UIIcon-SuccessMedium {
+  inline-size: var(--spectrum-icon-success-medium-width, var(--spectrum-global-dimension-size-225));
+  block-size: var(--spectrum-icon-success-medium-height, var(--spectrum-global-dimension-size-225));
+}
+
+.yxBNXG_spectrum-UIIcon-SuccessSmall {
+  inline-size: var(--spectrum-icon-success-small-width, var(--spectrum-global-dimension-size-175));
+  block-size: var(--spectrum-icon-success-small-height, var(--spectrum-global-dimension-size-175));
+}
+
+.yxBNXG_spectrum-UIIcon-TripleGripper {
+  inline-size: var(--spectrum-icon-triplegripper-width);
+  block-size: var(--spectrum-icon-triplegripper-height, var(--spectrum-global-dimension-size-85));
+}
+/*# sourceMappingURL=vars.4163ca54.css.map */

package/dist/vars.4163ca54.css.map

@@ -0,0 +1 @@
+{"mappings":"AAoCA;;;;;;;AAWE;;;;AAQF;EACE;;;;;AAoBA;;;;;AASA;;;;;AASA;;;;;AASA;;;;;AASA;;;;;AASA;;;;;AASA;;;;;AAuBA;;;;AAGA;;;;AAMA;;;;AAGA;;;;AAOF;;;;;AAKA;;;;;AAKA;;;;AAIA;;;;AAMA;;;;;AAKA;;;;;AAKA;;;;;AAKA;;;;;AAKA;;;;;AAKA;;;;;AAKA;;;;;AAKA;;;;;AAKA;;;;;AAKA;;;;;AAKA;;;;;AAKA;;;;;AAKA;;;;;AAKA;;;;;AAKA;;;;;AAKA;;;;;AAKA;;;;;AAKA;;;;;AAKA;;;;;AAKA;;;;;AAKA;;;;;AAKA;;;;;AAKA;;;;;AAKA;;;;;AAKA;;;;;AAKA;;;;;AAKA;;;;;AAKA;;;;;AAKA;;;;;AAKA;;;;;AAKA;;;;;AAKA;;;;;AAKA;;;;;AAKA;;;;;AAKA","sources":["packages/@adobe/spectrum-css-temp/components/icon/vars.css"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n@import './index.css';\n"],"names":[],"version":3,"file":"vars.4163ca54.css.map"}

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@react-spectrum/icon",
+  "version": "3.0.0-nightly-641446f65-240905",
+  "description": "Spectrum UI components in React",
+  "license": "Apache-2.0",
+  "main": "dist/main.js",
+  "module": "dist/module.js",
+  "exports": {
+    "types": "./dist/types.d.ts",
+    "import": "./dist/import.mjs",
+    "require": "./dist/main.js"
+  },
+  "types": "dist/types.d.ts",
+  "source": "src/index.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "sideEffects": [
+    "*.css"
+  ],
+  "targets": {
+    "main": {
+      "includeNodeModules": [
+        "@adobe/spectrum-css-temp"
+      ]
+    },
+    "module": {
+      "includeNodeModules": [
+        "@adobe/spectrum-css-temp"
+      ]
+    }
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/adobe/react-spectrum"
+  },
+  "dependencies": {
+    "@react-aria/utils": "^3.0.0-nightly-641446f65-240905",
+    "@react-spectrum/utils": "^3.0.0-nightly-641446f65-240905",
+    "@react-types/shared": "^3.0.0-nightly-641446f65-240905",
+    "@swc/helpers": "^0.5.0"
+  },
+  "devDependencies": {
+    "@adobe/spectrum-css-temp": "3.0.0-alpha.1"
+  },
+  "peerDependencies": {
+    "@react-spectrum/provider": "^3.0.0-nightly-641446f65-240905",
+    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "stableVersion": "3.7.15"
+}

package/src/Icon.tsx

@@ -0,0 +1,99 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {AriaLabelingProps, DOMProps, IconColorValue, StyleProps} from '@react-types/shared';
+import {baseStyleProps, classNames, StyleHandlers, useSlotProps, useStyleProps} from '@react-spectrum/utils';
+import {filterDOMProps} from '@react-aria/utils';
+import React, {ReactElement} from 'react';
+import styles from '@adobe/spectrum-css-temp/components/icon/vars.css';
+import {useProvider} from '@react-spectrum/provider';
+
+export interface IconProps extends DOMProps, AriaLabelingProps, StyleProps {
+  /**
+   * A screen reader only label for the Icon.
+   */
+  'aria-label'?: string,
+  /**
+   * The content to display. Should be an SVG.
+   */
+  children: ReactElement<any>,
+  /**
+   * Size of Icon (changes based on scale).
+   */
+  size?: 'XXS' | 'XS' | 'S' | 'M' | 'L' |'XL' | 'XXL',
+  /**
+   * A slot to place the icon in.
+   * @default 'icon'
+   */
+  slot?: string,
+  /**
+   * Indicates whether the element is exposed to an accessibility API.
+   */
+  'aria-hidden'?: boolean | 'false' | 'true',
+  /**
+   * Color of the Icon.
+   */
+  color?: IconColorValue
+}
+
+export type IconPropsWithoutChildren = Omit<IconProps, 'children'>;
+
+function iconColorValue(value: IconColorValue) {
+  return `var(--spectrum-semantic-${value}-color-icon)`;
+}
+
+const iconStyleProps: StyleHandlers = {
+  ...baseStyleProps,
+  color: ['color', iconColorValue]
+};
+
+/**
+ * Spectrum icons are clear, minimal, and consistent across platforms. They follow the focused and rational principles of the design system in both metaphor and style.
+ */
+export function Icon(props: IconProps) {
+  props = useSlotProps(props, 'icon');
+  let {
+    children,
+    size,
+    'aria-label': ariaLabel,
+    'aria-hidden': ariaHidden,
+    ...otherProps
+  } = props;
+  let {styleProps} = useStyleProps(otherProps, iconStyleProps);
+
+  let provider = useProvider();
+  let scale = 'M';
+  if (provider !== null) {
+    scale = provider.scale === 'large' ? 'L' : 'M';
+  }
+  if (!ariaHidden) {
+    ariaHidden = undefined;
+  }
+
+  // Use user specified size, falling back to provider scale if size is undef
+  let iconSize = size ? size : scale;
+
+  return React.cloneElement(children, {
+    ...filterDOMProps(otherProps),
+    ...styleProps,
+    focusable: 'false',
+    'aria-label': ariaLabel,
+    'aria-hidden': (ariaLabel ? (ariaHidden || undefined) : true),
+    role: 'img',
+    className: classNames(
+      styles,
+      children.props.className,
+      'spectrum-Icon',
+      `spectrum-Icon--size${iconSize}`,
+      styleProps.className)
+  });
+}

package/src/Illustration.tsx

@@ -0,0 +1,69 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {AriaLabelingProps, DOMProps, StyleProps} from '@react-types/shared';
+import {filterDOMProps} from '@react-aria/utils';
+import React, {ReactElement} from 'react';
+import {useSlotProps, useStyleProps} from '@react-spectrum/utils';
+
+export interface IllustrationProps extends DOMProps, AriaLabelingProps, StyleProps {
+  /**
+   * A screen reader only label for the Illustration.
+   */
+  'aria-label'?: string,
+  /**
+   * The content to display. Should be an SVG.
+   */
+  children: ReactElement<any>,
+  /**
+   * A slot to place the illustration in.
+   * @default 'illustration'
+   */
+  slot?: string,
+  /**
+   * Indicates whether the element is exposed to an accessibility API.
+   */
+  'aria-hidden'?: boolean | 'false' | 'true'
+}
+
+export type IllustrationPropsWithoutChildren = Omit<IllustrationProps, 'children'>;
+
+/**
+ * Wrapper component for illustrations. Use this to wrap your svg element for a custom illustration.
+ */
+export function Illustration(props: IllustrationProps) {
+  props = useSlotProps(props, 'illustration');
+  let {
+    children,
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledby,
+    'aria-hidden': ariaHidden,
+    ...otherProps
+  } = props;
+  let {styleProps} = useStyleProps(otherProps);
+
+  let hasLabel = ariaLabel || ariaLabelledby;
+
+  if (!ariaHidden) {
+    ariaHidden = undefined;
+  }
+
+  return React.cloneElement(children, {
+    ...filterDOMProps(otherProps),
+    ...styleProps,
+    focusable: 'false',
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledby,
+    'aria-hidden': ariaHidden,
+    role: hasLabel ? 'img' : undefined
+  });
+}

package/src/UIIcon.tsx

@@ -0,0 +1,68 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {AriaLabelingProps, DOMProps, StyleProps} from '@react-types/shared';
+import {classNames, useSlotProps, useStyleProps} from '@react-spectrum/utils';
+import {filterDOMProps} from '@react-aria/utils';
+import React, {ReactElement} from 'react';
+import styles from '@adobe/spectrum-css-temp/components/icon/vars.css';
+import {useProvider} from '@react-spectrum/provider';
+
+export interface UIIconProps extends DOMProps, AriaLabelingProps, StyleProps {
+  children: ReactElement<any>,
+  slot?: string,
+  /**
+   * Indicates whether the element is exposed to an accessibility API.
+   */
+  'aria-hidden'?: boolean | 'false' | 'true'
+}
+
+export type UIIconPropsWithoutChildren = Omit<UIIconProps, 'children'>;
+
+export function UIIcon(props: UIIconProps) {
+  props = useSlotProps(props, 'icon');
+  let {
+    children,
+    'aria-label': ariaLabel,
+    'aria-hidden': ariaHidden,
+    ...otherProps
+  } = props;
+
+  let {styleProps} = useStyleProps(otherProps);
+  let provider = useProvider();
+  let scale = 'M';
+  if (provider !== null) {
+    scale = provider.scale === 'large' ? 'L' : 'M';
+  }
+
+  if (!ariaHidden) {
+    ariaHidden = undefined;
+  }
+
+  return React.cloneElement(children, {
+    ...filterDOMProps(otherProps),
+    ...styleProps,
+    scale,
+    focusable: 'false',
+    'aria-label': ariaLabel,
+    'aria-hidden': (ariaLabel ? (ariaHidden || undefined) : true),
+    role: 'img',
+    className: classNames(
+      styles,
+      children.props.className,
+      'spectrum-Icon',
+      {
+        [`spectrum-UIIcon-${children.type['displayName']}`]: children.type['displayName']
+      },
+      styleProps.className)
+  });
+}

package/src/index.ts

@@ -0,0 +1,21 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+/// <reference types="css-module-types" />
+
+export {Icon} from './Icon';
+export {UIIcon} from './UIIcon';
+export {Illustration} from './Illustration';
+
+export type {IconProps, IconPropsWithoutChildren} from './Icon';
+export type {IllustrationProps, IllustrationPropsWithoutChildren} from './Illustration';
+export type {UIIconProps, UIIconPropsWithoutChildren} from './UIIcon';