remove namespace & prefix

This commit is contained in:
HeskeyBaozi 2018-08-21 18:41:35 +08:00
parent 96b38dd3ec
commit c523ae37b8
5 changed files with 13 additions and 24 deletions

View File

@ -4,14 +4,12 @@ import * as React from 'react';
const customCache = new Set<string>();
export interface CustomIconOptions {
namespace?: string;
prefix?: string;
scriptUrl?: string;
extraCommonProps?: { [key: string]: any };
}
export default function create(options: CustomIconOptions = {}): React.SFC<IconProps> {
const { namespace, prefix = '', scriptUrl, extraCommonProps = {} } = options;
const { scriptUrl, extraCommonProps = {} } = options;
/**
* DOM API required.
@ -22,13 +20,12 @@ export default function create(options: CustomIconOptions = {}): React.SFC<IconP
if (typeof document !== 'undefined' && typeof window !== 'undefined'
&& typeof document.createElement === 'function'
&& typeof scriptUrl === 'string' && scriptUrl.length
&& typeof namespace === 'string' && namespace.length
&& !customCache.has(namespace)
&& !customCache.has(scriptUrl)
) {
const script = document.createElement('script');
script.setAttribute('src', `https:${scriptUrl}`);
script.setAttribute('data-namespace', namespace);
customCache.add(namespace);
script.setAttribute('data-namespace', scriptUrl);
customCache.add(scriptUrl);
document.body.appendChild(script);
}
@ -38,7 +35,7 @@ export default function create(options: CustomIconOptions = {}): React.SFC<IconP
// component > children > type
let content = null;
if (props.type) {
content = <use xlinkHref={`#${prefix}${type}`} />;
content = <use xlinkHref={`#${type}`} />;
}
if (props.children) {
content = props.children;

View File

@ -90,17 +90,15 @@ describe('Icon', () => {
describe('Icon.createFromIconfontCN()', () => {
const IconFont = Icon.createFromIconfontCN({
namespace: 'iconfont-foo',
scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js',
prefix: 'icon-',
});
it('should support iconfont.cn', () => {
const wrapper = render(
<div className="icons-list">
<IconFont type="tuichu" />
<IconFont type="facebook" />
<IconFont type="twitter" />
<IconFont type="icon-tuichu" />
<IconFont type="icon-facebook" />
<IconFont type="icon-twitter" />
</div>
);
expect(wrapper).toMatchSnapshot();

View File

@ -17,16 +17,14 @@ If you are using [iconfont.cn](http://iconfont.cn/), you can use the icons in yo
import { Icon } from 'antd';
const IconFont = Icon.createFromIconfontCN({
namespace: 'iconfont-foo',
scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js',
prefix: 'icon-',
});
ReactDOM.render(
<div className="icons-list">
<IconFont type="tuichu" />
<IconFont type="facebook" />
<IconFont type="twitter" />
<IconFont type="icon-tuichu" />
<IconFont type="icon-facebook" />
<IconFont type="icon-twitter" />
</div>,
mountNode
);

View File

@ -134,10 +134,8 @@ The following options are available:
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| prefix | The prefix of the icon set. It ends with `-` generally, like `icon-`、`foo-` | string | '' |
| extraCommonProps | Define extra properties to the component | `{ [key: string]: any }` | {} |
| namespace | The namespace of the icon set, used as identifier. | string | - |
| scriptUrl | The URL generated by [iconfont.cn](http://iconfont.cn/) project. | string | - |
| extraCommonProps | Define extra properties to the component | `{ [key: string]: any }` | {} |
The property `scriptUrl` should be set together with property `namespace`.

View File

@ -134,10 +134,8 @@ ReactDOM.render(<MyIcon type="example" />, mountedNode);
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| prefix | 设置图标的前缀,通常以短横线结尾,如 `icon-`、`foo-` | string | '' |
| extraCommonProps | 给所有的 `svg` 图标 `<Icon />` 组件设置额外的属性 | `{ [key: string]: any }` | {} |
| namespace | 图标集合的名字空间,在 `scriptUrl` 也设置的情况下有效,用于区分已导入的图标符号集合 | string | - |
| scriptUrl | [iconfont.cn](http://iconfont.cn/) 项目在线生成的 `js` 地址,在 `namespace` 也设置的情况下有效 | string | - |
| extraCommonProps | 给所有的 `svg` 图标 `<Icon />` 组件设置额外的属性 | `{ [key: string]: any }` | {} |
`namespace``scriptUrl` 都设置有效的情况下,组件在渲染前会自动引入 [iconfont.cn](http://iconfont.cn/) 项目中的图标符号集,无需手动引入。