antd源碼解讀（2）- Icon

Icon

icon做爲開發當中使用相對頻繁的一個組件，其實現也很簡單，可是其中比較麻煩的一部分是icon字體的製做，能夠參看這篇文章。

Antd的Icon組件使用了很簡單的css來實現交互與動效

import React from 'react';
import classNames from 'classnames';  
import omit from 'omit.js';
//classNames是條件判斷輸出className的值
//omit是移出對象的指定屬性，而實現淺拷貝

//定義IconProps接口
export interface IconProps {
  type: string;
  className?: string;
  title?: string;
  onClick?: React.MouseEventHandler<any>;
  spin?: boolean;
  style?: React.CSSProperties;
}

const Icon = (props: IconProps) => {
  const { type, className = '', spin } = props;
  const classString = classNames({
    anticon: true,
    'anticon-spin': !!spin || type === 'loading', // 是否須要旋轉動畫，loading這個icon是默認加上旋轉動效的
    [`anticon-${type}`]: true,
  }, className);

  // 這裏說一下爲何要用omit()：html的<i>標籤，其標準標籤屬性只有六種：id、class、title、style、dir、lang。
  // IconProps接口中的6種屬性（方法），type、spin不屬於上述六種。onClick爲事件屬性，能夠；
  return <i {...omit(props, ['type', 'spin'])} className={classString} />;
};

export default Icon;

你們也能夠根據上面所提供的製做icon的方法和這樣的方式來實現本身的Icon組件