index.tsx 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667
  1. import { use } from '../utils';
  2. import { inherit } from '../utils/functional';
  3. import Info from '../info';
  4. import { isSrc } from '../utils/validate/src';
  5. // Types
  6. import { CreateElement, RenderContext } from 'vue/types';
  7. import { DefaultSlots } from '../utils/use/sfc';
  8. export type IconProps = {
  9. tag: keyof HTMLElementTagNameMap | string;
  10. name: string;
  11. size?: string;
  12. color?: string;
  13. info?: string | number;
  14. classPrefix: string;
  15. };
  16. export type IconEvents = {
  17. onClick?(event: Event): void;
  18. };
  19. const [sfc] = use('icon');
  20. function Icon(
  21. h: CreateElement,
  22. props: IconProps,
  23. slots: DefaultSlots,
  24. ctx: RenderContext<IconProps>
  25. ) {
  26. const urlIcon = isSrc(props.name);
  27. return (
  28. <props.tag
  29. class={[
  30. props.classPrefix,
  31. urlIcon ? 'van-icon--image' : `${props.classPrefix}-${props.name}`
  32. ]}
  33. style={{
  34. color: props.color,
  35. fontSize: props.size
  36. }}
  37. {...inherit(ctx, true)}
  38. >
  39. {slots.default && slots.default()}
  40. {urlIcon && <img src={props.name} />}
  41. <Info info={props.info} />
  42. </props.tag>
  43. );
  44. }
  45. Icon.props = {
  46. name: String,
  47. size: String,
  48. color: String,
  49. info: [String, Number],
  50. tag: {
  51. type: String,
  52. default: 'i'
  53. },
  54. classPrefix: {
  55. type: String,
  56. default: 'van-icon'
  57. }
  58. };
  59. export default sfc<IconProps, IconEvents>(Icon);