ui-avatar

UI Avatar Web Component 😍

This is a pure web component with no dependencies for ui avatars. It is built using StencilJS.

Example usage:

  <ui-avatar name="Andre Garzia"></ui-avatar>

  <ui-avatar name="Andre Garzia" rounded></ui-avatar>

  <ui-avatar name="Andre Garzia" color="ff00ff"></ui-avatar>

  <ui-avatar name="Andre Garzia" background="a0a0a0"></ui-avatar>

  <ui-avatar name="Andre Garzia" size="96"></ui-avatar>

Generates:

Getting Started

Setup and first run:

npm install
npm start

To watch for file changes during develop, run:

npm run dev

To build the component for production, run:

npm run build

To run the unit tests for the components, run:

npm test

Need help with Stencil? Check out our docs here.

Using this component

Script tag

• Publish to NPM
• Put a script tag similar to this <script src='https://unpkg.com/ui-avatar@0.0.3/dist/uiavatar.js'></script> in the head of your index.html
• Then you can use the element anywhere in your template, JSX, html etc

Node Modules

• Run npm install my-name --save
• Put a script tag similar to this <script src='node_modules/ui-avatar/dist/ui-avatar.js></script> in the head of your index.html
• Then you can use the element anywhere in your template, JSX, html etc

In a stencil-starter app

• Run npm install ui-avatar --save
• Add { name: 'ui-avatar' } to your collections
• Then you can use the element anywhere in your template, JSX, html etc