npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@hecom/image-avatar

v2.0.12

Published

Avatar Image Component

Downloads

13

Readme

AvatarImage

npm version Build Status

这是一个正多边形头像组件,是支持群组头像。

screen 群组头像最多支持显示四个成员。

关于默认头像

未设置远程头像路径时,如果名字中有中文,则获取最后一个中文字符;如果没有中文,则获取第一个字符,作为头像文字

可用属性

|属性名|类型|默认值|说明| |-----|----|-----|----| |user|User|undefined|人员对象,单人头像时的快捷属性| |users|User[]|[]|人员数组,群组头像时使用,如果users.length大于0,user属性不生效| |size|number|48|视图的宽高| |radius|number|size/12|圆角大小(使用二次贝塞尔曲线实现)| |sepWidth|number|1|群组头像时内部分隔线的宽度| |colors|string[]|['#3EAAFF', '#47C2E7', '#FD6364', '#FDC63F', '#BEE15D', '#28D9C1', '#FF9D50']|默认头像背景色| |defOuterBorderColors|string[]|['#CBE7FF', '#DAF6FF', '#FFE1E1', '#FCF1D8', '#E6F5BE', '#D3F9F4', '#FFE4CD']|默认头像边框颜色| |renderAvatar|func|undefined|自定义头像渲染方法| |getThumbUrl|func|undefined|(url:string)=> string,获取缩略图方法| |numberOfSides|number|6|正多边形边数| |borderEnable|boolean|false|是否使用边框| |border|Border|undefined|边框参数|

User类型

    interface User {
        code: number // 编号,用于确定默认头像颜色
        name: string // 名称
        avatar?: string // 头像
    }

Border类型

    interface Border {
        innerBorderWidth?: number // 内边框宽度,默认:1
        innerBorderColor?: string // 内边框颜色,默认:#FFFFFF
        outerBorderWidth?: number // 外边框宽度,默认:2
        outerBorderColor?: string // 外边框颜色,默认:#F1F1F1
        borderSpace?: number // 内外边框间距,默认:size / 24
    }