feat: support layer (#681)

* feat: support layer * chore: bump version
ant-design · Jan 22, 2025 · d694b4a · d694b4a
1 parent 6f00108
commit d694b4a
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 2 deletions.
diff --git a/packages/icons-react/package.json b/packages/icons-react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ant-design/icons",
-  "version": "5.5.1",
+  "version": "5.5.2",
   "repository": "https://github.com/ant-design/ant-design-icons/tree/master/packages/icons-react",
   "license": "MIT",
   "contributors": [

diff --git a/packages/icons-react/src/components/Context.tsx b/packages/icons-react/src/components/Context.tsx
@@ -4,6 +4,7 @@ export interface IconContextProps {
   prefixCls?: string;
   rootClassName?: string;
   csp?: { nonce?: string };
+  layer?: string;
 }
 
 const IconContext = createContext<IconContextProps>({});

diff --git a/packages/icons-react/src/utils.ts b/packages/icons-react/src/utils.ts
@@ -155,13 +155,17 @@ export const iconStyles = `
 `;
 
 export const useInsertStyles = (eleRef: React.RefObject<HTMLElement>) => {
-  const { csp, prefixCls } = useContext(IconContext);
+  const { csp, prefixCls, layer } = useContext(IconContext);
   let mergedStyleStr = iconStyles;
 
   if (prefixCls) {
     mergedStyleStr = mergedStyleStr.replace(/anticon/g, prefixCls);
   }
 
+  if (layer) {
+    mergedStyleStr = `@layer ${layer} {\n${mergedStyleStr}\n}`;
+  }
+
   useEffect(() => {
     const ele = eleRef.current;
     const shadowRoot = getShadowRoot(ele);

diff --git a/packages/icons-react/tests/index.test.tsx b/packages/icons-react/tests/index.test.tsx
@@ -512,4 +512,15 @@ describe('Icon.createFromIconfontCN({scriptUrl:[]})', () => {
     const wrapper = render(<CloseCircleFilled />);
     expect(wrapper).toMatchSnapshot();
   });
+
+  it('should support layer', () => {
+    testingLibRender(
+      <IconProvider value={{ layer: 'test' }}>
+        <HomeOutlined />
+      </IconProvider>,
+    );
+
+    const styleEle = document.querySelector('style')!;
+    expect(styleEle.innerHTML).toContain('@layer test');
+  });
 });