@fluentui/react-icons 2.0.169-rc.6 → 2.0.170-rc.7

package/lib/utils/fonts/createFluentFontIcon.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { FluentIconsProps } from '../FluentIconsProps.types';
+export declare const enum FontFile {
+    Filled = 0,
+    Regular = 1,
+    Resizable = 2
+}
+export declare function createFluentFontIcon(displayName: string, codepoint: string, font: FontFile, fontSize?: number): React.FC<FluentIconsProps<React.HTMLAttributes<HTMLElement>>>;

package/lib/utils/fonts/createFluentFontIcon.js

@@ -0,0 +1,103 @@
+import { __rest } from "tslib";
+import * as React from 'react';
+import { __styles, makeStaticStyles, mergeClasses } from "@griffel/react";
+import { useIconState } from '../useIconState';
+import fontFilledTtf from './FluentSystemIcons-Filled.ttf';
+import fontFilledWoff from './FluentSystemIcons-Filled.woff';
+import fontFilledWoff2 from './FluentSystemIcons-Filled.woff2';
+import fontRegularTtf from './FluentSystemIcons-Regular.ttf';
+import fontRegularWoff from './FluentSystemIcons-Regular.woff';
+import fontRegularWoff2 from './FluentSystemIcons-Regular.woff2';
+import fontOneSizeTtf from './FluentSystemIcons-Resizable.ttf';
+import fontOneSizeWoff from './FluentSystemIcons-Resizable.woff';
+import fontOneSizeWoff2 from './FluentSystemIcons-Resizable.woff2';
+const FONT_FAMILY_MAP = {
+  [0
+  /* Filled */
+  ]: 'FluentSystemIconsFilled',
+  [1
+  /* Regular */
+  ]: 'FluentSystemIconsRegular',
+  [2
+  /* Resizable */
+  ]: 'FluentSystemIcons'
+};
+const useStaticStyles = makeStaticStyles(`
+@font-face {
+    font-family: ${FONT_FAMILY_MAP[0
+/* Filled */
+]};
+    src: url(${JSON.stringify(fontFilledWoff2)}) format("woff2"),
+    url(${JSON.stringify(fontFilledWoff)}) format("woff"),
+    url(${JSON.stringify(fontFilledTtf)}) format("truetype");
+}
+@font-face {
+    font-family: ${FONT_FAMILY_MAP[1
+/* Regular */
+]};
+    src: url(${JSON.stringify(fontRegularWoff2)}) format("woff2"),
+    url(${JSON.stringify(fontRegularWoff)}) format("woff"),
+    url(${JSON.stringify(fontRegularTtf)}) format("truetype");
+}
+@font-face {
+    font-family: ${FONT_FAMILY_MAP[2
+/* Resizable */
+]};
+    src: url(${JSON.stringify(fontOneSizeWoff2)}) format("woff2"),
+    url(${JSON.stringify(fontOneSizeWoff)}) format("woff"),
+    url(${JSON.stringify(fontOneSizeTtf)}) format("truetype");
+}
+`);
+
+const useRootStyles = __styles({
+  "0": {
+    "Bahqtrf": "f9dzkbp"
+  },
+  "1": {
+    "Bahqtrf": "f1krtbx5"
+  },
+  "2": {
+    "Bahqtrf": "f1sxfq9t"
+  },
+  "root": {
+    "mc9l5x": "f14t3ns0",
+    "B80ckks": "fmd4ok8",
+    "Bg96gwp": "fne0op0",
+    "ycbfsm": "fg4l7m0"
+  }
+}, {
+  "d": [".f9dzkbp{font-family:FluentSystemIconsFilled;}", ".f1krtbx5{font-family:FluentSystemIconsRegular;}", ".f1sxfq9t{font-family:FluentSystemIcons;}", ".f14t3ns0{display:inline-block;}", ".fmd4ok8{font-style:normal;}", ".fne0op0{line-height:1em;}"],
+  "t": ["@media (forced-colors: active){.fg4l7m0{forced-color-adjust:auto;}}"]
+});
+
+export function createFluentFontIcon(displayName, codepoint, font, fontSize) {
+  const Component = props => {
+    useStaticStyles();
+    const styles = useRootStyles();
+    props.className = mergeClasses(styles.root, styles[font], props.className);
+
+    const _a = useIconState(props),
+          {
+      primaryFill
+    } = _a,
+          state = __rest(_a, ["primaryFill"]); // We want to keep the same API surface as the SVG icons, so translate `primaryFill` to `color`
+
+
+    if (primaryFill) {
+      state.style = Object.assign(Object.assign({}, state.style), {
+        color: primaryFill
+      });
+    }
+
+    if (fontSize) {
+      state.style = Object.assign(Object.assign({}, state.style), {
+        fontSize
+      });
+    }
+
+    return React.createElement("i", Object.assign({}, state), codepoint);
+  };
+
+  Component.displayName = displayName;
+  return Component;
+}

package/lib/utils/useIconState.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import { FluentIconsProps } from "./FluentIconsProps.types";
-export declare const useIconState: (props: FluentIconsProps) => FluentIconsProps;
+export declare const useIconState: <TBaseAttributes extends import("react").HTMLAttributes<HTMLElement> | import("react").SVGAttributes<SVGElement> = import("react").SVGAttributes<SVGElement>>(props: FluentIconsProps<TBaseAttributes>) => FluentIconsProps<TBaseAttributes>;

package/lib/utils/useIconState.js

@@ -1,3 +1,4 @@
+import { __rest } from "tslib";
 import { __styles, mergeClasses } from "@griffel/react";
 
 const useRootStyles = __styles({
@@ -15,8 +16,10 @@ export const useIconState = props => {
   const {
     title,
     primaryFill = "currentColor"
-  } = props;
-  const state = Object.assign(Object.assign({}, props), {
+  } = props,
+        rest = __rest(props, ["title", "primaryFill"]);
+
+  const state = Object.assign(Object.assign({}, rest), {
     title: undefined,
     fill: primaryFill
   });

package/lib/utils/wrapIcon.d.ts

@@ -1,4 +1,8 @@
 import * as React from "react";
-import { FluentIconsProps } from "./FluentIconsProps.types";
-declare const wrapIcon: (icon: JSX.Element, displayName?: string | undefined) => React.FC<FluentIconsProps>;
+declare const wrapIcon: (icon: JSX.Element, displayName?: string | undefined) => React.FC<React.SVGAttributes<SVGElement> & {
+    primaryFill?: string | undefined;
+    className?: string | undefined;
+    filled?: boolean | undefined;
+    title?: string | undefined;
+}>;
 export default wrapIcon;