fix: 自定义 icon 支持跨域 close #2513 (#2524)

* fix: 自定义 icon 支持跨域 close #2513 * docs: 更新序号文档
antvis · Jan 23, 2024 · d0e512c · d0e512c
1 parent c772c2a
commit d0e512c
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 5 deletions.
diff --git a/packages/s2-core/__tests__/unit/common/icons/gui-icon-spec.ts b/packages/s2-core/__tests__/unit/common/icons/gui-icon-spec.ts
@@ -1,6 +1,6 @@
 import { Group, Shape } from '@antv/g-canvas';
 import { registerIcon } from '../../../../src/common/icons';
-import { sleep } from '../../../util/helpers';
+import { createPivotSheet, sleep } from '../../../util/helpers';
 import { GuiIcon } from '@/common/icons/gui-icon';
 import { ArrowDown } from '@/common/icons/svg/svgs';
 
@@ -100,4 +100,42 @@ describe('GuiIcon Tests', () => {
     icon.setImageAttrs({ fill: 'red' });
     expect(spy).toHaveBeenCalled();
   });
+
+  // https://github.com/antvis/S2/issues/2513
+  test('should support cross origin for online url', () => {
+    const s2 = createPivotSheet({
+      width: 200,
+      height: 200,
+      customSVGIcons: [
+        {
+          name: 'Filter',
+          svg: 'https://gw.alipayobjects.com/zos/antfincdn/gu1Fsz3fw0/filter%26sort_filter.svg',
+        },
+      ],
+      headerActionIcons: [
+        {
+          iconNames: ['Filter'],
+          belongsCell: 'colCell',
+          defaultHide: false,
+        },
+        {
+          iconNames: ['Filter'],
+          belongsCell: 'rowCell',
+          defaultHide: false,
+        },
+        {
+          iconNames: ['Filter'],
+          belongsCell: 'cornerCell',
+          defaultHide: false,
+        },
+      ],
+    });
+
+    function render() {
+      s2.render();
+      s2.getCanvasElement().toDataURL();
+    }
+
+    expect(render).not.toThrowError();
+  });
 });
diff --git a/packages/s2-core/src/common/icons/gui-icon.ts b/packages/s2-core/src/common/icons/gui-icon.ts
@@ -57,6 +57,8 @@ export class GuiIcon extends Group {
       // 3、线上支持的图片地址
       if (svg.includes(SVG_CONTENT_TYPE) || this.isOnlineLink(svg)) {
         img.src = svg;
+        // https://github.com/antvis/S2/issues/2513
+        img.crossOrigin = 'anonymous';
       } else {
         // 传入 svg 字符串（支持颜色fill）
         if (fill) {

diff --git a/s2-site/docs/manual/basic/sheet-type/table-mode.zh.md b/s2-site/docs/manual/basic/sheet-type/table-mode.zh.md
@@ -101,12 +101,11 @@ s2.render();
 
 ### 序号
 
-在 `s2Options` 中传入 `showSeriesNumber` 即可展示内置的序号，可以自定义序号列标题。[查看 demo](/examples/basic/table#table)
+在 `s2Options` 中传入 `showSeriesNumber` 即可展示内置的序号。[查看 demo](/examples/basic/table#table)
 
 ```ts
 const s2Options = {
-  showSeriesNumber: true,
-  seriesNumberText: '自定义序号标题' // 默认 "序号"
+  showSeriesNumber: true
 }
 ```
 

diff --git a/s2-site/examples/basic/table/demo/table.ts b/s2-site/examples/basic/table/demo/table.ts
@@ -37,7 +37,6 @@ fetch('https://assets.antv.antgroup.com/s2/basic-table-mode.json')
       width: 600,
       height: 480,
       showSeriesNumber: true,
-      // seriesNumberText: '自定义序号标题',
     };
 
     const s2 = new TableSheet(container, s2DataConfig, s2Options);