The m3e-avatar component is a reusable identity primitive that displays visual or textual representation with consistent sizing, shape, and typography.

npm i @m3e/avatar

The m3e-avatar component accepts multiple content types, allowing it to render textual initials, images, or icons depending on what is provided in its slot.

AB

<m3e-avatar>AB</m3e-avatar>
<m3e-avatar>
  <img src="[YOUR IMAGE URL HERE]" />
</m3e-avatar>
<m3e-avatar>
  <m3e-icon name="person"></m3e-icon>
</m3e-avatar>

By default, avatars are not given an ARIA role, indicating that they are treated as neutral, non-semantic elements in the accessibility tree unless explicitly referenced or annotated.

This package uses JavaScript Modules. To use it directly in a browser without a bundler, use a module script similar to the following.

<script type="module" src="/node_modules/@m3e/avatar/dist/index.js"></script>

In addition, you must use an import map to include additional dependencies.

<script type="importmap">
  {
    "imports": {
      "lit": "https://cdn.jsdelivr.net/npm/lit@3.3.0/+esm",
      "@m3e/core": "/node_modules/@m3e/core/dist/index.js"

    }
  }
</script>

For production, use index.min.js for faster load times.

This package includes a Custom Elements Manifest (custom-elements.json), which documents the properties, attributes, slots, events and CSS custom properties of each component.

You can explore the API below, or integrate the manifest into your own tooling.