<div class="docs-content" data-render>
# dp-avatar

Renders a circular avatar image from a username seed via the local Multiavatar
service at `/avatar/multiavatar/{seed}`. A thin element wrapper around the `Avatar` helper.

Source: `static/js/components/AppAvatar.js`.

## Attributes

| Attribute | Type | Default | Description |
|---|---|---|---|
| `username` | string | (required) | Seed used to generate and label the avatar. |
| `size` | integer | `24` | Width and height in pixels. |

Both attributes are observed: changing them re-renders the avatar.

## Usage

```html
&lt;dp-avatar username="alice_test" size="64"&gt;&lt;/dp-avatar&gt;
```

No JavaScript is required - the element renders itself on connection.
</div>

<div class="component-demo">
    <div class="component-demo-title">Live example</div>
    <div class="component-demo-stage">
        <dp-avatar username="alice_test" size="32"></dp-avatar>
        <dp-avatar username="bob_test" size="48"></dp-avatar>
        <dp-avatar username="devplace" size="64"></dp-avatar>
    </div>
</div>
<script type="module">
    import "{{ static_url('/static/js/components/AppAvatar.js') }}";
</script>
