├── .browserslistrc ├── .eslintrc.js ├── .gitignore ├── .npmignore ├── README.md ├── babel.config.js ├── package.json ├── public ├── favicon.ico └── index.html ├── src ├── App.vue ├── components │ └── NiceAvatar │ │ ├── Beard.vue │ │ ├── Ear.vue │ │ ├── Earring.vue │ │ ├── EyeBrows.vue │ │ ├── Eyes.vue │ │ ├── Face.vue │ │ ├── Glasses.vue │ │ ├── Hair.vue │ │ ├── Mouth.vue │ │ ├── NiceAvatar.vue │ │ ├── Nose.vue │ │ ├── Shirt.vue │ │ ├── props.js │ │ └── types.js └── main.js └── yarn.lock /.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | not dead 4 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | node: true, 5 | }, 6 | extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"], 7 | parserOptions: { 8 | parser: "babel-eslint", 9 | }, 10 | rules: { 11 | "no-console": process.env.NODE_ENV === "production" ? "warn" : "off", 12 | "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off", 13 | }, 14 | }; 15 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | 6 | # local env files 7 | .env.local 8 | .env.*.local 9 | 10 | # Log files 11 | npm-debug.log* 12 | yarn-debug.log* 13 | yarn-error.log* 14 | pnpm-debug.log* 15 | 16 | # Editor directories and files 17 | .idea 18 | .vscode 19 | *.suo 20 | *.ntvs* 21 | *.njsproj 22 | *.sln 23 | *.sw? 24 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | public 2 | .idea 3 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue-nice-avatar 2 | 3 | [![Version](http://img.shields.io/npm/v/vue-nice-avatar.svg)](https://www.npmjs.org/package/vue-nice-avatar) 4 | [![npm download][download-image]][download-url] 5 | 6 | [download-image]: https://img.shields.io/npm/dm/vue-nice-avatar.svg?style=flat-square 7 | [download-url]: https://npmjs.org/package/vue-nice-avatar 8 | 9 | ## Online editor / preview 10 | 11 | - https://vue-nice-avatar.vercel.app/ 12 | 13 | ## Assets 14 | 15 | - Designer / Figma files: [Avatar Illustration System](https://www.figma.com/community/file/829741575478342595) 16 | 17 | ## Installation 18 | 19 | ```sh 20 | yarn add vue-nice-avatar 21 | ``` 22 | 23 | ## Usage 24 | 25 | 1. Import the component 26 | 27 | ```js 28 | import NiceAvatar from "vue-nice-avatar"; 29 | ``` 30 | 31 | 2. Render the component with props 32 | ```jsx 33 | 34 | ``` 35 | 36 | ## Options 37 | 38 | The options can be passed into genConfig or as React props 39 | 40 | | key | type | default | accept | 41 | | ------------ | ---------------- | ------- | --------------------------------------------------------------------------- | 42 | | `size` | string or number | 120 | | 43 | | `bgColor` | string | random | | 44 | | `faceColor` | string | random | | 45 | | `eye` | string | random | circle, oval, smile, shadow | 46 | | `eyeBrow` | string | random | none, eyebrows-up, eyebrows-down, eyelashes-down, eyelashes-up | 47 | | `ear` | string | random | small, big | 48 | | `earring` | string | random | none, stud, hoop | 49 | | `mouth` | string | random | frown, laughing, nervous, pucker, sad, smile, smirk, suprised | 50 | | `hair` | string | random | none, danny-phantom, doug-funny, fonza, full, mr-clean, mr-t, pixie, turban | 51 | | `hairColor` | string | random | | 52 | | `nose` | string | random | curve, pointed, round | 53 | | `glasses` | string | random | none, round, square | 54 | | `beard` | string | random | none, hipster, scruff | 55 | | `beardColor` | string | random | | 56 | | `shirt` | string | random | collared, crew, open | 57 | | `shirtColor` | string | random | | 58 | 59 | ## Development 60 | 61 | 1. Clone the repo 62 | ```sh 63 | git clone git@github.com:ademilter/vue-nice-avatar.git 64 | ``` 65 | 2. Clone the repo 66 | ```sh 67 | cd vue-nice-avatar 68 | ``` 69 | 3. Install dependencies 70 | ```sh 71 | yarn 72 | ``` 73 | 4. Start the server for the demo 74 | ```sh 75 | yarn dev 76 | ``` 77 | 5. Open the browser to reivew the demo 78 | ```sh 79 | open http://localhost:3000 80 | ``` 81 | 6. Edit the files inside `src/components/NiceAvatar`. 82 | 83 | ## License 84 | 85 | Released under [MIT](/LICENSE) by [@ademilter](https://github.com/ademilter). 86 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ["@vue/cli-plugin-babel/preset"], 3 | }; 4 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-nice-avatar", 3 | "description": "Dummy avatar generator", 4 | "author": "Adem ilter ", 5 | "homepage": "https://vue-nice-avatar.vercel.app/", 6 | "version": "1.0.5", 7 | "main": "dist/niceAvatar.umd.js", 8 | "license": "MIT", 9 | "keywords": [ 10 | "vue", 11 | "vuejs", 12 | "avatar" 13 | ], 14 | "repository": { 15 | "type": "git", 16 | "url": "https://github.com/ademilter/vue-nice-avatar.git" 17 | }, 18 | "bugs": { 19 | "url": "https://github.com/ademilter/vue-nice-avatar/issues" 20 | }, 21 | "scripts": { 22 | "serve": "vue-cli-service serve", 23 | "build": "vue-cli-service build", 24 | "package": "vue-cli-service build --entry src/components/NiceAvatar/NiceAvatar.vue --target lib --name niceAvatar", 25 | "lint": "vue-cli-service lint" 26 | }, 27 | "dependencies": { 28 | "core-js": "^3.6.5", 29 | "save-svg-as-png": "^1.4.17", 30 | "vue": "^2.6.11" 31 | }, 32 | "devDependencies": { 33 | "@vue/cli-plugin-babel": "~4.5.0", 34 | "@vue/cli-plugin-eslint": "~4.5.0", 35 | "@vue/cli-service": "~4.5.0", 36 | "@vue/eslint-config-prettier": "^6.0.0", 37 | "babel-eslint": "^10.1.0", 38 | "eslint": "^6.7.2", 39 | "eslint-plugin-prettier": "^3.3.1", 40 | "eslint-plugin-vue": "^6.2.2", 41 | "prettier": "^2.2.1", 42 | "vue-template-compiler": "^2.6.11" 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ademilter/vue-nice-avatar/2d6d47ad9e7352ff6c9959a2a2f6a1f7320963ed/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | <%= htmlWebpackPlugin.options.title %> 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 190 | 191 | 305 | 306 | 368 | -------------------------------------------------------------------------------- /src/components/NiceAvatar/Beard.vue: -------------------------------------------------------------------------------- 1 | 446 | 447 | 464 | -------------------------------------------------------------------------------- /src/components/NiceAvatar/Ear.vue: -------------------------------------------------------------------------------- 1 | 50 | 51 | 68 | -------------------------------------------------------------------------------- /src/components/NiceAvatar/Earring.vue: -------------------------------------------------------------------------------- 1 | 30 | 31 | 49 | -------------------------------------------------------------------------------- /src/components/NiceAvatar/EyeBrows.vue: -------------------------------------------------------------------------------- 1 | 136 | 137 | 153 | -------------------------------------------------------------------------------- /src/components/NiceAvatar/Eyes.vue: -------------------------------------------------------------------------------- 1 | 90 | 91 | 107 | -------------------------------------------------------------------------------- /src/components/NiceAvatar/Face.vue: -------------------------------------------------------------------------------- 1 | 49 | 50 | 64 | -------------------------------------------------------------------------------- /src/components/NiceAvatar/Glasses.vue: -------------------------------------------------------------------------------- 1 | 39 | 40 | 56 | -------------------------------------------------------------------------------- /src/components/NiceAvatar/Hair.vue: -------------------------------------------------------------------------------- 1 | 123 | 124 | 141 | -------------------------------------------------------------------------------- /src/components/NiceAvatar/Mouth.vue: -------------------------------------------------------------------------------- 1 | 136 | 137 | 153 | -------------------------------------------------------------------------------- /src/components/NiceAvatar/NiceAvatar.vue: -------------------------------------------------------------------------------- 1 | 45 | 46 | 76 | -------------------------------------------------------------------------------- /src/components/NiceAvatar/Nose.vue: -------------------------------------------------------------------------------- 1 | 28 | 29 | 45 | -------------------------------------------------------------------------------- /src/components/NiceAvatar/Shirt.vue: -------------------------------------------------------------------------------- 1 | 77 | 78 | 95 | -------------------------------------------------------------------------------- /src/components/NiceAvatar/props.js: -------------------------------------------------------------------------------- 1 | import { 2 | EYES, 3 | EYEBROWS, 4 | EAR, 5 | EARRING, 6 | MOUTH, 7 | HAIR, 8 | NOSE, 9 | GLASSES, 10 | BEARD, 11 | SHIRT, 12 | BG_COLORS, 13 | HAIR_COLORS, 14 | BEARD_COLORS, 15 | SHIRT_COLORS, 16 | FACE_COLORS, 17 | } from "./types"; 18 | 19 | function getRandomItem(list) { 20 | return list[Math.floor(Math.random() * list.length)]; 21 | } 22 | 23 | export default { 24 | size: { 25 | default: 120, 26 | type: [String, Number], 27 | }, 28 | bgColor: { 29 | default: getRandomItem(BG_COLORS), 30 | type: String, 31 | }, 32 | faceColor: { 33 | default: getRandomItem(FACE_COLORS), 34 | type: String, 35 | }, 36 | eye: { 37 | default: getRandomItem(Object.values(EYES)), 38 | type: String, 39 | validator: function (value) { 40 | return Object.values(EYES).indexOf(value) !== -1; 41 | }, 42 | }, 43 | eyeBrow: { 44 | default: getRandomItem(Object.values(EYEBROWS)), 45 | type: String, 46 | validator: function (value) { 47 | return Object.values(EYEBROWS).indexOf(value) !== -1; 48 | }, 49 | }, 50 | ear: { 51 | default: getRandomItem(Object.values(EAR)), 52 | type: String, 53 | validator: function (value) { 54 | return Object.values(EAR).indexOf(value) !== -1; 55 | }, 56 | }, 57 | earring: { 58 | default: getRandomItem(Object.values(EARRING)), 59 | type: String, 60 | validator: function (value) { 61 | return Object.values(EARRING).indexOf(value) !== -1; 62 | }, 63 | }, 64 | mouth: { 65 | default: getRandomItem(Object.values(MOUTH)), 66 | type: String, 67 | validator: function (value) { 68 | return Object.values(MOUTH).indexOf(value) !== -1; 69 | }, 70 | }, 71 | hair: { 72 | default: getRandomItem(Object.values(HAIR)), 73 | type: String, 74 | validator: function (value) { 75 | return Object.values(HAIR).indexOf(value) !== -1; 76 | }, 77 | }, 78 | nose: { 79 | default: getRandomItem(Object.values(NOSE)), 80 | type: String, 81 | validator: function (value) { 82 | return Object.values(NOSE).indexOf(value) !== -1; 83 | }, 84 | }, 85 | glasses: { 86 | default: getRandomItem(Object.values(GLASSES)), 87 | type: String, 88 | validator: function (value) { 89 | return Object.values(GLASSES).indexOf(value) !== -1; 90 | }, 91 | }, 92 | beard: { 93 | default: getRandomItem(Object.values(BEARD)), 94 | type: String, 95 | validator: function (value) { 96 | return Object.values(BEARD).indexOf(value) !== -1; 97 | }, 98 | }, 99 | hairColor: { 100 | default: getRandomItem(HAIR_COLORS), 101 | type: String, 102 | }, 103 | beardColor: { 104 | default: getRandomItem(BEARD_COLORS), 105 | type: String, 106 | }, 107 | shirtColor: { 108 | default: getRandomItem(SHIRT_COLORS), 109 | type: String, 110 | }, 111 | shirt: { 112 | default: getRandomItem(Object.values(SHIRT)), 113 | type: String, 114 | validator: function (value) { 115 | return Object.values(SHIRT).indexOf(value) !== -1; 116 | }, 117 | }, 118 | }; 119 | -------------------------------------------------------------------------------- /src/components/NiceAvatar/types.js: -------------------------------------------------------------------------------- 1 | export const EYES = { 2 | CIRCLE: "circle", 3 | OVAL: "oval", 4 | SMILE: "smile", 5 | SHADOW: "shadow", 6 | }; 7 | 8 | export const EYEBROWS = { 9 | NONE: "none", 10 | EYEBROWS_UP: "eyebrows-up", 11 | EYEBROWS_DOWN: "eyebrows-down", 12 | EYELASHES_DOWN: "eyelashes-down", 13 | EYELASHES_UP: "eyelashes-up", 14 | }; 15 | 16 | export const EAR = { 17 | SMALL: "small", 18 | BIG: "big", 19 | }; 20 | 21 | export const EARRING = { 22 | NONE: "none", 23 | STUD: "stud", 24 | HOOP: "hoop", 25 | }; 26 | 27 | export const MOUTH = { 28 | FROWN: "frown", 29 | LAUGHING: "laughing", 30 | NERVOUS: "nervous", 31 | PUCKER: "pucker", 32 | SAD: "sad", 33 | SMILE: "smile", 34 | SMIRK: "smirk", 35 | SUPRISED: "suprised", 36 | }; 37 | 38 | export const HAIR = { 39 | NONE: "none", 40 | DANNY_PHANTOM: "danny-phantom", 41 | DOUG_FUNNY: "doug-funny", 42 | FONZA: "fonza", 43 | FULL: "full", 44 | MR_CLEAN: "mr-clean", 45 | MR_T: "mr-t", 46 | PIXIE: "pixie", 47 | TURBAN: "turban", 48 | }; 49 | 50 | export const NOSE = { 51 | CURVE: "curve", 52 | POINTED: "pointed", 53 | ROUND: "round", 54 | }; 55 | 56 | export const GLASSES = { 57 | NONE: "none", 58 | ROUND: "round", 59 | SQUARE: "square", 60 | }; 61 | 62 | export const BEARD = { 63 | NONE: "none", 64 | HIPSTER: "hipster", 65 | SCRUFF: "scruff", 66 | }; 67 | 68 | export const SHIRT = { 69 | COLLARED: "collared", 70 | CREW: "crew", 71 | OPEN: "open", 72 | }; 73 | 74 | export const BEARD_COLORS = ["#BB9E95", "#65473E"]; 75 | 76 | export const HAIR_COLORS = [ 77 | "#77311D", 78 | "#FC909F", 79 | "#D2EFF3", 80 | "#506AF4", 81 | "#F48150", 82 | ]; 83 | 84 | export const BG_COLORS = [ 85 | "#9287FF", 86 | "#6BD9E9", 87 | "#FC909F", 88 | "#F4D150", 89 | "#E0DDFF", 90 | "#D2EFF3", 91 | "#FFEDEF", 92 | "#FFEBA4", 93 | "#506AF4", 94 | "#F48150", 95 | "#74D153", 96 | ]; 97 | 98 | export const SHIRT_COLORS = [ 99 | "#9287FF", 100 | "#6BD9E9", 101 | "#FC909F", 102 | "#F4D150", 103 | "#77311D", 104 | ]; 105 | 106 | export const FACE_COLORS = ["#F9C9B6", "#AC6651"]; 107 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from "vue"; 2 | import App from "./App.vue"; 3 | 4 | Vue.config.productionTip = false; 5 | 6 | new Vue({ 7 | render: (h) => h(App), 8 | }).$mount("#app"); 9 | --------------------------------------------------------------------------------