https://github.com/wdtamagi/svelte-avatar

An avatar component for Svelte
https://github.com/wdtamagi/svelte-avatar

avatar component hacktoberfest js svelte

Last synced: about 1 month ago
JSON representation

An avatar component for Svelte

• Host: GitHub
• URL: https://github.com/wdtamagi/svelte-avatar
• Owner: wdtamagi
• License: mit
• Created: 2020-05-31T19:09:02.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-01-09T09:06:53.000Z (almost 2 years ago)
• Last Synced: 2024-04-09T01:57:48.260Z (8 months ago)
• Topics: avatar, component, hacktoberfest, js, svelte
• Language: JavaScript
• Homepage: https://svelte-avatar.netlify.app/
• Size: 358 KB
• Stars: 18
• Watchers: 3
• Forks: 2
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-svelte - Svelte Avatar - Componente simples de avatar com fallback para iniciais. (UI Componentes / Comunidade Global)

README

        


  



Svelte Avatar


A simple avatar component for Svelte.









[![npm version](https://badge.fury.io/js/svelte-avatar.svg)](https://www.npmjs.com/package/svelte-avatar) • [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](./LICENSE)

This component display an avatar image with fallback to the name initials. This component is inspired from [react-user-avatar](https://github.com/wbinnssmith/react-user-avatar) and [vue-avatar](https://github.com/eliep/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](https://github.com/sveltejs/sapper-template#using-external-components).

## Usage

![example](./assets/example.png)

with image:

```js

  import Avatar from "svelte-avatar";

```

with name:

```js

  import Avatar from "svelte-avatar";

```

## 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

```bash

# 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

```bash

yarn test

# or

npm test

```

## NPM Statistics

Download stats for this NPM package

[![NPM](https://nodei.co/npm/svelte-avatar.png)](https://nodei.co/npm/svelte-avatar/)

## License

Released under the [MIT](./LICENSE) License.