├── .gitignore ├── rollup.config.js ├── .github └── workflows │ └── publish.yml ├── package.json ├── LICENSE ├── README.md ├── src └── main.js ├── dist ├── ui-avatar-svg.esm.js ├── ui-avatar-svg.cjs.js └── ui-avatar-svg.umd.js └── demo └── index.html /.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | *.lock 3 | -------------------------------------------------------------------------------- /rollup.config.js: -------------------------------------------------------------------------------- 1 | import pkg from './package.json'; 2 | 3 | export default [ 4 | { 5 | input: 'src/main.js', 6 | output: [ 7 | { name: 'UIAvatarSvg', file: pkg.browser, format: 'umd' }, // UMD (for browsers) 8 | { file: pkg.main, format: 'cjs' }, // CommonJS (for Node) 9 | { file: pkg.module, format: 'es' } // ES module (for bundlers) 10 | ] 11 | } 12 | ]; 13 | -------------------------------------------------------------------------------- /.github/workflows/publish.yml: -------------------------------------------------------------------------------- 1 | name: NPM Publish 2 | 3 | on: 4 | release: 5 | types: [created] 6 | 7 | jobs: 8 | build: 9 | runs-on: ubuntu-latest 10 | steps: 11 | - uses: actions/checkout@v2 12 | - uses: actions/setup-node@v1 13 | with: 14 | node-version: 12 15 | registry-url: https://registry.npmjs.org/ 16 | - run: npm publish 17 | env: 18 | NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}} 19 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ui-avatar-svg", 3 | "version": "1.0.0", 4 | "description": "Generate SVG avatars with user initials in pure JS", 5 | "author": "Gilbert Pellegrom ", 6 | "license": "MIT", 7 | "keywords": [ 8 | "avatars", 9 | "ui-avatars", 10 | "initials", 11 | "svg", 12 | "javascript" 13 | ], 14 | "main": "dist/ui-avatar-svg.cjs.js", 15 | "module": "dist/ui-avatar-svg.esm.js", 16 | "browser": "dist/ui-avatar-svg.umd.js", 17 | "scripts": { 18 | "build": "rollup -c", 19 | "dev": "rollup -c -w" 20 | }, 21 | "devDependencies": { 22 | "rollup": "^2.36.1" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Gilbert Pellegrom 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 | 3 |

4 | Version 5 | License 6 |

7 | 8 | # UI Avatar SVG 9 | 10 | Generate SVG avatars with user initials in pure JS. 11 | 12 | ## Usage 13 | 14 | Generate avatars using a flexible API: 15 | 16 | ```js 17 | const UIAvatarSvg = require('ui-avatar-svg'); 18 | 19 | const svg = (new UIAvatarSvg()) 20 | .text('AB') 21 | .size(64) 22 | .bgColor('#ff0000') 23 | .textColor('#ffffff') 24 | .generate(); 25 | ``` 26 | 27 | The `generate()` function returns a string `` that can be embedded in your app. 28 | 29 | ## API 30 | 31 | * `text(string)` - User initials (default `AB`) 32 | * `round(boolean)` - Is the avatar round instead of square (default `true`) 33 | * `size(integer)` - Avatar size in px (default `64`) 34 | * `bgColor(string)` - Background color (default `#ff0000`) 35 | * `textColor(string)` - Text color (default `#ffffff`) 36 | * `fontSize(float)` - Font size on a scale from `0.1` - `1.0` (default `0.4`) 37 | * `fontWeight(string|integer)` - Font weight (default `normal`) 38 | * `fontFamily(string)` - Font family (default `-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', Sans', 'Droid Sans', 'Helvetica Neue', sans-serif`) 39 | 40 | ## Credits 41 | 42 | UI Avatar SVG was created by [Gilbert Pellegrom](https://gilbitron.me) from [Dev7studios](https://dev7studios.co). Released under the MIT license. 43 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | export default class UIAvatarSvg { 2 | constructor() { 3 | this._text = 'AB'; 4 | this._round = true; 5 | this._size = 64; 6 | this._bgColor = '#ff0000'; 7 | this._textColor = '#ffffff'; 8 | this._fontFamily = "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif"; 9 | this._fontSize = 0.4; 10 | this._fontWeight = 'normal'; 11 | } 12 | 13 | text(text) { 14 | this._text = text; 15 | return this; 16 | } 17 | 18 | round(round) { 19 | this._round = round; 20 | return this; 21 | } 22 | 23 | size(size) { 24 | this._size = size; 25 | return this; 26 | } 27 | 28 | bgColor(bgColor) { 29 | this._bgColor = bgColor; 30 | return this; 31 | } 32 | 33 | textColor(textColor) { 34 | this._textColor = textColor; 35 | return this; 36 | } 37 | 38 | fontFamily(fontFamily) { 39 | this._fontFamily = fontFamily; 40 | return this; 41 | } 42 | 43 | fontSize(fontSize) { 44 | this._fontSize = fontSize; 45 | return this; 46 | } 47 | 48 | fontWeight(fontWeight) { 49 | this._fontWeight = fontWeight; 50 | return this; 51 | } 52 | 53 | generate() { 54 | return `<${this._round ? 'circle' : 'rect'} fill="${this._bgColor}" width="${this._size}" height="${this._size}" cx="${this._size/2}" cy="${this._size/2}" r="${this._size/2}"/>${this._text}` 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /dist/ui-avatar-svg.esm.js: -------------------------------------------------------------------------------- 1 | class UIAvatarSvg { 2 | constructor() { 3 | this._text = 'AB'; 4 | this._round = true; 5 | this._size = 64; 6 | this._bgColor = '#ff0000'; 7 | this._textColor = '#ffffff'; 8 | this._fontFamily = "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif"; 9 | this._fontSize = 0.4; 10 | this._fontWeight = 'normal'; 11 | } 12 | 13 | text(text) { 14 | this._text = text; 15 | return this; 16 | } 17 | 18 | round(round) { 19 | this._round = round; 20 | return this; 21 | } 22 | 23 | size(size) { 24 | this._size = size; 25 | return this; 26 | } 27 | 28 | bgColor(bgColor) { 29 | this._bgColor = bgColor; 30 | return this; 31 | } 32 | 33 | textColor(textColor) { 34 | this._textColor = textColor; 35 | return this; 36 | } 37 | 38 | fontFamily(fontFamily) { 39 | this._fontFamily = fontFamily; 40 | return this; 41 | } 42 | 43 | fontSize(fontSize) { 44 | this._fontSize = fontSize; 45 | return this; 46 | } 47 | 48 | fontWeight(fontWeight) { 49 | this._fontWeight = fontWeight; 50 | return this; 51 | } 52 | 53 | generate() { 54 | return `<${this._round ? 'circle' : 'rect'} fill="${this._bgColor}" width="${this._size}" height="${this._size}" cx="${this._size/2}" cy="${this._size/2}" r="${this._size/2}"/>${this._text}` 55 | } 56 | } 57 | 58 | export default UIAvatarSvg; 59 | -------------------------------------------------------------------------------- /dist/ui-avatar-svg.cjs.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | class UIAvatarSvg { 4 | constructor() { 5 | this._text = 'AB'; 6 | this._round = true; 7 | this._size = 64; 8 | this._bgColor = '#ff0000'; 9 | this._textColor = '#ffffff'; 10 | this._fontFamily = "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif"; 11 | this._fontSize = 0.4; 12 | this._fontWeight = 'normal'; 13 | } 14 | 15 | text(text) { 16 | this._text = text; 17 | return this; 18 | } 19 | 20 | round(round) { 21 | this._round = round; 22 | return this; 23 | } 24 | 25 | size(size) { 26 | this._size = size; 27 | return this; 28 | } 29 | 30 | bgColor(bgColor) { 31 | this._bgColor = bgColor; 32 | return this; 33 | } 34 | 35 | textColor(textColor) { 36 | this._textColor = textColor; 37 | return this; 38 | } 39 | 40 | fontFamily(fontFamily) { 41 | this._fontFamily = fontFamily; 42 | return this; 43 | } 44 | 45 | fontSize(fontSize) { 46 | this._fontSize = fontSize; 47 | return this; 48 | } 49 | 50 | fontWeight(fontWeight) { 51 | this._fontWeight = fontWeight; 52 | return this; 53 | } 54 | 55 | generate() { 56 | return `<${this._round ? 'circle' : 'rect'} fill="${this._bgColor}" width="${this._size}" height="${this._size}" cx="${this._size/2}" cy="${this._size/2}" r="${this._size/2}"/>${this._text}` 57 | } 58 | } 59 | 60 | module.exports = UIAvatarSvg; 61 | -------------------------------------------------------------------------------- /dist/ui-avatar-svg.umd.js: -------------------------------------------------------------------------------- 1 | (function (global, factory) { 2 | typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : 3 | typeof define === 'function' && define.amd ? define(factory) : 4 | (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.UIAvatarSvg = factory()); 5 | }(this, (function () { 'use strict'; 6 | 7 | class UIAvatarSvg { 8 | constructor() { 9 | this._text = 'AB'; 10 | this._round = true; 11 | this._size = 64; 12 | this._bgColor = '#ff0000'; 13 | this._textColor = '#ffffff'; 14 | this._fontFamily = "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif"; 15 | this._fontSize = 0.4; 16 | this._fontWeight = 'normal'; 17 | } 18 | 19 | text(text) { 20 | this._text = text; 21 | return this; 22 | } 23 | 24 | round(round) { 25 | this._round = round; 26 | return this; 27 | } 28 | 29 | size(size) { 30 | this._size = size; 31 | return this; 32 | } 33 | 34 | bgColor(bgColor) { 35 | this._bgColor = bgColor; 36 | return this; 37 | } 38 | 39 | textColor(textColor) { 40 | this._textColor = textColor; 41 | return this; 42 | } 43 | 44 | fontFamily(fontFamily) { 45 | this._fontFamily = fontFamily; 46 | return this; 47 | } 48 | 49 | fontSize(fontSize) { 50 | this._fontSize = fontSize; 51 | return this; 52 | } 53 | 54 | fontWeight(fontWeight) { 55 | this._fontWeight = fontWeight; 56 | return this; 57 | } 58 | 59 | generate() { 60 | return `<${this._round ? 'circle' : 'rect'} fill="${this._bgColor}" width="${this._size}" height="${this._size}" cx="${this._size/2}" cy="${this._size/2}" r="${this._size/2}"/>${this._text}` 61 | } 62 | } 63 | 64 | return UIAvatarSvg; 65 | 66 | }))); 67 | -------------------------------------------------------------------------------- /demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | UI Avatar SVG Demo 7 | 8 | 9 | 10 | 11 |
12 |

UI Avatar SVG Demo

13 |
14 |
15 | 16 | 17 |
18 |
19 | 20 | 21 |
22 |
23 | 24 | 25 |
26 |
27 | 28 | 29 |
30 |
31 | 32 | 33 |
34 |
35 | 36 | 47 |
48 |
49 | 50 | 61 |
62 |
63 | 67 |
68 |
69 |
70 | 71 | 72 |
73 |
74 |
75 |
76 |
77 | 

 78 |                 

 79 |             

 80 |         

 81 |     

 82 | 
 83 |     
 84 |     
125 | 
126 | 
127 | 


--------------------------------------------------------------------------------