@_nu/react-avatar

@_nu/react-avatar

npm package	npm downloads	jsdelivr	github

安装

$ npm install @_nu/react-avatar

二次封装

/* @/components/Avatar/index.js */
import Avatar from "@_nu/react-avatar";

// 这里编写自定义的样式
import './style.css';

export default Avatar;

使用

import React from 'react';
import Avatar from "./components/Avatar";
import imgAvatar from '../avatar.jpg';

const AvatarDefault = ({ className = null }) => (
  <svg
    viewBox="0 0 1024 1024"
    xmlns="http://www.w3.org/2000/svg"
    className={className}
  >
    <path d="M512 64a448 448 0 1 0 448 448A448 448 0 0 0 512 64zm0 160a144 144 0 1 1-144 144 143.68 143.68 0 0 1 144-144zm256 573.44a381.76 381.76 0 0 1-512 0v-18.56A166.4 166.4 0 0 1 416 608h192a166.72 166.72 0 0 1 160 169.92v19.52z" />
  </svg>
);

const Page=()=>{
    return (
     <div>
      <Avatar src={imgAvatar} alt="hello" size={24} />
      <Avatar src={imgAvatar} alt="hello" size={40} />
      <Avatar src={imgAvatar} alt="hello" size={32} />
      <Avatar src={imgAvatar} alt="hello" size="auto"  />
      <Avatar placeholder={AvatarDefault} src="123" alt="hello" size="auto"   />
      <Avatar placeholder={AvatarDefault} size="auto" alt="hello" />
     </div>
    );
};

export default Page;

接口

属性	类型	默认值	作用
Component	node	i	容器组件
children	node	-	子元素
className	string	-	class
src	string	-	图片地址
alt	string.isRequired	-	图片描述
size	string | number	'40'	Avatar 尺寸
placeholder	node | string	-	图片加载失败

• size：size={null} 表示头像会撑满整个容器
• placeholder: string 表示图片加载失败用这个作为占位图，

更多

• nu-system