Svelte Avatar
An avatar component for 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
| 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.
Top categories
Need a Svelte website built?
Hire a professional Svelte developer today.