Svelte

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

NameRequiredDefaultTypeDescription
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.

Top categories

Loading Svelte Themes