Avatar generated by name text based on svg dataURI.
npm install namedavatarAvatar generated by name text based on svg.
Fill as data uri into the src, no added element.
如果用户没有个性头像,就填充用户名生成的头像。
程序会在 上填充data URI,没有额外添加元素。
!demo
``bash`
npm install namedavatar --save
namedavatar is a UMD module, support Browser, Requirejs, Vue2 directive, miniprogram(小程序).
> NOTE that the width and border-radius: 100% requires you additional settings, the program is not set.
`html![]()
`
if img.src invalid, img#avatar1 will be:`html`
`javascript
import namedavatar from 'namedavatar'
// create svg html string without DOM
const svg = namedavatar.getSVGString('李连杰')
const uri = namedavatar.getDataURI(svg)
console.log(uri)
// data:image/svg+xml,%3Csvg%20...
`
javascript
import { directive } from 'namedavatar/vue'
// register v-avatar="Tom Hanks", show firstName (default)
Vue.directive('avatar', directive);// or set options and same as above
import namedavatarVue from 'namedavatar/vue'
// register v-avatar="Tom Hanks", show lastName
Vue.use(namedavatarVue, {
nameType: 'lastName'
})
`in vue template
`html
![]()
`API
$3
| filed | type | default | description |
| -------- | ------ | ------- | ---------------- |
| nameType | string |
'firstName' | pick from: firstName, lastName, initials |
| fontFamily | string | 'Verdana, Geneva, sans-serif' | font family |
| backgroundColors | Array | Material Design colors *-500 | random background color list |
| textColor | string | '#FFF' | name text color |
| minFontSize | number | 8 | min font size limit |
| maxFontSize | number | 16 | max font size limit |$3
-
name the full name value
- options extended optionsreturn