/*
 * @Author: your name
 * @Date: 2021-12-08 10:07:14
 * @Description:
 * @FilePath: /zl-business/src/components/Icon/index.tsx
 */

import React from 'react';
import '../../style/iconfont';
import '../../style/style.css';

export interface IIcon {
  name: string;
  classname?: string;
  style?: React.CSSProperties;
  click?: Function;
  doubleClick?: Function;
  mouseDown?: Function;
}

const Icon: React.FC<IIcon> = ({
  style,
  name,
  classname = '',
  click,
  doubleClick,
  mouseDown
}) => {
  return name?.startsWith('custom-icon-') ? (
    <span
      onClick={(e) => click?.(name, e)}
      style={{ ...style }}
      className={`zl-icon-font ${classname} ${name}`}
    />
  ) : (
    <svg
      onDoubleClick={() => doubleClick?.()}
      onClick={(e) => click?.(name, e)}
      onMouseDown={(e) => mouseDown?.(name, e)}
      style={{ ...style }}
      className={`zl-icon ${classname}`}
      aria-hidden="true"
    >
      <use xlinkHref={`#${name}`} />
    </svg>
  );
};

export default Icon;