mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-24 11:10:01 +08:00
Code Issues Actions 25 Packages Projects Releases Wiki Activity

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

Browse Source 
close #12316
This commit is contained in:
qiaojie 2018-09-21 19:07:13 +08:00 committed by 偏右
parent 8d3cb85142
commit 7c67dacc12
5 changed files with 21 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/icon/IconFont.tsx
View File

@ -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);

12
components/icon/__tests__/index.test.js
View File

@ -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);
});
});

2
components/icon/index.en-US.md
View File

@ -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.

2
components/icon/index.zh-CN.md
View File

@ -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/) 项目中的图标符号集，无需手动引入。

5
components/icon/utils.ts
View File

@ -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;
}