Feature Icon.createFromIconfontCN adaptive http or https (#12344)

close #12316

components/icon/IconFont.tsx

@@ -1,5 +1,6 @@
 import Icon, { IconProps } from './index';
 import * as React from 'react';
+import { handleSciprtUrl } from './utils';
 
 const customCache = new Set<string>();
 
@@ -22,8 +23,9 @@ export default function create(options: CustomIconOptions = {}): React.SFC<IconP
     && typeof scriptUrl === 'string' && scriptUrl.length
     && !customCache.has(scriptUrl)
   ) {
+    const scriptSrc = handleSciprtUrl(scriptUrl);
     const script = document.createElement('script');
-    script.setAttribute('src', `https:${scriptUrl}`);
+    script.setAttribute('src', scriptSrc);
     script.setAttribute('data-namespace', scriptUrl);
     customCache.add(scriptUrl);
     document.body.appendChild(script);

components/icon/__tests__/index.test.js

@@ -3,7 +3,7 @@ import { render, mount } from 'enzyme';
 import Icon from '..';
 import ReactIcon from '@ant-design/icons-react';
 import Tooltip from '../../tooltip';
-import { getThemeFromTypeName, withThemeSuffix } from '../utils';
+import { getThemeFromTypeName, withThemeSuffix, handleSciprtUrl } from '../utils';
 
 describe('Icon', () => {
   it('should render to a <i class="xxx"><svg>...</svg></i>', () => {
@@ -199,4 +199,14 @@ describe('utils', () => {
         'home-o-fill', 'home-fill-o', 'home-o-twotone', 'home-o']
     );
   });
+
+  it('handleSciprtUrl() should work', () => {
+    const testCases = [
+      { inputUrl: 'http://at.alicdn.com/t/font_8d5l8fzk5b87iudi.js', outputUrl: 'http://at.alicdn.com/t/font_8d5l8fzk5b87iudi.js' },
+      { inputUrl: 'https://at.alicdn.com/t/font_8d5l8fzk5b87iudi.js', outputUrl: 'https://at.alicdn.com/t/font_8d5l8fzk5b87iudi.js' },
+      { inputUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js', outputUrl: 'https://at.alicdn.com/t/font_8d5l8fzk5b87iudi.js' },
+    ];
+    const result = testCases.every(({ inputUrl, outputUrl }) => handleSciprtUrl(inputUrl) === outputUrl);
+    expect(result).toBe(true);
+  });
 });

components/icon/index.en-US.md

@@ -83,7 +83,7 @@ The following options are available:
 
 | Property | Description | Type | Default |
 | --- | --- | --- | --- |
-| scriptUrl | The URL generated by [iconfont.cn](http://iconfont.cn/) project. | string | - |
+| scriptUrl | The URL generated by [iconfont.cn](http://iconfont.cn/) project. support to add http or https prefix, without adding the default https | string | - |
 | extraCommonProps | Define extra properties to the component | `{ [key: string]: any }` | {} |
 
 The property `scriptUrl` should be set to import the svg sprite symbols.

components/icon/index.zh-CN.md

@@ -86,7 +86,7 @@ ReactDOM.render(<MyIcon type="icon-example" />, mountedNode);
 
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| scriptUrl | [iconfont.cn](http://iconfont.cn/) 项目在线生成的 `js` 地址，在 `namespace` 也设置的情况下有效 | string | - |
+| scriptUrl | [iconfont.cn](http://iconfont.cn/) 项目在线生成的 `js` 地址，在 `namespace` 也设置的情况下有效. 支持加http或https前缀，不加默认为https | string | - |
 | extraCommonProps | 给所有的 `svg` 图标 `<Icon />` 组件设置额外的属性 | `{ [key: string]: any }` | {} |
 
 在 `scriptUrl` 都设置有效的情况下，组件在渲染前会自动引入 [iconfont.cn](http://iconfont.cn/) 项目中的图标符号集，无需手动引入。

components/icon/utils.ts

@@ -46,3 +46,8 @@ export function withThemeSuffix(type: string, theme: ThemeType) {
   }
   return result;
 }
+
+export function handleSciprtUrl(url: string): string {
+  const scriptUrl = `${(!/^(https?|http):\/\/.+$/.test(url) && 'https:') || ''}${url}`;
+  return scriptUrl;
+}