JSPM

@w3f/polkadot-icons

1.0.0
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 123
  • Score
    100M100P100Q73654F
  • License CC-BY-NC-SA-4.0

SVG icons for Polkadot

Package Exports

    This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@w3f/polkadot-icons) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

    Readme

    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.