@ppci/custom-avatar
v1.3.5
Published
A custom avatar
Downloads
5
Keywords
Readme
Avatar
Table of contents
Installation
NPM
npm i @ppci/custom-avatar
// Polyfill: https://lit-element.polymer-project.org/guide/use#polyfills
npm i --save-dev @webcomponents/webcomponentsjs
Usage
Javascript
import '@ppci/custom-avatar'
Browser
<!-- Default -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@ppci/custom-avatar/builds/index.min.js" />
<!-- Legacy -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@ppci/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;
}