fn-ui-avatars 1.0.0 → 1.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +16 -1
- package/package.json +5 -5
package/README.md
CHANGED
|
@@ -35,6 +35,20 @@ Add `data-name` to any `<img>` element and call `loadAvatars()` after the DOM is
|
|
|
35
35
|
</script>
|
|
36
36
|
```
|
|
37
37
|
|
|
38
|
+
### Via CDN (No bundler required)
|
|
39
|
+
|
|
40
|
+
If you are not using a build tool, you can import it directly from unpkg:
|
|
41
|
+
|
|
42
|
+
```html
|
|
43
|
+
<script type="module">
|
|
44
|
+
import { loadAvatars } from 'https://unpkg.com/fn-ui-avatars/dist/index.js';
|
|
45
|
+
|
|
46
|
+
document.addEventListener('DOMContentLoaded', () => {
|
|
47
|
+
loadAvatars();
|
|
48
|
+
});
|
|
49
|
+
</script>
|
|
50
|
+
```
|
|
51
|
+
|
|
38
52
|
### Generate a single URL
|
|
39
53
|
|
|
40
54
|
```js
|
|
@@ -83,7 +97,7 @@ Returns a UI-Avatars URL string for the given name.
|
|
|
83
97
|
| `fontSize` | `number` | `0.33` | Font size ratio (`0.1`–`1`). |
|
|
84
98
|
| `length` | `number` | `2` | Number of initials to display. |
|
|
85
99
|
| `rounded` | `boolean` | `true` | Circular avatar. |
|
|
86
|
-
| `color` | `string` | `'fff'` | Text color (hex without `#`). |
|
|
100
|
+
| `color` | `string` | `'fff'` | Text color (hex without `#`). Automatically outputs 'fff' or '000' for best contrast, unless overridden. |
|
|
87
101
|
| `format` | `string` | `'svg'` | Image format: `'svg'` or `'png'`. |
|
|
88
102
|
| `baseUrl` | `string` | `'https://eu.ui-avatars.com/api/'` | Custom API base URL. |
|
|
89
103
|
|
|
@@ -122,6 +136,7 @@ Each name is hashed with a simple djb2-style algorithm, and the resulting intege
|
|
|
122
136
|
|
|
123
137
|
- The same name **always** gets the same color.
|
|
124
138
|
- Different names get visually distinct colors.
|
|
139
|
+
- The text color automatically adapts to be legible on light or dark backgrounds.
|
|
125
140
|
- No configuration or storage required.
|
|
126
141
|
|
|
127
142
|
---
|
package/package.json
CHANGED
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "fn-ui-avatars",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.2",
|
|
4
4
|
"description": "Automatically generate consistent, colorful avatars using UI-Avatars API",
|
|
5
|
-
"main": "./dist/index.
|
|
6
|
-
"module": "./dist/index.
|
|
5
|
+
"main": "./dist/index.cjs",
|
|
6
|
+
"module": "./dist/index.js",
|
|
7
7
|
"types": "./dist/index.d.ts",
|
|
8
8
|
"type": "module",
|
|
9
9
|
"exports": {
|
|
10
10
|
".": {
|
|
11
11
|
"types": "./dist/index.d.ts",
|
|
12
|
-
"import": "./dist/index.
|
|
13
|
-
"require": "./dist/index.
|
|
12
|
+
"import": "./dist/index.js",
|
|
13
|
+
"require": "./dist/index.cjs"
|
|
14
14
|
}
|
|
15
15
|
},
|
|
16
16
|
"files": [
|