Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rossmoody/cryptocons
Optimized React icon components and utility functions for managing cryptocurrency logos in your project.
https://github.com/rossmoody/cryptocons
bitcoin crypto cryptocurrency ethereum icon icons react react-icons svg svg-icons typescript
Last synced: 14 days ago
JSON representation
Optimized React icon components and utility functions for managing cryptocurrency logos in your project.
- Host: GitHub
- URL: https://github.com/rossmoody/cryptocons
- Owner: rossmoody
- License: mit
- Created: 2021-11-24T22:26:46.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2024-07-17T21:18:11.000Z (4 months ago)
- Last Synced: 2024-10-24T22:44:45.513Z (21 days ago)
- Topics: bitcoin, crypto, cryptocurrency, ethereum, icon, icons, react, react-icons, svg, svg-icons, typescript
- Language: TypeScript
- Homepage: https://cryptocons.io
- Size: 4.55 MB
- Stars: 27
- Watchers: 4
- Forks: 5
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Cryptocons
# What is Cryptocons?
Cryptocons is a collection of named icon modules and utility functions making it easier to manage cryptocurrency icons in your project.
Each icon is placed on a 24x24 grid and available as two types:
1. **Logo**: Plain logomark icons
2. **Badge**: Logomark icons contained in a shape that can be configured with different border radiuses from square to circle.
# Design Assets
Check out the [Figma library](https://www.figma.com/community/file/1100964857221715143/Cryptocurrency-Logos-and-Icons) for component assets.
---
# Quick start
For 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).
## 1. Install the package in your project
```bash
yarn add cryptocons
or
npm install cryptocons
```
## 2. Import icons
```jsx
import { Binance, BinanceBadge } from 'cryptocons'
```
## 3. Render the icons
```jsx
```
---
# Develop locally
If you want to tinker or contribute to Cryptocons, you will need to build the repo locally.
The 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.
## Build
### 1. Install the dependencies
```bash
yarn
```
### 2. Run the scripts
```bash
yarn build
```
This 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.
### 3. Run Storybook to view changes
```bash
yarn storybook
```
This will build the components within the `components` directory to `localhost:8000`. Any changes made to components will automatically rerender. Hack away.
## Debug
If 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.
## Test
Icon tests are run with React Testing Library and Jest.
```bash
yarn test
```
This will run all available tests within the `tests` directory inside `src` and watch for changes.
## Contributing
If 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.
The 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.
### Exporting SVGs
1. 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.
2. 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.
### Naming conventions
1. 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`.
2. 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.
3. Icon names are PascalCase with no spaces. PascalCaseIsCapitalizedInsteadOfASpace.
4. Numbers in names are always typed out. For instance, it's `ZeroX` instead of `0x` (sorry 0x, blame JavaScript).
---
## More apps by me
I like making things. [Check out what I'm up to lately](https://rossmoody.com).