Skip to content

React Polkicon

A light-weight and customisable Polkadot Icon.

npm |  source

Usage

Polkicon is a light-weight component that renders an inline Polkadot icon, inheriting the font size of the nearest assigned parent element. The address prop dictates which colors are assigned to the Polkicon.

Install

First, we will install @w3ux/react-polkicon as a dependency in our project.

npm
npm i @w3ux/react-polkicon

Import

import { Polkicon } from '@w3ux/react-polkicon';
 
...
 
<h1>
  <Polkicon address="16F1ghy4bMr72BGyin7ryTxiQqJFJwpePsNJcZo1p6dUGVZT" />
</h1>

Props

address

string

The Polkadot address to be represented by the Polkicon.

background

string?

The background of the outermost circle of the icon. The --background-default CSS variable is assigned as the default value.

The address of the Polkadot account.

fontSize

string?

Apply a font size to the Polkicon's outer span container.

transform

TransformProp?

Grow or shrink the Polkicon using grow-1, grow-2 - grow-10, or shrink-1, shrink-2 - shrink-10.

inactive

boolean?

If true, the Polkicon will be displayed in grayscale.