From ffcfbc015fa700deab2def26b6b95ad8bd9fb892 Mon Sep 17 00:00:00 2001 From: Dan Marshall Date: Sat, 7 Jun 2025 09:26:52 -0700 Subject: [PATCH 01/10] Add author information to package.json --- packages/chart-types/package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/chart-types/package.json b/packages/chart-types/package.json index 45a76c51..1f388a1f 100644 --- a/packages/chart-types/package.json +++ b/packages/chart-types/package.json @@ -21,9 +21,9 @@ "remove-vega": "npm un vega-typings", "patch-after-vega-upgrade": "npm version patch" }, - "author": "", + "author": "Dan Marshall", "license": "MIT", "dependencies": { "vega-typings": "~1.5.0" } -} +} \ No newline at end of file From 2ff9f49166376aaa963bc63cd62cba8acf35b58a Mon Sep 17 00:00:00 2001 From: Dan Marshall Date: Sat, 7 Jun 2025 09:29:26 -0700 Subject: [PATCH 02/10] Refactor icon initialization and registration process across components --- packages/fluentui-icons/src/fabric-icons.ts | 14 ++++---------- packages/fluentui-icons/src/index.ts | 14 ++++++++++++-- packages/fluentui-react-cdn-typings/index.d.ts | 3 ++- packages/powerbi/src/fluentUIComponents.ts | 6 ++++-- packages/sanddance-app/src/fluentUIComponents.ts | 6 ++++-- .../frontend/src/fluentUIComponents.ts | 6 ++++-- 6 files changed, 30 insertions(+), 19 deletions(-) diff --git a/packages/fluentui-icons/src/fabric-icons.ts b/packages/fluentui-icons/src/fabric-icons.ts index 92c1bc77..494b4172 100644 --- a/packages/fluentui-icons/src/fabric-icons.ts +++ b/packages/fluentui-icons/src/fabric-icons.ts @@ -1,17 +1,11 @@ - // Your use of the content in the files referenced here is subject to the terms of the license at https://aka.ms/fabric-assets-license +// Your use of the content in the files referenced here is subject to the terms of the license at https://aka.ms/fabric-assets-license // tslint:disable:max-line-length -import { - IIconOptions, - IIconSubset, - registerIcons -} from '@uifabric/styling'; +import { IIconSubset } from '@uifabric/styling'; import { fabricIconsWoff } from './fabric_icons_994712d3'; -export function initializeIcons( - options?: IIconOptions -): void { +export function initializeIcons() { const subset: IIconSubset = { style: { MozOsxFontSmoothing: 'grayscale', @@ -81,5 +75,5 @@ export function initializeIcons( } }; - registerIcons(subset, options); + return subset; } diff --git a/packages/fluentui-icons/src/index.ts b/packages/fluentui-icons/src/index.ts index d96ef98c..7e03b5c3 100644 --- a/packages/fluentui-icons/src/index.ts +++ b/packages/fluentui-icons/src/index.ts @@ -2,10 +2,20 @@ import { initializeIcons as i } from './fabric-icons'; import { IIconOptions } from '@uifabric/styling'; +let registerIcons: (iconSubset: any, options?: Partial) => void; + export function initializeIcons( options?: IIconOptions ): void { [i].forEach( - (initialize: (options?: IIconOptions) => void) => initialize(options) - ); + (initialize: (options?: IIconOptions) => void) => { + const subset = initialize(options); + registerIcons(subset, options); + }); } + +export function use( + _registerIcons: (iconSubset: any, options?: Partial) => void +): void { + registerIcons = _registerIcons; +} \ No newline at end of file diff --git a/packages/fluentui-react-cdn-typings/index.d.ts b/packages/fluentui-react-cdn-typings/index.d.ts index 8bf92782..d379eb0b 100644 --- a/packages/fluentui-react-cdn-typings/index.d.ts +++ b/packages/fluentui-react-cdn-typings/index.d.ts @@ -15,7 +15,7 @@ import { ContextualMenuItemType } from '@fluentui/react/lib/ContextualMenu'; import { Customizer } from '@fluentui/react/lib/utilities'; import { Dialog, DialogFooter, DialogType } from '@fluentui/react/lib/Dialog'; import { Dropdown, DropdownMenuItemType } from '@fluentui/react/lib/Dropdown'; -import { getFocusStyle, getTheme, loadTheme } from '@fluentui/react/lib/Styling'; +import { getFocusStyle, getTheme, loadTheme, registerIcons } from '@fluentui/react/lib/Styling'; import { Icon } from '@fluentui/react/lib/Icon'; import { Label } from '@fluentui/react/lib/Label'; import { Modal } from '@fluentui/react/lib/Modal'; @@ -52,4 +52,5 @@ export interface FluentUIComponents { SpinnerSize: typeof SpinnerSize; TextField: typeof TextField; Toggle: typeof Toggle; + registerIcons: typeof registerIcons; } diff --git a/packages/powerbi/src/fluentUIComponents.ts b/packages/powerbi/src/fluentUIComponents.ts index 86e11751..fdea49e9 100644 --- a/packages/powerbi/src/fluentUIComponents.ts +++ b/packages/powerbi/src/fluentUIComponents.ts @@ -14,9 +14,9 @@ import { Customizer } from '@fluentui/react/lib/Utilities'; import { Dialog, DialogFooter, DialogType } from '@fluentui/react/lib/Dialog'; import { Dropdown, DropdownMenuItemType } from '@fluentui/react/lib/Dropdown'; import { FluentUIComponents } from '@msrvida/fluentui-react-cdn-typings'; -import { getFocusStyle, getTheme, loadTheme } from '@fluentui/react/lib/Styling'; +import { getFocusStyle, getTheme, loadTheme, registerIcons } from '@fluentui/react/lib/Styling'; import { Icon } from '@fluentui/react/lib/Icon'; -import { initializeIcons } from '@msrvida/fluentui-icons'; +import { initializeIcons, use } from '@msrvida/fluentui-icons'; import { Label } from '@fluentui/react/lib/Label'; import { Modal } from '@fluentui/react/lib/Modal'; import { Slider } from '@fluentui/react/lib/Slider'; @@ -24,6 +24,7 @@ import { Spinner, SpinnerSize } from '@fluentui/react/lib/Spinner'; import { TextField } from '@fluentui/react/lib/TextField'; import { Toggle } from '@fluentui/react/lib/Toggle'; +use(registerIcons); initializeIcons(); /* tslint:disable */ @@ -53,4 +54,5 @@ export const fluentUIComponents: FluentUIComponents = { SpinnerSize, TextField: TextField as any, Toggle: Toggle as any, + registerIcons, }; diff --git a/packages/sanddance-app/src/fluentUIComponents.ts b/packages/sanddance-app/src/fluentUIComponents.ts index 417c041f..b5b39a35 100644 --- a/packages/sanddance-app/src/fluentUIComponents.ts +++ b/packages/sanddance-app/src/fluentUIComponents.ts @@ -14,9 +14,9 @@ import { Customizer } from '@fluentui/react/lib/Utilities'; import { Dialog, DialogFooter, DialogType } from '@fluentui/react/lib/Dialog'; import { Dropdown, DropdownMenuItemType } from '@fluentui/react/lib/Dropdown'; import { FluentUIComponents } from '@msrvida/fluentui-react-cdn-typings'; -import { getFocusStyle, getTheme, loadTheme } from '@fluentui/react/lib/Styling'; +import { getFocusStyle, getTheme, loadTheme, registerIcons } from '@fluentui/react/lib/Styling'; import { Icon } from '@fluentui/react/lib/Icon'; -import { initializeIcons } from '@msrvida/fluentui-icons'; +import { initializeIcons, use } from '@msrvida/fluentui-icons'; import { Label } from '@fluentui/react/lib/Label'; import { Modal } from '@fluentui/react/lib/Modal'; import { Slider } from '@fluentui/react/lib/Slider'; @@ -24,6 +24,7 @@ import { Spinner, SpinnerSize } from '@fluentui/react/lib/Spinner'; import { TextField } from '@fluentui/react/lib/TextField'; import { Toggle } from '@fluentui/react/lib/Toggle'; +use(registerIcons); initializeIcons(); export const fluentUI: FluentUIComponents = { @@ -52,4 +53,5 @@ export const fluentUI: FluentUIComponents = { SpinnerSize, TextField: TextField as any, Toggle: Toggle as any, + registerIcons, }; diff --git a/streamlit/streamlit_sanddance/frontend/src/fluentUIComponents.ts b/streamlit/streamlit_sanddance/frontend/src/fluentUIComponents.ts index 5601ecc3..f38e44a0 100644 --- a/streamlit/streamlit_sanddance/frontend/src/fluentUIComponents.ts +++ b/streamlit/streamlit_sanddance/frontend/src/fluentUIComponents.ts @@ -17,9 +17,9 @@ import { Customizer } from '@fluentui/react/lib/Utilities'; import { Dialog, DialogFooter, DialogType } from '@fluentui/react/lib/Dialog'; import { Dropdown, DropdownMenuItemType } from '@fluentui/react/lib/Dropdown'; import { FluentUIComponents } from '@msrvida/fluentui-react-cdn-typings'; -import { getFocusStyle, getTheme, loadTheme } from '@fluentui/react/lib/Styling'; +import { getFocusStyle, getTheme, loadTheme, registerIcons } from '@fluentui/react/lib/Styling'; import { Icon } from '@fluentui/react/lib/Icon'; -import { initializeIcons } from '@msrvida/fluentui-icons'; +import { initializeIcons, use } from '@msrvida/fluentui-icons'; import { Label } from '@fluentui/react/lib/Label'; import { Modal } from '@fluentui/react/lib/Modal'; import { Slider } from '@fluentui/react/lib/Slider'; @@ -27,6 +27,7 @@ import { Spinner, SpinnerSize } from '@fluentui/react/lib/Spinner'; import { TextField } from '@fluentui/react/lib/TextField'; import { Toggle } from '@fluentui/react/lib/Toggle'; +use(registerIcons); initializeIcons(); export const fluentUI: FluentUIComponents = { @@ -55,4 +56,5 @@ export const fluentUI: FluentUIComponents = { SpinnerSize, TextField: TextField as any, Toggle: Toggle as any, + registerIcons, }; From ff825f76f0cc2123d117c07aa0baf4d0b9f44f46 Mon Sep 17 00:00:00 2001 From: Dan Marshall Date: Sat, 7 Jun 2025 09:30:40 -0700 Subject: [PATCH 03/10] Add UMD bundle --- packages/fluentui-icons/package.json | 12 ++++++++++-- packages/fluentui-icons/rollup.config.mjs | 17 +++++++++++++++++ 2 files changed, 27 insertions(+), 2 deletions(-) create mode 100644 packages/fluentui-icons/rollup.config.mjs diff --git a/packages/fluentui-icons/package.json b/packages/fluentui-icons/package.json index 1423a207..b0aada0e 100644 --- a/packages/fluentui-icons/package.json +++ b/packages/fluentui-icons/package.json @@ -1,17 +1,25 @@ { "name": "@msrvida/fluentui-icons", - "private": true, "version": "1.0.0", + "description": "Fluent UI icons for use in MsrVida data visualization applications.", "main": "dist/es6/index.js", "types": "dist/es6/index.d.ts", + "repository": { + "type": "git", + "url": "https://github.com/microsoft/SandDance.git", + "directory": "packages/fluentui-icons" + }, "files": [ "dist" ], + "author": "Dan Marshall", + "license": "MIT", "scripts": { "clean": "rimraf ./dist", "eslint": "eslint -c ../../eslint.config.mjs --fix ./src/**/*.ts*", "prebuild": "node ./scripts/prebuild.js", "build": "tsc -p .", - "build:05": "npm run build" + "bundle": "rollup -c", + "build:05": "npm run build && npm run bundle" } } diff --git a/packages/fluentui-icons/rollup.config.mjs b/packages/fluentui-icons/rollup.config.mjs new file mode 100644 index 00000000..fdfc7941 --- /dev/null +++ b/packages/fluentui-icons/rollup.config.mjs @@ -0,0 +1,17 @@ +import commonjs from '@rollup/plugin-commonjs'; +import json from '@rollup/plugin-json'; +import resolve from '@rollup/plugin-node-resolve'; + +export default { + input: './dist/es6/index.js', + output: { + file: './dist/umd/fluent-ui-icons.js', + format: 'umd', + name: 'FluentUIIcons', + }, + plugins: [ + json(), + resolve({ jsnext: true }), + commonjs({ sourceMap: false }), + ], +}; From a682896f0336ff8e440aaef71922d345aa3dcadb Mon Sep 17 00:00:00 2001 From: Dan Marshall Date: Sat, 7 Jun 2025 09:47:42 -0700 Subject: [PATCH 04/10] version bump, change readme --- packages/fluentui-icons/README.md | 140 +-------------------------- packages/fluentui-icons/package.json | 2 +- 2 files changed, 3 insertions(+), 139 deletions(-) diff --git a/packages/fluentui-icons/README.md b/packages/fluentui-icons/README.md index 35897008..df0dd6b2 100644 --- a/packages/fluentui-icons/README.md +++ b/packages/fluentui-icons/README.md @@ -1,139 +1,3 @@ -# What is a font subset and why should I use one? -As the name implies, a font subset contains a portion of the complete set of characters included in a font. This is useful for fonts like [Office UI Fabric's icon font](https://developer.microsoft.com/en-us/fabric#/styles/icons), which includes far more characters than what any single application will need or should serve at once (>1000 characters, which is ~150KB for the .woff). Using a subset ensures that an application is only using the glyphs it needs at any given time, and saves significant bytes over the wire. +# @msrvida/fluentui-icons -If you're reading this, you've probably already generated a subset of Fabric's icon font. Follow the instructions below to understand its contents and learn how to integrate it into your project. - -## Contents -1. [Get started](#get-started) - - [Folder structure](#folder-structure) -2. [How to use icon subsets](#how-to-use-icon-subsets) - - [Which subset should I use?](#which-subset-should-i-use) - - [CSS and SCSS subsets](#css-and-scss-subsets) - - [TypeScript subsets](#typescript-subsets) -3. [Maintaining a subset](#maintaining-a-subset) - - [Font config options](#font-config-options) - - [Subset chunk settings](#subset-chunk-settings) - -# Get started -## Folder structure -Each subset package will include some variation the following files, assuming a font name of `fabric-icons` (which can be configured in the tool—see Font config options below). Note that if "Create subset chunks" was selected when generating a subset, there will be an additional HTML, JSON, CSS, SCSS, and TS file for each generated "chunked" subset. - -``` -fabric-icons -│ README.md: The docs you're reading now. -│ microsoft-ui-fabric-assets-license: License and usage terms for the fonts. -│ fabric-icons.html - Demo HTML for a given subset. -│ -└─── config -│ │ fabric-icons.json - Configuration file for the subset package. -| > Contains the list of icon names to be included as well as options for -| > the subset itself. See the section below on "maintaining a subset" -| > for more details. -│ -└─── css -| │ fabric-icons.css - @font-face definition and icon classes for the subset. Links to the subsetted font file. -| │ fabric-icons-inline.css - Same as standard CSS, but includes the base64-encoded WOFF font file inline. -│ -└─── scss -| │ fabric-icons.scss - Same as standard CSS and adds a mixin for each icon. -| │ fabric-icons-inline.scss - Same as standard SCSS, but includes the base64-encoded WOFF font file inline. -│ -└─── fonts -| │ fabric-icons.woff - The subsetted icon font. -│ -└─── src -| │ index.ts - Contains top-level exports for all subset initialization code. -| │ fabric-icons.ts - TypeScript subset options and initialization code. -| │ IconNames.ts - Contains const enum of all available icon names for Intellisense. -``` - -# How to use icon subsets -The icon subsets included here are based on the CSS and SCSS approaches of [office-ui-fabric-core](https://github.com/OfficeDev/office-ui-fabric-core/) (see the [icons page on the Fabric website](https://developer.microsoft.com/en-us/fabric#/styles/icons)), and TypeScript-based approach of [`@uifabric/icons`](https://www.npmjs.com/package/@uifabric/icons), which is what's used in [office-ui-fabric-react](https://github.com/OfficeDev/office-ui-fabric-react/). Each subset can be used independently of either of those projects, meaning your app doesn't need to have them installed in order to use the icon subsets in this package. The instructions here will help you get started quickly using each subset method, but you should refer to the full documentation for each for more detail. - -## Which subset should I use? - -### CSS and SCSS subsets -The CSS and SCSS methods are similar to what's used in [office-ui-fabric-core](https://github.com/OfficeDev/office-ui-fabric-core/), which is useful for quickly applying Microsoft's design language to an HTML and CSS-based web app. Both include class names you can use in plain HTML, and differ only in that the SCSS files require a SASS preprocessor to use its icon mixins and build its output into plain CSS. - -**Use the CSS subset** if your app is relatively simple (e.g. no build process) or you aren't already using SCSS. Simply add a link to one of the icons CSS files to your page, or `@import` it into another CSS file, and add the icon classes to HTML elements like so: -```css - -``` - -**Use the SCSS subset** if your app already uses [SCSS](http://sass-lang.com/) in a build pipeline, or you wish to use the icon mixins to inject the icon code into your own class names. - -For example, if you wish to use the same Edit icon as before but without using the standard `.ms-Icon--Edit` class, you can use the mixins to inject the icon code into a custom class like so: - -```scss -.myClassName:before { @include ms-Icon--Edit } -``` - -This would result in the following code being generated: - -```scss -.myClassName:before { content: "\E70F"; } -``` - -You may wish to use this approach if there may be multiple versions of Fabric on the page and you want to ensure there won't be any rendering conflicts. However, be sure to either add the `.ms-Icon` class to those elements *or* `@include ms-Icon` in your custom class name as this sets the `@font-family` to the font in your subset. - -### TypeScript subsets -The TypeScript subset method included under `src` is similar to what's used in [`@uifabric/icons`](https://www.npmjs.com/package/@uifabric/icons) and will make the most sense in applications that use [office-ui-fabric-react](https://github.com/OfficeDev/office-ui-fabric-react/) controls. - -As a prerequisite to using these subsets, ensure that your project is configured to build TypeScript. You may wish to use a tool like [create-react-app-typescript](https://github.com/wmonk/create-react-app-typescript) or Microsoft's own [TypeScript-React-Starter](https://github.com/Microsoft/TypeScript-React-Starter). This is a temporary limitation—future updates to the subsetter tool will include pre-compiled subsets that you'll be able to use with simpler configurations. - -Once your project is configured, in your source code, import the `initializeIcons` function and call it on the page(s) you wish to use the icons: - -```tsx -import { initializeIcons } from 'path-to-subset/src'; - -initializeIcons(); -``` - -This defines an `@font-face` rule and registers a map of icon names for the subset. Once initialized, icons can be used through the `getIcon` API in `office-ui-fabric-react`, like below: - -```tsx -import { Icon } from 'office-ui-fabric-react/lib/Icon'; - - -``` - -CSS classnames can also be used directly on elements using the `getIconClassNames` API from `@uifabric/styling`: - -```tsx -import { getIconClassName } from '@uifabric/styling'; - -return ``; -``` - -More details on JavaScript-based icon usage can be found on [Office UI Fabric React's wiki](https://github.com/OfficeDev/office-ui-fabric-react/wiki/Using-icons), [`@uifabric/icons`](https://www.npmjs.com/package/@uifabric/icons), and [`@uifabric/styling`](https://www.npmjs.com/package/@uifabric/styling#using-fabric-core-classes). - - -# Maintaining a subset -Each subset package has a configuration JSON file that describes which icons are included in that subset and which options were selected for the subset, such as `chunkSubsets` or `excludeGlyphs`. This file is used to maintain and update the subset over time--it can be dragged and dropped on to the Fabric Icons tool to pre-populate icon selection and whichever options were chosen in the tool. - -It is recommended to check this file in to a project's source control and update it each time you make changes to a subset. - -Most options map to a text field or checkbox in the "Subset options" section of the details pane of Fabric Icons tool. This is represented by the "Tool label" column below. - - -## Font config options -| Option | Default value | Tool label | Description | -|:------------- |:--------------|:--- |:-----------------| -| `fontName` | `'fabric-icons'` | Font file name | The name given to each of the subset's HTML, CSS, SCSS, TS, and JSON files. | -| `fontFamilyName` | `'FabricMDL2Icons'` | Font-family name | The name of the font-family given in the @font-face definition for the subset. It is recommended to change this only if the icon subset will be used in conjunction with multiple, different versions of Fabric or other icon subsets on the same page. | -| `excludeGlyphs` | `false` | Exclude selection from subset | Produces a subset that excludes the selected glyphs from the full Fabric icon set. This is useful if you wish to create a subset that includes all of the Fabric icons EXCEPT for the selected icons.| -| `chunkSubsets` | `false` | Create subset chunks | Controls whether to produce additional subsets that can be loaded on-demand.| -| `hashFontFileName` | `false` | Hash font file name | Controls whether to add a unique hash to the .woff font file based on glyph selection and subset options. This is useful for [CDN cache busting](http://www.adopsinsider.com/ad-ops-basics/what-is-a-cache-buster-and-how-does-it-work//) if you plan on hosting font files on a CDN, which may serve old cached versions of a font without a busting mechanism. | -| `glyphs` | [{ }] | N/A | The list of icons included in a subset, populated from selecting icons in the Fabric Icons tool. Each glyph is an object with a `name` and `unicode` property. | - - -## Legacy options -#### Subset chunk settings -The maxSubsetSize option was used to configure the size of the subset "chunks" that would be auto-generated when doChunkSubsets was enabled. However, since the base icon set is over 2000 icons, it would be very easy to create 2000+ subsets by setting maxSubsetSize to a low number, spamming the tool with requests and wasting resources. Since the default value of 100 is not often changed, the feature has been removed to simplify the experience. - -Each option here is a property of `subsetChunkSettings`, and only apply if `chunkSubsets` is `true`. - -| Option | Default value | Tool label | Description | -|:------------- |:--------------|:--- |:-----------------| -| `maxSubsetSize` | `100` | Max subset chunk size | The maximum number of icons to be included in a generated subset chunk. Larger chunks take longer to load as they will have more characters and larger fonts, but smaller chunks may incur more HTTP requests. | ---- +A subset of [FluentUI icons](https://aka.ms/uifabric-icons) for use in MSRVida data visualization applications. diff --git a/packages/fluentui-icons/package.json b/packages/fluentui-icons/package.json index b0aada0e..2c99017f 100644 --- a/packages/fluentui-icons/package.json +++ b/packages/fluentui-icons/package.json @@ -1,6 +1,6 @@ { "name": "@msrvida/fluentui-icons", - "version": "1.0.0", + "version": "1.0.1", "description": "Fluent UI icons for use in MsrVida data visualization applications.", "main": "dist/es6/index.js", "types": "dist/es6/index.d.ts", From e9776fba13a9ab392e55ee0380b8e32cfd3d5cf3 Mon Sep 17 00:00:00 2001 From: Dan Marshall Date: Sat, 7 Jun 2025 12:22:12 -0700 Subject: [PATCH 05/10] Fix output file name in rollup configuration for UMD bundle --- packages/fluentui-icons/rollup.config.mjs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/fluentui-icons/rollup.config.mjs b/packages/fluentui-icons/rollup.config.mjs index fdfc7941..e8a8498d 100644 --- a/packages/fluentui-icons/rollup.config.mjs +++ b/packages/fluentui-icons/rollup.config.mjs @@ -5,7 +5,7 @@ import resolve from '@rollup/plugin-node-resolve'; export default { input: './dist/es6/index.js', output: { - file: './dist/umd/fluent-ui-icons.js', + file: './dist/umd/fluentui-icons.js', format: 'umd', name: 'FluentUIIcons', }, From 256d29871a1f68cb0479d36e054fe457fded3ecd Mon Sep 17 00:00:00 2001 From: Dan Marshall Date: Sat, 7 Jun 2025 12:31:33 -0700 Subject: [PATCH 06/10] unregister icons --- packages/fluentui-icons/src/index.ts | 20 +++++++++++-------- .../fluentui-react-cdn-typings/index.d.ts | 5 +++-- packages/powerbi/src/fluentUIComponents.ts | 5 +++-- .../sanddance-app/src/fluentUIComponents.ts | 5 +++-- .../sanddance-embed/src/sanddance-embed.ts | 5 +++++ .../frontend/src/fluentUIComponents.ts | 5 +++-- 6 files changed, 29 insertions(+), 16 deletions(-) diff --git a/packages/fluentui-icons/src/index.ts b/packages/fluentui-icons/src/index.ts index 7e03b5c3..a3d166fe 100644 --- a/packages/fluentui-icons/src/index.ts +++ b/packages/fluentui-icons/src/index.ts @@ -3,19 +3,23 @@ import { initializeIcons as i } from './fabric-icons'; import { IIconOptions } from '@uifabric/styling'; let registerIcons: (iconSubset: any, options?: Partial) => void; +let unregisterIcons: (iconNames: string[]) => void; -export function initializeIcons( - options?: IIconOptions -): void { +export function initializeIcons(): void { [i].forEach( - (initialize: (options?: IIconOptions) => void) => { - const subset = initialize(options); - registerIcons(subset, options); + (initialize) => { + const subset = initialize(); + unregisterIcons(Object.keys(subset.icons)); + registerIcons(subset, { + disableWarnings: true, + }); }); } export function use( - _registerIcons: (iconSubset: any, options?: Partial) => void + _registerIcons: (iconSubset: any, options?: Partial) => void, + _unregisterIcons: (iconNames: string[]) => void, ): void { registerIcons = _registerIcons; -} \ No newline at end of file + unregisterIcons = _unregisterIcons; +} diff --git a/packages/fluentui-react-cdn-typings/index.d.ts b/packages/fluentui-react-cdn-typings/index.d.ts index d379eb0b..e93ca867 100644 --- a/packages/fluentui-react-cdn-typings/index.d.ts +++ b/packages/fluentui-react-cdn-typings/index.d.ts @@ -15,7 +15,7 @@ import { ContextualMenuItemType } from '@fluentui/react/lib/ContextualMenu'; import { Customizer } from '@fluentui/react/lib/utilities'; import { Dialog, DialogFooter, DialogType } from '@fluentui/react/lib/Dialog'; import { Dropdown, DropdownMenuItemType } from '@fluentui/react/lib/Dropdown'; -import { getFocusStyle, getTheme, loadTheme, registerIcons } from '@fluentui/react/lib/Styling'; +import { getFocusStyle, getTheme, loadTheme, registerIcons, unregisterIcons } from '@fluentui/react/lib/Styling'; import { Icon } from '@fluentui/react/lib/Icon'; import { Label } from '@fluentui/react/lib/Label'; import { Modal } from '@fluentui/react/lib/Modal'; @@ -52,5 +52,6 @@ export interface FluentUIComponents { SpinnerSize: typeof SpinnerSize; TextField: typeof TextField; Toggle: typeof Toggle; - registerIcons: typeof registerIcons; + registerIcons?: typeof registerIcons; + unregisterIcons?: typeof unregisterIcons; } diff --git a/packages/powerbi/src/fluentUIComponents.ts b/packages/powerbi/src/fluentUIComponents.ts index fdea49e9..69c28b18 100644 --- a/packages/powerbi/src/fluentUIComponents.ts +++ b/packages/powerbi/src/fluentUIComponents.ts @@ -14,7 +14,7 @@ import { Customizer } from '@fluentui/react/lib/Utilities'; import { Dialog, DialogFooter, DialogType } from '@fluentui/react/lib/Dialog'; import { Dropdown, DropdownMenuItemType } from '@fluentui/react/lib/Dropdown'; import { FluentUIComponents } from '@msrvida/fluentui-react-cdn-typings'; -import { getFocusStyle, getTheme, loadTheme, registerIcons } from '@fluentui/react/lib/Styling'; +import { getFocusStyle, getTheme, loadTheme, registerIcons, unregisterIcons } from '@fluentui/react/lib/Styling'; import { Icon } from '@fluentui/react/lib/Icon'; import { initializeIcons, use } from '@msrvida/fluentui-icons'; import { Label } from '@fluentui/react/lib/Label'; @@ -24,7 +24,7 @@ import { Spinner, SpinnerSize } from '@fluentui/react/lib/Spinner'; import { TextField } from '@fluentui/react/lib/TextField'; import { Toggle } from '@fluentui/react/lib/Toggle'; -use(registerIcons); +use(registerIcons, unregisterIcons); initializeIcons(); /* tslint:disable */ @@ -55,4 +55,5 @@ export const fluentUIComponents: FluentUIComponents = { TextField: TextField as any, Toggle: Toggle as any, registerIcons, + unregisterIcons, }; diff --git a/packages/sanddance-app/src/fluentUIComponents.ts b/packages/sanddance-app/src/fluentUIComponents.ts index b5b39a35..a7c3ff18 100644 --- a/packages/sanddance-app/src/fluentUIComponents.ts +++ b/packages/sanddance-app/src/fluentUIComponents.ts @@ -14,7 +14,7 @@ import { Customizer } from '@fluentui/react/lib/Utilities'; import { Dialog, DialogFooter, DialogType } from '@fluentui/react/lib/Dialog'; import { Dropdown, DropdownMenuItemType } from '@fluentui/react/lib/Dropdown'; import { FluentUIComponents } from '@msrvida/fluentui-react-cdn-typings'; -import { getFocusStyle, getTheme, loadTheme, registerIcons } from '@fluentui/react/lib/Styling'; +import { getFocusStyle, getTheme, loadTheme, registerIcons, unregisterIcons } from '@fluentui/react/lib/Styling'; import { Icon } from '@fluentui/react/lib/Icon'; import { initializeIcons, use } from '@msrvida/fluentui-icons'; import { Label } from '@fluentui/react/lib/Label'; @@ -24,7 +24,7 @@ import { Spinner, SpinnerSize } from '@fluentui/react/lib/Spinner'; import { TextField } from '@fluentui/react/lib/TextField'; import { Toggle } from '@fluentui/react/lib/Toggle'; -use(registerIcons); +use(registerIcons, unregisterIcons); initializeIcons(); export const fluentUI: FluentUIComponents = { @@ -54,4 +54,5 @@ export const fluentUI: FluentUIComponents = { TextField: TextField as any, Toggle: Toggle as any, registerIcons, + unregisterIcons, }; diff --git a/packages/sanddance-embed/src/sanddance-embed.ts b/packages/sanddance-embed/src/sanddance-embed.ts index daa40782..10b3bb9f 100644 --- a/packages/sanddance-embed/src/sanddance-embed.ts +++ b/packages/sanddance-embed/src/sanddance-embed.ts @@ -7,6 +7,7 @@ namespace SandDanceEmbed { declare let vega: SandDanceExplorer.SandDance.VegaMorphCharts.types.VegaBase; declare let FluentUIReact: _FluentUI.FluentUIComponents; + declare let FluentUIIcons: _FluentUIIcons.FluentUIIconsBase; interface DataWithInsight { data: DataToLoad; @@ -38,6 +39,10 @@ namespace SandDanceEmbed { const create = () => { creating = true; prepare.then(() => { + if (typeof FluentUIIcons !== 'undefined' && FluentUIIcons) { + FluentUIIcons.use(FluentUIReact.registerIcons, FluentUIReact.unregisterIcons); + FluentUIIcons.initializeIcons(); + } SandDanceExplorer.use(FluentUIReact, React, ReactDOM, vega); const theme = props?.theme || ''; diff --git a/streamlit/streamlit_sanddance/frontend/src/fluentUIComponents.ts b/streamlit/streamlit_sanddance/frontend/src/fluentUIComponents.ts index f38e44a0..b94c7a50 100644 --- a/streamlit/streamlit_sanddance/frontend/src/fluentUIComponents.ts +++ b/streamlit/streamlit_sanddance/frontend/src/fluentUIComponents.ts @@ -17,7 +17,7 @@ import { Customizer } from '@fluentui/react/lib/Utilities'; import { Dialog, DialogFooter, DialogType } from '@fluentui/react/lib/Dialog'; import { Dropdown, DropdownMenuItemType } from '@fluentui/react/lib/Dropdown'; import { FluentUIComponents } from '@msrvida/fluentui-react-cdn-typings'; -import { getFocusStyle, getTheme, loadTheme, registerIcons } from '@fluentui/react/lib/Styling'; +import { getFocusStyle, getTheme, loadTheme, registerIcons, unregisterIcons } from '@fluentui/react/lib/Styling'; import { Icon } from '@fluentui/react/lib/Icon'; import { initializeIcons, use } from '@msrvida/fluentui-icons'; import { Label } from '@fluentui/react/lib/Label'; @@ -27,7 +27,7 @@ import { Spinner, SpinnerSize } from '@fluentui/react/lib/Spinner'; import { TextField } from '@fluentui/react/lib/TextField'; import { Toggle } from '@fluentui/react/lib/Toggle'; -use(registerIcons); +use(registerIcons, unregisterIcons); initializeIcons(); export const fluentUI: FluentUIComponents = { @@ -57,4 +57,5 @@ export const fluentUI: FluentUIComponents = { TextField: TextField as any, Toggle: Toggle as any, registerIcons, + unregisterIcons, }; From 96eae222361c912b08062df4eab0e2c52fbebd5d Mon Sep 17 00:00:00 2001 From: Dan Marshall Date: Sat, 7 Jun 2025 12:34:26 -0700 Subject: [PATCH 07/10] add fluenui-icons to deps, fix paths --- packages/sanddance-embed/src/deps.ts | 15 +++++++++++---- .../sanddance-embed/test/standalone/test.html | 15 +++++++++++---- .../sanddance-embed/test/static-deps/target.html | 15 +++++++++++---- 3 files changed, 33 insertions(+), 12 deletions(-) diff --git a/packages/sanddance-embed/src/deps.ts b/packages/sanddance-embed/src/deps.ts index 968a533e..1594cad8 100644 --- a/packages/sanddance-embed/src/deps.ts +++ b/packages/sanddance-embed/src/deps.ts @@ -24,31 +24,38 @@ namespace SandDanceEmbed { { type: 'script', url: `${localDev - ? '../../node_modules/react' + ? '../../../../node_modules/react' : 'https://unpkg.com/react@17' }/umd/react.${minified ? 'production.min' : 'development'}.js`, }, { type: 'script', url: `${localDev - ? '../../node_modules/react-dom' + ? '../../../../node_modules/react-dom' : 'https://unpkg.com/react-dom@17' }/umd/react-dom.${minified ? 'production.min' : 'development'}.js`, }, { type: 'script', url: `${localDev - ? '../../node_modules/vega' + ? '../../../../node_modules/vega' : 'https://unpkg.com/vega@5.32' }/build/vega${minified ? '.min' : ''}.js`, }, { type: 'script', url: `${localDev - ? '../../node_modules/@fluentui/react' + ? '../../../../node_modules/@fluentui/react' : 'https://unpkg.com/@fluentui/react@8' }/dist/fluentui-react.js`, }, + { + type: 'script', + url: `${localDev + ? '../../../fluentui-icons' + : 'https://unpkg.com/@msrvida/fluentui-icons@1' + }/dist/umd/fluentui-icons.js`, + }, { type: 'script', url: `${localDev diff --git a/packages/sanddance-embed/test/standalone/test.html b/packages/sanddance-embed/test/standalone/test.html index cd711875..c7908cb4 100644 --- a/packages/sanddance-embed/test/standalone/test.html +++ b/packages/sanddance-embed/test/standalone/test.html @@ -8,11 +8,18 @@ - - - - + + + + + + - - - + + + + + + \ No newline at end of file From eb920571a0de0627eeaf8356518c838c01504e1c Mon Sep 17 00:00:00 2001 From: Dan Marshall Date: Sat, 7 Jun 2025 12:34:51 -0700 Subject: [PATCH 08/10] add FluentUIIcons declaration --- packages/sanddance-embed/src/types/fluentUI-icons.d.ts | 8 ++++++++ 1 file changed, 8 insertions(+) create mode 100644 packages/sanddance-embed/src/types/fluentUI-icons.d.ts diff --git a/packages/sanddance-embed/src/types/fluentUI-icons.d.ts b/packages/sanddance-embed/src/types/fluentUI-icons.d.ts new file mode 100644 index 00000000..2527c94e --- /dev/null +++ b/packages/sanddance-embed/src/types/fluentUI-icons.d.ts @@ -0,0 +1,8 @@ +import { initializeIcons, use } from '@msrvida/fluentui-icons'; + +export interface FluentUIIconsBase { + initializeIcons: typeof initializeIcons; + use: typeof use; +} + +export as namespace _FluentUIIcons; From 521f781fe2a0f118b9df12ad3de8895809d0c42d Mon Sep 17 00:00:00 2001 From: Dan Marshall Date: Sat, 7 Jun 2025 12:36:29 -0700 Subject: [PATCH 09/10] add icons to hosted version --- docs/embed/v4/sanddance-embed.html | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/embed/v4/sanddance-embed.html b/docs/embed/v4/sanddance-embed.html index b34d4b23..0fffe506 100644 --- a/docs/embed/v4/sanddance-embed.html +++ b/docs/embed/v4/sanddance-embed.html @@ -12,6 +12,7 @@ + From 2a1c6df2006fe06d295add16416c51aab91348b8 Mon Sep 17 00:00:00 2001 From: Dan Marshall Date: Sat, 7 Jun 2025 12:36:51 -0700 Subject: [PATCH 10/10] version bump --- packages/fluentui-icons/package.json | 2 +- packages/fluentui-react-cdn-typings/package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/fluentui-icons/package.json b/packages/fluentui-icons/package.json index 2c99017f..4f4fe38d 100644 --- a/packages/fluentui-icons/package.json +++ b/packages/fluentui-icons/package.json @@ -1,6 +1,6 @@ { "name": "@msrvida/fluentui-icons", - "version": "1.0.1", + "version": "1.0.2", "description": "Fluent UI icons for use in MsrVida data visualization applications.", "main": "dist/es6/index.js", "types": "dist/es6/index.d.ts", diff --git a/packages/fluentui-react-cdn-typings/package.json b/packages/fluentui-react-cdn-typings/package.json index 01a8c273..5553be70 100644 --- a/packages/fluentui-react-cdn-typings/package.json +++ b/packages/fluentui-react-cdn-typings/package.json @@ -1,6 +1,6 @@ { "name": "@msrvida/fluentui-react-cdn-typings", - "version": "2.0.1", + "version": "2.1.0", "description": "", "main": "index.js", "repository": {