{"id":13791923,"url":"https://github.com/emeraldpay/hashicon","last_synced_at":"2025-04-05T13:04:05.128Z","repository":{"id":37775123,"uuid":"151736454","full_name":"emeraldpay/hashicon","owner":"emeraldpay","description":"Generates a beautiful representation of any hash.","archived":false,"fork":false,"pushed_at":"2022-02-08T02:50:59.000Z","size":367,"stargazers_count":193,"open_issues_count":4,"forks_count":22,"subscribers_count":13,"default_branch":"master","last_synced_at":"2024-12-30T12:03:02.023Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/emeraldpay.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-10-05T14:52:58.000Z","updated_at":"2024-12-02T02:57:30.000Z","dependencies_parsed_at":"2022-08-18T22:31:02.909Z","dependency_job_id":null,"html_url":"https://github.com/emeraldpay/hashicon","commit_stats":null,"previous_names":["etcdevteam/hashicon"],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/emeraldpay%2Fhashicon","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/emeraldpay%2Fhashicon/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/emeraldpay%2Fhashicon/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/emeraldpay%2Fhashicon/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/emeraldpay","download_url":"https://codeload.github.com/emeraldpay/hashicon/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247339153,"owners_count":20923014,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-03T22:01:05.858Z","updated_at":"2025-04-05T13:04:05.092Z","avatar_url":"https://github.com/emeraldpay.png","language":"TypeScript","funding_links":[],"categories":["HashIcon","TypeScript"],"sub_categories":[],"readme":"Hashicon\n==========\n\n[![GitHub tag](https://img.shields.io/github/tag/ETCDEVTeam/hashicon.svg)](https://GitHub.com/emeraldpay/hashicon/tags/)\n[![npm](http://img.shields.io/npm/v/@emeraldpay/hashicon.svg)](https://www.npmjs.com/package/@emeraldpay/hashicon)\n[![License](https://img.shields.io/npm/l/@emeraldpay/hashicon.svg)](LICENSE)\n\n\u003e Generates a beautiful representation of any hash.\n\n![Sample hashicon image](examples/hashicons.png \"Hashicons\")\n\nUsage\n-----\n\nInstall with: \n```shell\n$ npm install @emeraldpay/hashicon --save\n```   \n\nSomething that you want to represent visually. For example ID of an object on the screen.\n```js\nconst hash = \"9dddff8f-be81-4c27-80c8-099327865f3f\";\n```\n\nCreate a `hashicon` with default params:\n```js\nimport { hashicon } from 'hashicon';\n\nconst icon = hashicon(hash); // icon is a \u003ccanvas\u003e element\nconst icon = hashicon(hash, 80);  // size 80px\n```\n\nOr, pass custom [params](#params):\n```js\nconst params = {...};\nconst icon = hashicon(hash, params);\n```\n\nFinally, append the newly created `hashicon` to the HTML document:\n```js\ndocument.body.appendChild(icon);\n```\n\nReact\n-----\n\nInstall with: \n```shell\n$ npm install @emeraldpay/hashicon-react --save\n```   \n\nAnd use the component:\n\n```js\nimport { Hashicon } from 'hashicon-react';\n\n// something that you want to represent visually. For example ID of an object on the screen.\nconst value = \"9dddff8f-be81-4c27-80c8-099327865f3f\";\n\n// icon is a \u003ccanvas\u003e element\n\u003cHashicon value={value}/\u003e\n\n// Same icon with 80px in size\n\u003cHashicon value={value} size={89}/\u003e\n```\n\nParams\n---\n\u003e See [default params](src/params.ts)\n\nHashIcon's values are extracted from the hash, and controlled with the following parameters to manipulate the possible visual output:\n\n```js\n{\n\n// size px (HiDPI/Retina aware)\nsize: 100,\n\n// primary color range radius ( 0=red, 60=yellow, 120=green, ..., 360=red )\nhue: { min: 0, max: 360 },\n\n// saturation ( 0=grey, 100=colorfull )\nsaturation: { min: 70, max: 100 },\n\n// lightness ( 0=extremlydark, 50=optimal, 100=extremlybright )\nlightness: { min: 45, max: 65 },\n\n// hue variation for individual triangles\nvariation: { min: 7, max: 14, enabled: true },\n\n// color shift from primary hue to secondary hue ( the pattern )\nshift: { min: 60, max: 300 },\n\n// the pattern opacity\nfigurealpha: { min: .7, max: 1.2 }, // alpha\n\n// simulate a 3d cube by different areas gets some more/less light applyed \nlight:{ top:10, right:-8, left:-4, enabled: true},\n\n// Allows a custom canvas to be used to render into\ncreateCanvas: (width, height) =\u003e HTMLCanvasElement\n\n}\n```\n\nDevelopment\n-----------\n\n1. Install package dependencies locally:\n```shell\n$ yarn install\n```\n\n2. Start development environment:\n```shell\n$ yarn workspace @emeraldpay/hashicon run storybook\n```\n\nA browser pointing to Storybook demo will start automatically. \nIf not opened, see console for:\n\n```\n╭─────────────────────────────────────────────────────╮\n│                                                     │\n│   Storybook 5.3.19 started                          │\n│   3.62 s for manager and 3.32 s for preview         │\n│                                                     │\n│    Local:            http://localhost:60490/        │\n│    On your network:  http://192.168.0.100:60490/    │\n│                                                     │\n╰─────────────────────────────────────────────────────╯\n```\n\nAnd open the _local_ url (http://localhost:60490/ in the example above)\n\nBuild\n-----\n\n```shell\n$ yarn build\n```\n\n\u003e Builds package into `lib/` folder inside each package.\n\nLicense\n-----\n\nApache 2\n\nSee [LICENSE](LICENSE)\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Femeraldpay%2Fhashicon","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Femeraldpay%2Fhashicon","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Femeraldpay%2Fhashicon/lists"}