Restore font building (#563)

* Revert "Temporarily removing font-building steps. (#539)"

This reverts commit 4da8901.

* Patch fantasticon

.github/workflows/bump-version.yml

@@ -41,17 +41,17 @@ jobs:
         sed -i.bk -r "s/[0-9]+\.[0-9]+\.[0-9]+/$NEW_VERSION/g" ios/FluentIcons.podspec
         rm ios/FluentIcons.podspec.bk
 
-    # # Needs to be "-E" instead of "-r" on macOS
-    # - name: Replace version number in flutter/CHANGELOG.md
-    #   run: |
-    #     sed -i.bk -r "s/[0-9]+\.[0-9]+\.[0-9]+/$NEW_VERSION/g" flutter/CHANGELOG.md
-    #     rm flutter/CHANGELOG.md.bk
+    # Needs to be "-E" instead of "-r" on macOS
+    - name: Replace version number in flutter/CHANGELOG.md
+      run: |
+        sed -i.bk -r "s/[0-9]+\.[0-9]+\.[0-9]+/$NEW_VERSION/g" flutter/CHANGELOG.md
+        rm flutter/CHANGELOG.md.bk
 
-    # # Needs to be "-E" instead of "-r" on macOS
-    # - name: Replace version number in flutter/pubspec.yaml
-    #   run: |
-    #     sed -i.bk -r "s/version: [0-9]+\.[0-9]+\.[0-9]+/version: $NEW_VERSION/g" flutter/pubspec.yaml
-    #     rm flutter/pubspec.yaml.bk
+    # Needs to be "-E" instead of "-r" on macOS
+    - name: Replace version number in flutter/pubspec.yaml
+      run: |
+        sed -i.bk -r "s/version: [0-9]+\.[0-9]+\.[0-9]+/version: $NEW_VERSION/g" flutter/pubspec.yaml
+        rm flutter/pubspec.yaml.bk
 
     # Needs to be "-E" instead of "-r" on macOS
     - name: Replace version number in svg-icons/package.json
@@ -66,10 +66,10 @@ jobs:
         rm packages/react-icons/package.json.bk
 
     # Needs to be "-E" instead of "-r" on macOS
-    # - name: Replace version number in react-icons-font-subsetting-webpack-plugin/package.json
-    #   run: |
-    #     sed -i.bk -r "s/\"version\": \"[0-9]+\.[0-9]+\.[0-9]+\"/\"version\": \"$NEW_VERSION\"/g" packages/react-icons-font-subsetting-webpack-plugin/package.json
-    #     rm packages/react-icons-font-subsetting-webpack-plugin/package.json.bk
+    - name: Replace version number in react-icons-font-subsetting-webpack-plugin/package.json
+      run: |
+        sed -i.bk -r "s/\"version\": \"[0-9]+\.[0-9]+\.[0-9]+\"/\"version\": \"$NEW_VERSION\"/g" packages/react-icons-font-subsetting-webpack-plugin/package.json
+        rm packages/react-icons-font-subsetting-webpack-plugin/package.json.bk
 
     - name: Config git credentials
       run: git config user.email "[email protected]" && git config user.name "Fluent Build System"

.github/workflows/pr.yml

@@ -79,35 +79,35 @@ jobs:
       run: python3 generate_build_gn_android.py
       working-directory: importer
 
-  # build-flutter:
-  #   name: Build Flutter library
-  #   runs-on: ubuntu-latest
-
-  #   steps:
-  #   - uses: actions/checkout@v2
-
-  #   - name: Use Node 18
-  #     uses: actions/setup-node@v1
-  #     with:
-  #       node-version: 18.x
-
-  #   - run: npm install
-
-  #   - name: Run generate script
-  #     run: npm run deploy:flutter
-  #     working-directory: importer
-
-  #   # Build Flutter library
-  #   # The name should be same as the package name on pub.dev
-  #   # Tokens are placeholder strings in order for the action to run on forked repos.
-  #   - name: 'fluentui_system_icons'
-  #     uses: k-paxian/dart-package-publisher@master
-  #     with:
-  #       relativePath: 'flutter'
-  #       skipTests: true
-  #       dryRunOnly: true
-  #       accessToken: "placeholder"
-  #       refreshToken: "placeholder"
+  build-flutter:
+    name: Build Flutter library
+    runs-on: ubuntu-latest
+
+    steps:
+    - uses: actions/checkout@v2
+
+    - name: Use Node 18
+      uses: actions/setup-node@v1
+      with:
+        node-version: 18.x
+
+    - run: npm install
+
+    - name: Run generate script
+      run: npm run deploy:flutter
+      working-directory: importer
+
+    # Build Flutter library
+    # The name should be same as the package name on pub.dev
+    # Tokens are placeholder strings in order for the action to run on forked repos.
+    - name: 'fluentui_system_icons'
+      uses: k-paxian/dart-package-publisher@master
+      with:
+        relativePath: 'flutter'
+        skipTests: true
+        dryRunOnly: true
+        accessToken: "placeholder"
+        refreshToken: "placeholder"
 
   build-svg:
     name: Build svg library
@@ -145,10 +145,10 @@ jobs:
         npm run build
       working-directory: packages/react-icons
 
-    # - run: |
-    #     npm run build
-    #   working-directory: packages/react-icons-font-subsetting-webpack-plugin
+    - run: |
+        npm run build
+      working-directory: packages/react-icons-font-subsetting-webpack-plugin
 
-    # - run: |
-    #     npm run test
-    #   working-directory: packages/react-icons-font-subsetting-webpack-plugin
+    - run: |
+        npm run test
+      working-directory: packages/react-icons-font-subsetting-webpack-plugin

.github/workflows/publish.yml

@@ -56,18 +56,18 @@ jobs:
       working-directory: importer
 
     ## Flutter
-    # - name: Run Flutter generate script
-    #   run: npm run deploy:flutter
-    #   working-directory: importer
-
-    # # The name should be same as the package name on pub.dev
-    # - name: 'fluentui_system_icons'
-    #   uses: k-paxian/dart-package-publisher@master
-    #   with:
-    #     relativePath: 'flutter'
-    #     skipTests: true
-    #     accessToken: ${{ secrets.FLUTTER_OAUTH_ACCESS_TOKEN }}
-    #     refreshToken: ${{ secrets.FLUTTER_OAUTH_REFRESH_TOKEN }}
+    - name: Run Flutter generate script
+      run: npm run deploy:flutter
+      working-directory: importer
+
+    # The name should be same as the package name on pub.dev
+    - name: 'fluentui_system_icons'
+      uses: k-paxian/dart-package-publisher@master
+      with:
+        relativePath: 'flutter'
+        skipTests: true
+        accessToken: ${{ secrets.FLUTTER_OAUTH_ACCESS_TOKEN }}
+        refreshToken: ${{ secrets.FLUTTER_OAUTH_REFRESH_TOKEN }}
 
     ## Publish
     # Needs to be "-E" instead of "-r" on macOS
@@ -88,17 +88,17 @@ jobs:
         sed -i.bk -r "s/[0-9]+\.[0-9]+\.[0-9]+/$NEW_VERSION/g" ios/FluentIcons.podspec
         rm ios/FluentIcons.podspec.bk
 
-    # # Needs to be "-E" instead of "-r" on macOS
-    # - name: Replace version number in flutter/CHANGELOG.md
-    #   run: |
-    #     sed -i.bk -r "s/[0-9]+\.[0-9]+\.[0-9]+/$NEW_VERSION/g" flutter/CHANGELOG.md
-    #     rm flutter/CHANGELOG.md.bk
+    # Needs to be "-E" instead of "-r" on macOS
+    - name: Replace version number in flutter/CHANGELOG.md
+      run: |
+        sed -i.bk -r "s/[0-9]+\.[0-9]+\.[0-9]+/$NEW_VERSION/g" flutter/CHANGELOG.md
+        rm flutter/CHANGELOG.md.bk
 
-    # # Needs to be "-E" instead of "-r" on macOS
-    # - name: Replace version number in flutter/pubspec.yaml
-    #   run: |
-    #     sed -i.bk -r "s/version: [0-9]+\.[0-9]+\.[0-9]+/version: $NEW_VERSION/g" flutter/pubspec.yaml
-    #     rm flutter/pubspec.yaml.bk
+    # Needs to be "-E" instead of "-r" on macOS
+    - name: Replace version number in flutter/pubspec.yaml
+      run: |
+        sed -i.bk -r "s/version: [0-9]+\.[0-9]+\.[0-9]+/version: $NEW_VERSION/g" flutter/pubspec.yaml
+        rm flutter/pubspec.yaml.bk
 
     # Needs to be "-E" instead of "-r" on macOS
     - name: Replace version number in svg-icons/package.json
@@ -118,11 +118,11 @@ jobs:
         sed -i.bk -r "s/\"version\": \"[0-9]+\.[0-9]+\.[0-9]+(-beta\.[0-9]+)?(-rc\.[0-9]+)?\"/\"version\": \"$REACT_VERSION\"/g" packages/react-icons/package.json
         rm packages/react-icons/package.json.bk
 
-    # # Needs to be "-E" instead of "-r" on macOS
-    # - name: Replace version number in react-icons-font-subsetting-webpack-plugin/package.json
-    #   run: |
-    #     sed -i.bk -r "s/\"version\": \"[0-9]+\.[0-9]+\.[0-9]+(-beta\.[0-9]+)?(-rc\.[0-9]+)?\"/\"version\": \"$REACT_VERSION\"/g" packages/react-icons-font-subsetting-webpack-plugin/package.json
-    #     rm packages/react-icons-font-subsetting-webpack-plugin/package.json.bk
+    # Needs to be "-E" instead of "-r" on macOS
+    - name: Replace version number in react-icons-font-subsetting-webpack-plugin/package.json
+      run: |
+        sed -i.bk -r "s/\"version\": \"[0-9]+\.[0-9]+\.[0-9]+(-beta\.[0-9]+)?(-rc\.[0-9]+)?\"/\"version\": \"$REACT_VERSION\"/g" packages/react-icons-font-subsetting-webpack-plugin/package.json
+        rm packages/react-icons-font-subsetting-webpack-plugin/package.json.bk
 
     - name: Install dependencies
       run: npm install
@@ -142,10 +142,10 @@ jobs:
         npm run build
       working-directory: packages/react-icons 
 
-    # - name: Build Webpack plugin library
-    #   run: |
-    #     npm run build
-    #   working-directory: packages/react-icons-font-subsetting-webpack-plugin 
+    - name: Build Webpack plugin library
+      run: |
+        npm run build
+      working-directory: packages/react-icons-font-subsetting-webpack-plugin 
 
     - uses: JS-DevTools/npm-publish@v1
       with:
@@ -165,11 +165,11 @@ jobs:
         access: public
         package: packages/react-icons/package.json 
 
-    # - uses: JS-DevTools/npm-publish@v1
-    #   with:
-    #     token: ${{ secrets.NPM_TOKEN }}
-    #     access: public
-    #     package: packages/react-icons-font-subsetting-webpack-plugin/package.json 
+    - uses: JS-DevTools/npm-publish@v1
+      with:
+        token: ${{ secrets.NPM_TOKEN }}
+        access: public
+        package: packages/react-icons-font-subsetting-webpack-plugin/package.json 
 
     ## Android
     - name: Run Android generate script

importer/generateFont.js

@@ -10,6 +10,14 @@ const glob = promisify(require('glob'));
 const process = require("process");
 const argv = require("yargs").boolean("selector").default("selector", false).argv;
 const _ = require("lodash");
+
+// Temporary patch until https://github.com/tancredi/fantasticon/pull/507 is merged and published
+(function patchFantasticon() {
+    const filePath = require.resolve('fantasticon/lib/generators/asset-types/svg');
+    const { readFileSync, writeFileSync } = require('fs');
+    const fileContent = readFileSync(filePath, 'utf-8');
+    writeFileSync(filePath, fileContent.replace(/String\.fromCharCode/g, "String.fromCodePoint"));
+})()
 const fantasticon = require('fantasticon');
 
 const SRC_PATH = argv.source;
@@ -27,6 +35,7 @@ if (!(ICON_TYPE === 'Filled' || ICON_TYPE === 'Regular' || ICON_TYPE === 'Resiza
     throw new Error("Icon type not specified");
 }
 
+const MAX_PRIVATE_USE_CODEPOINTS = 137468;
 async function main() {
     await mkdirp(DEST_PATH);
     const stagingFolder = path.resolve(DEST_PATH, ICON_TYPE);
@@ -35,8 +44,8 @@ async function main() {
     const svgFiles = await glob(path.resolve(SRC_PATH, `*_${ICON_TYPE === 'Resizable' ? '20_{filled,regular}' : ICON_TYPE.toLowerCase()}.svg`));
     const icons = new Set(svgFiles.map(file => path.basename(file).replace(/\.svg$/, '')));
 
-    if (icons.size > 6400) {
-        throw new Error('Too many icons to fit into the Unicode private use area (0xE000-0xF8FF). See https://unicode-table.com/en/blocks/private-use-area/')
+    if (icons.size > MAX_PRIVATE_USE_CODEPOINTS) {
+        throw new Error('Too many icons to fit into the Unicode private use area(s). See https://www.unicode.org/faq/private_use.html')
     }
 
     // Copy all icons of the given icon type to the staging folder
@@ -89,10 +98,15 @@ async function getCodepoints(icons) {
 
     for (const iconName of icons) {
         const originalCodepoint = codepoints[iconName]
-        if (!originalCodepoint || originalCodepoint < 0xe000 || originalCodepoint > 0xf8ff) {
+        if (!originalCodepoint || !isPrivateUseAreaCodepoint(originalCodepoint)) {
             // Find a new free codepoint
             while (usedCodePoints.has(nextCodePoint)) {
                 nextCodePoint++;
+                if (nextCodePoint === 0xf900) {
+                    nextCodePoint = 0xF0000;
+                } else if (nextCodePoint === 0xFFFFE) {
+                    nextCodePoint = 0x100000;
+                }
             }
 
             usedCodePoints.add(nextCodePoint);
@@ -104,4 +118,12 @@ async function getCodepoints(icons) {
 
 }
 
+/**
+ * @param {number} codepoint 
+ * @returns {boolean} Whether the codepoint falls within one of the Unicode Private Use Areas
+ */
+function isPrivateUseAreaCodepoint(codepoint) {
+    return (codepoint >= 0xe000 && codepoint <= 0xf8ff) || (codepoint >= 0xF0000 && codepoint <= 0xFFFFD) || (codepoint >= 0x100000 && codepoint <= 0x10FFFD);
+}
+
 main();

packages/react-icons/package.json

@@ -25,7 +25,7 @@
     "rollup": "node ./generateRollup.js",
     "optimize": "svgo --config svgo.config.js --folder=./intermediate --precision=2",
     "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:svg && 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"
   },
@@ -59,12 +59,22 @@
   ],
   "exports": {
     ".": {
+      "fluentIconFont": {
+        "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",