cryptocons.io

Cryptocons

Cryptocons is a collection of icon components and utility functions that make it easier to manage cryptocurreny icons in your React 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.

Installation

yarn add cryptocons

# or

npm i cryptocons

Import

Once the package is installed, importing and using icons is pretty simple. They are available as CommonJs or ES modules.

CommonJS

const { Binance, Coinbase } = require('cryptocons')

ES Module

import { Binance, Coinbase } from 'cryptocons

Usage

Basic usage

Each icon is wrapped in a forwardRef that exposes the underlying SVG element as a ref. Any valid SVG properties can be added to a cryptocon.

Changing icon size

Aside from regular SVG properties, each icon has access to a small set of custom properties. One of them is size. The size property is equivalent to setting the height and width of the SVG. The following examples are all fuctionally the same.

Changing badge radius

Another component property exclusive to Badge icon types is badgeRadius.

Setting a badgeRadius will round the corners from a square to a circle depending on the number. Setting a badgeRadius on an icon that isn't a Badge will have no effect. The default radius is 8.

Cryptocon Components

There are three available higher order components that bundle available cryptocons into a single component and that can be rendered using the icon property.

Cryptocon

All available icons can be rendered with the icon property.

CryptoconBadge

Only Badge icons will be autocompleted with intellisense or available to render with the icon property.

CryptoconLogo

Only Logo icons will be autocompleted with intellisense or available to render with the icon property.

Creating custom cryptocons

There are two methods for creating your own cryptocons.

The Icon component

The Icon component renders an SVG element to create custom cryptocons on the fly. The Icon component will need supplied a viewBox.

import { Icon } from 'cryptocons'

const ExampleIcon = () => (
    <Icon viewBox="0 0 24 24">
        <path d="M 100, 100 m -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0" />
    </Icon>
)

The createIcon convenience function

The createIcon function is a convenience wrapper around the Icon component allowing you to achieve the same result with less effort. The mandatory viewBox is 0 0 24 24 when using the createIcon function.

import { createIcon } from 'cryptocons'

const ExampleIcon = createIcon({
    path: (
        <path d="M 100, 100 m -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0" />
    ),
})

Implementation

Accessibility

Paraphrasing from CSS Tricks on accessible SVG implementation and other references, an icon can be implemented in 2 main ways.

1. Decorative

Cryptocon icons assume decorative intent. What this means is icons have aria-hidden="true" and focusable="false" set by default. It's favorable to let assistive technology instead of the icon recognize parent elements. SVG elements with an aria-label are more verbose because they are announced as a group, so it's favorable to go with aria-label on the primary interactive parent element.

<button onClick={navigateHome}>
    <BinanceBadge />
    Navigate home
</button>

<button aria-label="Do Binance action">
    <BinanceBadge />
</button>

When icons are wrapped by an interactive element, what’s important is that the link has informative text. Therefore, if a component can be described by visible text, it is recommended to reference that text with an aria-label attribute rather than using the title property.

<a href="/" aria-label="Navigate home">
    <Coinbase />
</a>

<a href="/">
    Navigate home
    <Coinbase />
</a>

2. Standalone

Suppose the icon is being used as a standalone interactive element and isn't accompanied by a visible text label. In that case, it's best to use a combination of role, aria-label, and ensuring the icon can be discovered by assistive technology by setting aria-hidden to false.

<Home
    onClick={navigateHome}
    role="img"
    aria-label="Navigate home"
    aria-hidden={false}
/>