Add react icon component (#124)

* Improve icon element DOM tree

* Add icon style

* Fix styles for  slots with icon

* Export the icon

* Add the react icon component

* Allow to register icons using the react component

* Fix tests

* Fix format

* Sanitize icon SVG strings

* Update button icon snapshots

---------

Co-authored-by: Frédéric Collonval <fcollonval@users.noreply.github.com>

Author: fcollonval

.github/workflows/build.yml

@@ -48,7 +48,9 @@ jobs:
             yarn-
 
       - name: Install dependencies
-        run: python -m pip install -U jupyterlab~=4.0
+        # Use JLab 4.0.x branch because otherwise this will not bring
+        # the current toolkit version but the core version one.
+        run: python -m pip install -U jupyterlab~=4.0.0
       - name: Build the extension
         run: |
           set -eux
@@ -94,6 +96,6 @@ jobs:
           sudo rm -rf $(which node)
           sudo rm -rf $(which node)
           pip install myextension.tar.gz
-          pip install jupyterlab
+          pip install "jupyterlab~=4.0.0"
           jupyter labextension list 2>&1 | grep -ie "jupyter-ui-demo.*enabled"
           python -m jupyterlab.browser_check --no-browser-test

binder/environment.yml

@@ -12,8 +12,8 @@ channels:
 dependencies:
   # runtime dependencies
   - python >=3.10,<3.11.0a0
-  - jupyterlab >=4.0.0,<5
+  - jupyterlab >=4.0.0,<4.1.0
   # labextension build dependencies
-  - nodejs >=18,<19
+  - nodejs >=20,<21
   - pip
   - wheel

packages/components/src/breadcrumb-item/breadcrumb-item.styles.ts

@@ -119,7 +119,8 @@ export const breadcrumbItemStyles: FoundationElementTemplate<
         display: flex;
     }
 
-    ::slotted(svg) {
+    ::slotted(svg),
+    ::slotted(jp-icon) {
         /* TODO: adaptive typography https://github.com/microsoft/fast/issues/2432 */
         width: 16px;
         height: 16px;