{"id":17677734,"url":"https://github.com/rossmoody/cryptocons","last_synced_at":"2025-09-25T12:30:53.138Z","repository":{"id":101059872,"uuid":"431644546","full_name":"rossmoody/cryptocons","owner":"rossmoody","description":"Optimized React icon components and utility functions for managing cryptocurrency logos in your project.","archived":false,"fork":false,"pushed_at":"2024-07-17T21:18:11.000Z","size":4776,"stargazers_count":27,"open_issues_count":1,"forks_count":5,"subscribers_count":4,"default_branch":"main","last_synced_at":"2024-10-24T22:44:45.513Z","etag":null,"topics":["bitcoin","crypto","cryptocurrency","ethereum","icon","icons","react","react-icons","svg","svg-icons","typescript"],"latest_commit_sha":null,"homepage":"https://cryptocons.io","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rossmoody.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-11-24T22:26:46.000Z","updated_at":"2024-09-19T20:14:06.000Z","dependencies_parsed_at":"2024-10-24T09:40:20.460Z","dependency_job_id":"d19c3944-8d9e-46fa-88b4-fb8bfd64592b","html_url":"https://github.com/rossmoody/cryptocons","commit_stats":{"total_commits":134,"total_committers":2,"mean_commits":67.0,"dds":0.007462686567164201,"last_synced_commit":"80054c915e8dcf4b1156d47dcda2767a2ef37141"},"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rossmoody%2Fcryptocons","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rossmoody%2Fcryptocons/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rossmoody%2Fcryptocons/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rossmoody%2Fcryptocons/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rossmoody","download_url":"https://codeload.github.com/rossmoody/cryptocons/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234192388,"owners_count":18793990,"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":["bitcoin","crypto","cryptocurrency","ethereum","icon","icons","react","react-icons","svg","svg-icons","typescript"],"created_at":"2024-10-24T07:41:43.064Z","updated_at":"2025-09-25T12:30:51.717Z","avatar_url":"https://github.com/rossmoody.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Cryptocons\n\n![Cryptocons cover](.github/cover.png)\n\n# What is Cryptocons?\n\nCryptocons is a collection of named icon modules and utility functions making it easier to manage cryptocurrency icons in your project.\n\nEach icon is placed on a 24x24 grid and available as two types:\n\n1. **Logo**: Plain logomark icons\n2. **Badge**: Logomark icons contained in a shape that can be configured with different border radiuses from square to circle.\n\n# Design Assets\n\nCheck out the [Figma library](https://www.figma.com/community/file/1100964857221715143/Cryptocurrency-Logos-and-Icons) for component assets.\n\n---\n\n# Quick start\n\nFor a detailed guide on Cryptocon component usage, [check out the website](https://www.cryptocons.io/documentation/usage). To get started quickly and/or learn by inspecting, read on and check out the [CodeSandbox example](https://codesandbox.io/s/cryptocons-example-okpxc2?file=/src/App.tsx).\n\n## 1. Install the package in your project\n\n```bash\nyarn add cryptocons\n\nor\n\nnpm install cryptocons\n```\n\n## 2. Import icons\n\n```jsx\nimport { Binance, BinanceBadge } from 'cryptocons'\n```\n\n## 3. Render the icons\n\n```jsx\n\u003cBinance /\u003e\n\u003cBinanceBadge /\u003e\n```\n\n---\n\n# Develop locally\n\nIf you want to tinker or contribute to Cryptocons, you will need to build the repo locally.\n\nThe content within the `scripts` directory is what automatically transforms XML into React components from within the `svg` directory. Most of the functions within are refactored and tailored to the cryptocon build process from the [svg2jsx](https://github.com/balajmarius/svg2jsx) library.\n\n## Build\n\n### 1. Install the dependencies\n\n```bash\nyarn\n```\n\n### 2. Run the scripts\n\n```bash\nyarn build\n```\n\nThis will use `ts-node` to run all the functions in the `scripts` directory. These scripts will optimize, transform, and reformat the content within the `svg` directory into React components in the `components` directory.\n\n### 3. Run Storybook to view changes\n\n```bash\nyarn storybook\n```\n\nThis will build the components within the `components` directory to `localhost:8000`. Any changes made to components will automatically rerender. Hack away.\n\n## Debug\n\nIf you use VS Code to develop, the debug panel will have a pre-configured profile called \"Debug Scripts\". This will run the build command in debug mode and allow you to step through all the functions.\n\n## Test\n\nIcon tests are run with React Testing Library and Jest.\n\n```bash\nyarn test\n```\n\nThis will run all available tests within the `tests` directory inside `src` and watch for changes.\n\n## Contributing\n\nIf you would like to contribute, the repository is setup in a way to make it fairly easy, but there are a few important things to know.\n\nThe entire component library is built from how the content within the `svgs` repository is named and structured. This means naming conventions play a very important role and there area few important hooks when exporting svgs as Badges and Logos.\n\n### Exporting SVGs\n\n1. Icons must be on a 24x24 pixel artboard/canvas. The `viewBox` used in the `createIcon` helper specifies 24x24 and it's important to match it.\n2. For Badge types, the first element in the exported svg must be a 24x24 `rect` element with a color. This is hooked into during the build process and creates the `badgeRadius` functionality. Follow the icon structure in [the example Figma](#) file.\n\n### Naming conventions\n\n1. Icons are named after the brand/business/coin name, not the cryptocurrency ticker symbol. For example, Bitcoin's ticker symbol is BTC and Ethereum's ticker symbol is ETH. The name of the icon would be `Ethereum`, `EthereumBadge`, `Bitcoin`, `BitcoinBadge`.\n2. Icons have two types: Badge and Logo. Logos are the default icon and don't need typed. Badge types of an icon must have the word \"Badge\" as a suffix.\n3. Icon names are PascalCase with no spaces. PascalCaseIsCapitalizedInsteadOfASpace.\n4. Numbers in names are always typed out. For instance, it's `ZeroX` instead of `0x` (sorry 0x, blame JavaScript).\n\n---\n\n## More apps by me\n\nI like making things. [Check out what I'm up to lately](https://rossmoody.com).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frossmoody%2Fcryptocons","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frossmoody%2Fcryptocons","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frossmoody%2Fcryptocons/lists"}