mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-11-30 11:08:45 +08:00
remove namespace & prefix
This commit is contained in:
parent
96b38dd3ec
commit
c523ae37b8
@ -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;
|
||||
|
@ -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();
|
||||
|
@ -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
|
||||
);
|
||||
|
@ -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`.
|
||||
|
||||
|
@ -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/) 项目中的图标符号集,无需手动引入。
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user