Fix @gitbook/icons icon rendering (#3877)

.changeset/fruity-trains-tease.md

@@ -0,0 +1,5 @@
+---
+"@gitbook/icons": patch
+---
+
+Fix icon rendering with explicit currentColor on icon element

packages/gitbook/src/components/RootLayout/CustomizationRootLayout.tsx

@@ -29,7 +29,6 @@ import { tcls } from '@/lib/tailwind';
 
 import { RootLayoutClientContexts } from './RootLayoutClientContexts';
 
-import '@gitbook/icons/style.css';
 import './globals.css';
 import type { GitBookAnyContext } from '@/lib/context';
 import { GITBOOK_FONTS_URL, GITBOOK_ICONS_TOKEN, GITBOOK_ICONS_URL } from '@/lib/env';

packages/icons/package.json

@@ -11,8 +11,7 @@
             "types": "./dist/icons.d.ts",
             "development": "./src/icons.ts",
             "default": "./dist/icons.js"
-        },
+        }
-        "./style.css": "./src/style.css"
     },
     "sideEffects": false,
     "version": "0.4.0",

packages/icons/src/Icon.tsx

@@ -63,6 +63,7 @@ export const Icon = React.forwardRef(function Icon(
                 WebkitMaskRepeat: 'no-repeat',
                 maskPosition: 'center',
                 WebkitMaskPosition: 'center',
+                backgroundColor: 'currentColor',
                 ...(size ? { width: size, height: size } : {}),
                 ...rest.style,
             }}

packages/icons/src/style.css

@@ -1,11 +0,0 @@
-/* Normal */
-svg.gb-icon {
-    background-color: currentColor;
-}
-
-/* Sprite */
-svg.gb-icon-s path,
-svg.gb-icon-s use {
-    fill: currentColor;
-    stroke: currentColor;
-}