Polkadot React Icons

This package contains two different icon sets ("keyline" and "solid") specifically for Polkadot and other blockchain or crypto-related projects. Additionally, the "keyline" icons can also be styled as "two colour".

Installation

In any React project, you can install this package from npm:

# Install with npm, Yarn or pnpm
npm install @w3f/polkadot-icons

yarn add @w3f/polkadot-icons

pnpm add @w3f/polkadot-icons

How to use

Direct import

The icons can be imported directly from either the keyline or solid subdirectory, then used as regular React components

import Language from '@w3f/polkadot-icons/keyline/Language'
import SmartContract from '@w3f/polkadot-icons/solid/SmartContract'

const MyComponent = () => (
	<div>
		Hello, World!
		<Language />
		<SmartContract />
	</div>
)

The components accepts the same props as you can expect on any other SVG component.

<Share aria-hidden="true" focusable="false" className="share-button" />

Import through Icon component

Optionally, the icons can be imported through the Icon component.

import Icon from '@w3f/polkadot-icons/Icon'

const MyComponent = () => (
	<div>
		Hello, World!
		<Icon name="Language" />
		<Icon name="SmartContract" variant="solid" />
	</div>
)

This component accepts the same props as you can expect on any other SVG component.

<Icon
	name="Share"
	aria-hidden="true"
	focusable="false"
	className="share-button"
/>

Contributing

There are two icon sets – "keyline" and "solid". There is an additional "two color" icon set, which simply uses the keyline icons with different fill- and stroke colours.

Generating icons

All icons reside in src/icons as SVGs, but theey need to be transformed into TSX components. This can be done by running:

pnpm generate

This will now generate a TSX file for each component, separated into solid and keyline directories.

Building

The TSX components will neeed to be transpiled for consumers of the library. This is done by running:

pnpm build

This will first clean any old files, then transpile all TSX components to JS (with type declaration files) in the lib folder.

Publishing

The final step is to publish. First you need to update the version number in package.json, then go into lib/ and run:

pnpm publish

This will publish both icon sets in the same package.

Important note about two-colour icons

Some icons needs special treatment in order to work properly in two-colour mode. With keyline and solid icons, we simply colour all paths, circles and rectangles indiscriminately. With two-colour icons, however, we need to be selective with which nodes we want to apply colour. These nodes have a fill="none" attribute applied. This is a manual process, and it will need to be redone when importing a new SVG from Figma.