├── .editorconfig ├── .eslintrc.js ├── .gitignore ├── .prettierrc ├── .travis.yml ├── LICENSE ├── README.md ├── babel.config.js ├── jest.config.js ├── package.json ├── public ├── identicons.png └── index.html ├── src ├── App.vue ├── components │ ├── Jazzicon.vue │ ├── addressToNumber.js │ └── index.js └── main.js ├── tests └── unit │ ├── .eslintrc.js │ └── Jazzicon.spec.js ├── vue.config.js └── yarn.lock /.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | browser: true, 5 | node: true 6 | }, 7 | parserOptions: { 8 | parser: 'babel-eslint' 9 | }, 10 | extends: ['plugin:vue/recommended', 'plugin:prettier/recommended'], 11 | plugins: ['vue', 'prettier'], 12 | rules: { 13 | 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', 14 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off' 15 | } 16 | }; 17 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Created by .ignore support plugin (hsz.mobi) 2 | ### Node template 3 | # Logs 4 | logs 5 | *.log 6 | npm-debug.log* 7 | yarn-debug.log* 8 | yarn-error.log* 9 | 10 | # Runtime data 11 | pids 12 | *.pid 13 | *.seed 14 | *.pid.lock 15 | 16 | # Directory for instrumented libs generated by jscoverage/JSCover 17 | lib-cov 18 | 19 | # Coverage directory used by tools like istanbul 20 | coverage 21 | 22 | # nyc test coverage 23 | .nyc_output 24 | 25 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 26 | .grunt 27 | 28 | # Bower dependency directory (https://bower.io/) 29 | bower_components 30 | 31 | # node-waf configuration 32 | .lock-wscript 33 | 34 | # Compiled binary addons (https://nodejs.org/api/addons.html) 35 | build/Release 36 | 37 | # Dependency directories 38 | node_modules/ 39 | jspm_packages/ 40 | 41 | # TypeScript v1 declaration files 42 | typings/ 43 | 44 | # Optional npm cache directory 45 | .npm 46 | 47 | # Optional eslint cache 48 | .eslintcache 49 | 50 | # Optional REPL history 51 | .node_repl_history 52 | 53 | # Output of 'npm pack' 54 | *.tgz 55 | 56 | # Yarn Integrity file 57 | .yarn-integrity 58 | 59 | # dotenv environment variables file 60 | .env 61 | 62 | # parcel-bundler cache (https://parceljs.org/) 63 | .cache 64 | 65 | # next.js build output 66 | .next 67 | 68 | # nuxt.js build output 69 | .nuxt 70 | 71 | # Nuxt generate 72 | dist 73 | lib 74 | 75 | # vuepress build output 76 | .vuepress/dist 77 | 78 | # Serverless directories 79 | .serverless 80 | 81 | # IDE 82 | .idea 83 | 84 | # Mac 85 | .DS_Store 86 | 87 | # Service worker 88 | sw.* 89 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "semi": true, 3 | "singleQuote": true 4 | } 5 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "8" 4 | - "9" -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2019 man15h 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. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | [![npm](https://img.shields.io/npm/v/vue-jazzicon.svg)](https://www.npmjs.com/package/vue-jazzicon) [![travis](https://img.shields.io/travis/man15h/vue-jazzicon.svg)](https://www.npmjs.com/package/vue-jazzicon) [![npm](https://img.shields.io/npm/dw/vue-jazzicon.svg)](https://www.npmjs.com/package/vue-jazzicon) [![npm](https://img.shields.io/npm/l/vue-jazzicon.svg)](https://github.com/man15h/vue-jazzicon/blob/master/LICENSE) 3 | 4 | 5 | # vue-jazzicon 6 | 7 | A dead-simple Jazzicon component for Vue. 8 | 9 | > Say goodbye to boring blocky identicons that look like they came out of the 70s, and replace them with jazzy, colorful collages that more likely came out of the 80's 10 | 11 | ![Jazzicon](public/identicons.png) 12 | 13 | 14 | ## [Demo](https://vue-jazzicon.netlify.com/) 15 | 16 | 17 | ## Install 18 | 19 | ### NPM 20 | 21 | Installing with npm is recommended and it works seamlessly with webpack. 22 | 23 | ```js 24 | npm install vue-jazzicon // yarn add vue-jazzicon 25 | ``` 26 | 27 | ## Quick start 28 | 29 | ### Global 30 | 31 | To use in your project, just import jazzicon and install into Vue. 32 | 33 | main.js 34 | 35 | ```js 36 | import Vue from 'vue'; 37 | import Jazzicon from 'vue-jazzicon'; 38 | 39 | Vue.component('jazzicon', Jazzicon); // or Vue.component(Jazzicon.name, Jazzicon); 40 | ``` 41 | 42 | App.vue 43 | 44 | ```html 45 | 48 | ``` 49 | 50 | ### On demand 51 | 52 | ```html 53 | 56 | 57 | 66 | ``` 67 | 68 | ## Props 69 | 70 | | Name | Description | Type | Default | Accepted values | 71 | | ------------- | -------------------- | ------------ | -------------- | ------------------------ | 72 | | `seed` | Seed for the icon | `Number` | Random Number | Only positive integer | 73 | | `address` | Address for the icon | `String` | - | Hex string | 74 | | `diameter` | Diameter of icon | `Number` | 100 | Positive integer | 75 | | `shape-count` | Number of shapes | `Number` | 4 | Positive integer | 76 | | `colors` | Colors for icon | `Array` | See Below | Array of Hex color code | 77 | 78 | **Default Colors** 79 | 80 | ``` 81 | [ 82 | '#01888C', // teal 83 | '#FC7500', // bright orange 84 | '#034F5D', // dark teal 85 | '#F73F01', // orangered 86 | '#FC1960', // magenta 87 | '#C7144C', // raspberry 88 | '#F3C100', // goldenrod 89 | '#1598F2', // lightning blue 90 | '#2465E1', // sail blue 91 | '#F19E02' // gold 92 | ] 93 | ``` 94 | 95 | ## License 96 | 97 | [MIT](LICENSE) license. 98 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ['@vue/app'] 3 | }; 4 | -------------------------------------------------------------------------------- /jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | moduleFileExtensions: ['js', 'jsx', 'json', 'vue'], 3 | transform: { 4 | '^.+\\.vue$': 'vue-jest', 5 | '^.+\\.js$': '/node_modules/babel-jest' 6 | }, 7 | moduleNameMapper: { 8 | '^@/(.*)$': '/src/components/$1' 9 | }, 10 | snapshotSerializers: ['jest-serializer-vue'], 11 | testMatch: [ 12 | '**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)' 13 | ], 14 | collectCoverage: true, 15 | coverageReporters: ['html', 'text-summary'], 16 | testURL: 'http://localhost/' 17 | }; 18 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-jazzicon", 3 | "version": "0.1.3", 4 | "description": "Vue component for danfinlay/jazzicon", 5 | "author": "man15h", 6 | "scripts": { 7 | "build": "npm run clean && cross-env NODE_ENV=production vue-cli-service build --dest lib --target lib --name vue-jazzicon ./src/components/index.js", 8 | "test": "npm run test:unit", 9 | "lint": "eslint --ext .js,.vue -f table src/", 10 | "clean": "rimraf dist && rimraf lib && rimraf coverage", 11 | "dev": "vue-cli-service serve", 12 | "lint-fix": "eslint --ext .js,.vue -f table src/ --fix", 13 | "prod": "cross-env NODE_ENV=production vue-cli-service build", 14 | "test:unit": "vue-cli-service test:unit" 15 | }, 16 | "main": "lib/vue-jazzicon.umd.min.js", 17 | "dependencies": { 18 | "color": "^3.1.0", 19 | "mersenne-twister": "^1.1.0" 20 | }, 21 | "devDependencies": { 22 | "@vue/cli-plugin-babel": "^3.0.0", 23 | "@vue/cli-plugin-eslint": "^3.0.0", 24 | "@vue/cli-plugin-unit-jest": "^3.1.1", 25 | "@vue/cli-service": "^3.0.0", 26 | "@vue/eslint-config-standard": "^4.0.0", 27 | "@vue/server-test-utils": "^1.0.0-beta.29", 28 | "@vue/test-utils": "^1.0.0-beta.20", 29 | "babel-core": "7.0.0-bridge.0", 30 | "babel-eslint": "^10.0.1", 31 | "babel-jest": "^23.6.0", 32 | "cross-env": "^5.2.0", 33 | "eslint": "^5.15.1", 34 | "eslint-config-prettier": "^3.1.0", 35 | "eslint-loader": "^2.1.2", 36 | "eslint-plugin-prettier": "2.6.2", 37 | "eslint-plugin-vue": "^4.0.0", 38 | "husky": "^1.3.1", 39 | "node-sass": "^4.11.0", 40 | "prerender-spa-plugin": "^3.2.1", 41 | "prettier": "1.14.3", 42 | "rimraf": "^2.6.3", 43 | "sass-loader": "^7.1.0", 44 | "vue": "^2.5.17", 45 | "vue-cli-plugin-prerender-spa": "^1.1.5", 46 | "vue-template-compiler": "^2.5.17" 47 | }, 48 | "husky": { 49 | "hooks": { 50 | "pre-commit": "npm run lint && npm run test && npm run clean" 51 | } 52 | }, 53 | "keywords": [ 54 | "vue", 55 | "component", 56 | "jazzicon", 57 | "ethereum", 58 | "metamask", 59 | "identicon" 60 | ], 61 | "license": "MIT" 62 | } 63 | -------------------------------------------------------------------------------- /public/identicons.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/man15h/vue-jazzicon/530319de05db2fdb6c1b28d38255c3fd12cf9073/public/identicons.png -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Vue-jazzicon | A dead-simple Jazzicon component for Vue. 9 | 10 | 11 | 12 | 13 | 18 |
19 | 20 | 21 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 37 | 48 | 83 | -------------------------------------------------------------------------------- /src/components/Jazzicon.vue: -------------------------------------------------------------------------------- 1 | 4 | 150 | -------------------------------------------------------------------------------- /src/components/addressToNumber.js: -------------------------------------------------------------------------------- 1 | function addressToNumber(address) { 2 | return parseInt(address.slice(2, 10), 16); 3 | } 4 | export default addressToNumber; 5 | -------------------------------------------------------------------------------- /src/components/index.js: -------------------------------------------------------------------------------- 1 | import Jazzicon from './Jazzicon.vue'; 2 | export { Jazzicon }; 3 | export default Jazzicon; 4 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import App from './App.vue'; 3 | import Jazzicon from './components'; 4 | import Meta from 'vue-meta'; 5 | Vue.config.productionTip = false; 6 | Vue.use(Meta); 7 | Vue.component(Jazzicon.name, Jazzicon); 8 | new Vue({ 9 | mounted: () => document.dispatchEvent(new Event('x-app-rendered')), 10 | render: h => h(App) 11 | }).$mount('#app'); 12 | -------------------------------------------------------------------------------- /tests/unit/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | env: { 3 | jest: true 4 | } 5 | } -------------------------------------------------------------------------------- /tests/unit/Jazzicon.spec.js: -------------------------------------------------------------------------------- 1 | import { mount, shallowMount } from '@vue/test-utils'; 2 | import { Jazzicon } from '../../src/components'; 3 | 4 | let baseProps = { 5 | seed: 10000, 6 | address: '0xccf7f134cd45865a5afd5a3a92b969228ce9a3e6', 7 | diameter: 50, 8 | shapeCount: 4, 9 | colors: [ 10 | '#01888C', // teal 11 | '#FC7500', // bright orange 12 | '#034F5D', // dark teal 13 | '#F73F01', // orangered 14 | '#FC1960', // magenta 15 | '#C7144C', // raspberry 16 | '#F3C100', // goldenrod 17 | '#1598F2', // lightning blue 18 | '#2465E1', // sail blue 19 | '#F19E02' // gold 20 | ] 21 | }; 22 | describe('Jazzicon', () => { 23 | it('is called', () => { 24 | const wrapper = mount(Jazzicon); 25 | expect(wrapper.name()).toBe('Jazzicon'); 26 | expect(wrapper.isVueInstance()).toBeTruthy(); 27 | }); 28 | it('is rendered with props', () => { 29 | const wrapper = shallowMount(Jazzicon, { 30 | propsData: baseProps 31 | }); 32 | expect(wrapper.exists()).toBe(true); 33 | expect(wrapper.props().seed).toBe(baseProps.seed); 34 | expect(wrapper.props().address).toBe(baseProps.address); 35 | expect(wrapper.props().diameter).toBe(baseProps.diameter); 36 | expect(wrapper.props().shapeCount).toBe(baseProps.shapeCount); 37 | expect(wrapper.props().colors).toBe(baseProps.colors); 38 | }); 39 | }); 40 | -------------------------------------------------------------------------------- /vue.config.js: -------------------------------------------------------------------------------- 1 | const isProd = process.env.NODE_ENV === 'production'; 2 | 3 | module.exports = { 4 | publicPath: isProd ? '/vue-jazzicon/' : '/', 5 | pluginOptions: { 6 | prerenderSpa: { 7 | registry: undefined, 8 | renderRoutes: ['/'], 9 | useRenderEvent: true, 10 | headless: true, 11 | onlyProduction: true 12 | } 13 | } 14 | }; 15 | --------------------------------------------------------------------------------