@ppci-mock/custom-avatar

Avatar

Table of contents

1. Installation
2. Usage
3. Styling
4. Properties

Installation

NPM

npm i @ppci-mock/custom-avatar

// Polyfill: https://lit-element.polymer-project.org/guide/use#polyfills
npm i --save-dev @webcomponents/webcomponentsjs

Usage

Javascript

import '@ppci-mock/custom-avatar'

Browser

<!-- Default -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@ppci-mock/custom-avatar/builds/index.min.js" />

<!-- Legacy -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@ppci-mock/custom-avatar/builds/legacy.min.js" />

<!-- Component -->
<custom-avatar
  image="String"
  showIcon="Boolean"
></custom-avatar>

Styling

custom-avatar {
  --image-size: 48px;
  --border-radius: 50%;

  /* iconmoon for example */
  --icon-font-family: iconmoon;
  
  /* iconmoon icon code */
  --icon-content: '\e90b'
  --icon-size: 20px;
  --icon-border-radius: 50%;
  --icon-offset-x: -4px;
  --icon-color: white;
  --icon-background: gray;
}

Properties

Property	Type	Description	Possible Values
*Image*	String	Path to image
showIcon	boolean	Show or hide icon	```html ```