Svelte Avatar

A simple avatar component for Svelte.

•

This component display an avatar image with fallback to the name initials. This component is inspired from react-user-avatar and vue-avatar.

Installation

yarn add svelte-avatar

or

npm install svelte-avatar

Note: to use this library in sapper, install as devDependency. See the link.

Usage

with image:

<script>
  import Avatar from "svelte-avatar";
</script>

<Avatar name="John Walker" src="https://avatars0.githubusercontent.com/u/6810985?s=460&u=a2a24f33ad8d17377cef8163f596a7fbd1501cd4&v=4" />

with name:

<script>
  import Avatar from "svelte-avatar";
</script>

<Avatar name="John Walker" />

Prop

Name	Required	Default	Type	Description
style	N	-	String	Style property for avatar wrapper.
name	N	Avatar	String	The name that will be used to compute user initial (when 'src' property not set).
initials	N	-	String	Force the displayed initials by overriding the computed ones.
src	N	-	String	Path to the avatar image to display.
bgColor	N	lightGray	String	The avatar background color to use if no image is provided.
textColor	N	white	String	The font color used to render the user initials.
size	N	50px	String	The avatar size.
borderRadius	N	50%	String	The border-radius css property of avatar.
square	N	false	Boolean	If true, Avatar will be a Square
randomBgColor	N	false	Boolean	If true, Avatar background will be colored randomly

Build Setup

# install dependencies
yarn
# or
npm i

# serve gh pages with hot reload at localhost:5000
yarn dev
# or
npm run dev

# build
yarn build
# or
npm run build

Test

yarn test
# or
npm test

NPM Statistics

Download stats for this NPM package

License

Released under the MIT License.