named avatar

Avatar generated by name text based on svg.
Fill as data uri into the src, no added element.

如果用户没有个性头像，就填充用户名生成的头像。
程序会在 上填充data URI，没有额外添加元素。

!demo

Installtion

``bash
npm install namedavatar --save
`

Usage

namedavatar is a UMD module, support Browser, Requirejs, Vue2 directive, miniprogram（小程序）.

$3

online example

> 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

`

$3

> support like miniprogram(小程序)

`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...
`

$3


online example
main.js
`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 options

return node, get string by svg.outerHTML

$3

> added at 1.1.0 version, special for without DOM like miniprogram(小程序)

- name the full name value
- options extended options

return html string

$3

- img item
- name the full name value

create svg by name, and fill to

$3

- imgs list
- attr pick full name value from special attr, eg 'alt', 'data-name'

create svg by attr value, batch processing setImg()




$3

- html node html string

get data uri (rfc2397) of svg html




Contributing

- IE > 8 (based on svg)
- Continuous improvement, welcome review and suggest

$3

`bash
npm install -g watchify
npm run dev
`

$3

`bash
npm install -g browserify uglifyjs

build UMD bundle and minify

npm run build && npm run minify

build for vue

npm run build:vue
`

$3

`bash
npm install -g mocha
npm run test
``