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

package/lib-cjs/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-cjs/utils/fonts/createFluentFontIcon.js

@@ -0,0 +1,125 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createFluentFontIcon = void 0;
+
+const tslib_1 = require("tslib");
+
+const React = tslib_1.__importStar(require("react"));
+
+const react_1 = require("@griffel/react");
+
+const useIconState_1 = require("../useIconState");
+
+const FluentSystemIcons_Filled_ttf_1 = tslib_1.__importDefault(require("./FluentSystemIcons-Filled.ttf"));
+
+const FluentSystemIcons_Filled_woff_1 = tslib_1.__importDefault(require("./FluentSystemIcons-Filled.woff"));
+
+const FluentSystemIcons_Filled_woff2_1 = tslib_1.__importDefault(require("./FluentSystemIcons-Filled.woff2"));
+
+const FluentSystemIcons_Regular_ttf_1 = tslib_1.__importDefault(require("./FluentSystemIcons-Regular.ttf"));
+
+const FluentSystemIcons_Regular_woff_1 = tslib_1.__importDefault(require("./FluentSystemIcons-Regular.woff"));
+
+const FluentSystemIcons_Regular_woff2_1 = tslib_1.__importDefault(require("./FluentSystemIcons-Regular.woff2"));
+
+const FluentSystemIcons_Resizable_ttf_1 = tslib_1.__importDefault(require("./FluentSystemIcons-Resizable.ttf"));
+
+const FluentSystemIcons_Resizable_woff_1 = tslib_1.__importDefault(require("./FluentSystemIcons-Resizable.woff"));
+
+const FluentSystemIcons_Resizable_woff2_1 = tslib_1.__importDefault(require("./FluentSystemIcons-Resizable.woff2"));
+
+const FONT_FAMILY_MAP = {
+  [0
+  /* Filled */
+  ]: 'FluentSystemIconsFilled',
+  [1
+  /* Regular */
+  ]: 'FluentSystemIconsRegular',
+  [2
+  /* Resizable */
+  ]: 'FluentSystemIcons'
+};
+const useStaticStyles = react_1.makeStaticStyles(`
+@font-face {
+    font-family: ${FONT_FAMILY_MAP[0
+/* Filled */
+]};
+    src: url(${JSON.stringify(FluentSystemIcons_Filled_woff2_1.default)}) format("woff2"),
+    url(${JSON.stringify(FluentSystemIcons_Filled_woff_1.default)}) format("woff"),
+    url(${JSON.stringify(FluentSystemIcons_Filled_ttf_1.default)}) format("truetype");
+}
+@font-face {
+    font-family: ${FONT_FAMILY_MAP[1
+/* Regular */
+]};
+    src: url(${JSON.stringify(FluentSystemIcons_Regular_woff2_1.default)}) format("woff2"),
+    url(${JSON.stringify(FluentSystemIcons_Regular_woff_1.default)}) format("woff"),
+    url(${JSON.stringify(FluentSystemIcons_Regular_ttf_1.default)}) format("truetype");
+}
+@font-face {
+    font-family: ${FONT_FAMILY_MAP[2
+/* Resizable */
+]};
+    src: url(${JSON.stringify(FluentSystemIcons_Resizable_woff2_1.default)}) format("woff2"),
+    url(${JSON.stringify(FluentSystemIcons_Resizable_woff_1.default)}) format("woff"),
+    url(${JSON.stringify(FluentSystemIcons_Resizable_ttf_1.default)}) format("truetype");
+}
+`);
+
+const useRootStyles = react_1.__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;}}"]
+});
+
+function createFluentFontIcon(displayName, codepoint, font, fontSize) {
+  const Component = props => {
+    useStaticStyles();
+    const styles = useRootStyles();
+    props.className = react_1.mergeClasses(styles.root, styles[font], props.className);
+
+    const _a = useIconState_1.useIconState(props),
+          {
+      primaryFill
+    } = _a,
+          state = tslib_1.__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;
+}
+
+exports.createFluentFontIcon = createFluentFontIcon;

package/lib-cjs/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-cjs/utils/useIconState.js

@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useIconState = void 0;
 
+const tslib_1 = require("tslib");
+
 const react_1 = require("@griffel/react");
 
 const useRootStyles = react_1.__styles({
@@ -22,8 +24,10 @@ const useIconState = props => {
   const {
     title,
     primaryFill = "currentColor"
-  } = props;
-  const state = Object.assign(Object.assign({}, props), {
+  } = props,
+        rest = tslib_1.__rest(props, ["title", "primaryFill"]);
+
+  const state = Object.assign(Object.assign({}, rest), {
     title: undefined,
     fill: primaryFill
   });

package/lib-cjs/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;

package/lib-cjs/utils/wrapIcon.js

@@ -4,7 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-const React = require("react");
+const tslib_1 = require("tslib");
+
+const React = tslib_1.__importStar(require("react"));
 
 const useIconState_1 = require("./useIconState");
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-icons",
-  "version": "2.0.169-rc.6",
+  "version": "2.0.170-rc.7",
   "sideEffects": false,
   "main": "lib-cjs/index.js",
   "module": "lib/index.js",
@@ -15,23 +15,32 @@
     "clean": "find ./src -type f ! -name \"wrapIcon.tsx\" -name \"*.tsx\" -delete",
     "cleanSvg": "rm -rf ./intermediate",
     "copy": "node ../../importer/generate.js --source=../../assets --dest=./intermediate --extension=svg --target=react",
-    "convert": "node convert.js --source=./intermediate --dest=./src",
+    "copy:font-files": "cpy './src/utils/fonts/*.{ttf,woff,woff2,json}' ./lib/utils/fonts/. && cpy './src/utils/fonts/*.{ttf,woff,woff2,json}' ./lib-cjs/utils/fonts/.",
+    "convert:svg": "node convert.js --source=./intermediate --dest=./src",
+    "convert:fonts": "node convert-font.js --source=./src/utils/fonts --dest=./src/fonts --codepointDest=./src/utils/fonts",
+    "generate:font-regular": "node ../../importer/generateFont.js --source=intermediate --dest=src/utils/fonts --iconType=Regular --codepoints=../../fonts/FluentSystemIcons-Regular.json",
+    "generate:font-filled": "node ../../importer/generateFont.js --source=intermediate --dest=src/utils/fonts --iconType=Filled --codepoints=../../fonts/FluentSystemIcons-Filled.json",
+    "generate:font-resizable": "node ../../importer/generateFont.js --source=intermediate --dest=src/utils/fonts --iconType=Resizable",
+    "generate:font": "npm run generate:font-regular && npm run generate:font-filled && npm run generate:font-resizable",
     "rollup": "node ./generateRollup.js",
     "optimize": "svgo --folder=./intermediate --precision=2 --disable=removeViewBox,mergePaths",
     "unfill": "find ./intermediate -type f -name \"*.svg\" -exec sed -i.bak 's/fill=\"none\"//g' {} \\; && find ./intermediate -type f -name \"*.bak\" -delete",
-    "build": "npm run copy && npm run optimize && npm run unfill && npm run convert && npm run cleanSvg && npm run build:esm && npm run build:cjs",
+    "build": "npm run copy && npm run generate:font && npm run optimize && npm run unfill && npm run convert:svg && npm run convert:fonts && npm run cleanSvg && npm run build:esm && npm run build:cjs && npm run copy:font-files",
     "build:cjs": "tsc --module commonjs --outDir lib-cjs && babel lib-cjs --out-dir lib-cjs",
     "build:esm": "tsc && babel lib --out-dir lib"
   },
   "devDependencies": {
     "@babel/cli": "^7.16.0",
     "@babel/core": "^7.16.0",
+    "@babel/preset-typescript": "^7.16.7",
     "@griffel/babel-preset": "^1.0.0",
     "@griffel/react": "^1.0.0",
     "@svgr/core": "^5.5.0",
     "@types/react": "^17.0.2",
-    "glob": "^7.1.7",
+    "cpy-cli": "^4.1.0",
+    "glob": "^7.2.0",
     "lodash": "^4.17.21",
+    "mkdirp": "^1.0.4",
     "react": "^17.0.1",
     "renamer": "^2.0.1",
     "svgo": "^1.3.2",
@@ -46,5 +55,29 @@
   "files": [
     "lib/",
     "lib-cjs/"
-  ]
-}
+  ],
+  "exports": {
+    ".": {
+      "fluentIcontFont": {
+        "types": "./lib/fonts/index.d.ts",
+        "import": "./lib/fonts/index.js",
+        "require": "./lib-cjs/fonts/index.js"
+      },
+      "default": {
+        "types": "./lib/index.d.ts",
+        "import": "./lib/index.js",
+        "require": "./lib-cjs/index.js"
+      }
+    },
+    "./lib/fonts": {
+      "types": "./lib/fonts/index.d.ts",
+      "import": "./lib/fonts/index.js",
+      "require": "./lib-cjs/fonts/index.js"
+    },
+    "./lib/svg": {
+      "types": "./lib/index.d.ts",
+      "import": "./lib/index.js",
+      "require": "./lib-cjs/index.js"
+    }
+  }
+}