test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-11-30 02:59:04 +08:00
Code Issues Actions 68 Packages Projects Releases Wiki Activity

make <CustomIcon/> as an inner component in <Icon/>

Browse Source
This commit is contained in:
HeskeyBaozi 2018-07-19 12:23:33 +08:00
parent 220b4f59bb
commit 3bf122abac
3 changed files with 22 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
components/custom-icon/index.tsx → components/icon/CustomIcon.tsx
View File

@ -1,8 +1,8 @@
import * as React from 'react';
import classNames from 'classnames';
import { Omit } from '../_util/type';
import omit from 'omit.js';
import { IconProps } from '../icon';
import { Omit } from '../_util/type';
import { IconProps } from './index';
export interface CustomIconProps extends Omit<IconProps, 'type'> {
src?: string;
@ -46,18 +46,13 @@ const CustomIcon: React.SFC<CustomIconProps> = (props) => {
const customCache = new Set<string>();
export type CustomIconType = React.SFC<CustomIconProps> & { create: typeof create };
(CustomIcon as CustomIconType)
.create = create;
export interface CustomIconOptions {
namespace?: string;
prefix?: string;
scriptLink?: string;
}
function create(options: CustomIconOptions = {}): React.ComponentClass<IconProps> {
export function create(options: CustomIconOptions = {}): React.ComponentClass<IconProps> {
const { namespace, prefix = '', scriptLink } = options;
class Custom extends React.Component<IconProps> {
@ -83,6 +78,7 @@ function create(options: CustomIconOptions = {}): React.ComponentClass<IconProps
componentDidMount() {
/**
* DOM API required.
* The Custom Icon will create a <script/>
* that loads SVG symbols and insert the SVG Element into the document body.
*/
@ -103,4 +99,4 @@ function create(options: CustomIconOptions = {}): React.ComponentClass<IconProps
return Custom;
}
export default CustomIcon as CustomIconType;
export default CustomIcon;

21
components/icon/index.tsx
View File

@ -1,10 +1,11 @@
import * as React from 'react';
import classNames from 'classnames';
import omit from 'omit.js';
import { library, antDesignIcons } from 'antd-icons';
import AntdIcon from 'react-antd-icons';
import { antDesignIcons } from '@ant-design/icons';
import AntdIcon from '@ant-design/icons-react';
import CustomIcon, { create } from './CustomIcon';
library.add(...antDesignIcons);
AntdIcon.library.add(...antDesignIcons);
export interface IconProps {
type: string;
@ -15,13 +16,21 @@ export interface IconProps {
style?: React.CSSProperties;
}
const Icon = (props: IconProps) => {
const Icon: React.SFC<IconProps> = (props: IconProps) => {
const { type, className = '', spin } = props;
const classString = classNames({
anticon: true,
'anticon-spin': !!spin || type === 'loading',
}, className);
return <AntdIcon {...omit(props, ['spin'])} className={classString} />;
return <AntdIcon {...omit(props, ['spin'])} className={classString}/>;
};
export default Icon;
export type IconType = React.SFC<IconProps> & {
CustomIcon: typeof CustomIcon;
create: typeof create;
};
(Icon as IconType).CustomIcon = CustomIcon;
(Icon as IconType).create = create;
export default Icon as IconType;

4
package.json
View File

@ -39,7 +39,8 @@
"react-dom": ">=16.0.0"
},
"dependencies": {
"antd-icons": "^0.1.0-alpha.1",
"@ant-design/icons": "^0.1.0-alpha.2",
"@ant-design/icons-react": "^0.1.0-alpha.5",
"array-tree-filter": "^2.0.0",
"babel-runtime": "6.x",
"classnames": "~2.2.0",
@ -83,7 +84,6 @@
"rc-trigger": "^2.5.4",
"rc-upload": "~2.5.0",
"rc-util": "^4.0.4",
"react-antd-icons": "^0.1.0-alpha.5",
"react-lazy-load": "^3.0.12",
"react-lifecycles-compat": "^3.0.4",
"react-slick": "~0.23.1",