Getting started

Installation

pnpm add @api3/logos
npm i @api3/logos
yarn add @api3/logos

Usage

React

import { ChainLogo, SymbolLogo, ApiProviderLogo } from '@api3/logos';

<div>
    <img src={ChainLogo('43114')} width={50} height={50} alt="43114" />
    <img src={SymbolLogo('BTC')} width={50} height={50} alt="BTC" />
    <img src={ApiProviderLogo('nodary')} width={50} height={50} alt="nodary" />
</div>;

HTML

<template>
    <div>
        <img src={ChainLogo('43114')} width={50} height={50} alt='43114' />
        <img src={SymbolLogo('BTC')} width={50} height={50} alt='BTC' />
        <img src={ApiProviderLogo('nodary')} width={50} height={50} alt='nodary' />
    </div>
</template>

<script>
import { ChainLogo, SymbolLogo, ApiProviderLogo } from '@api3/logos';

export default {
...
methods: {
    getSymbolLogo(symbol) {
      return SymbolLogo(symbol);
    },
    getChainLogo(chainId) {
      return ChainLogo(chainId);
    },
    getApiProviderLogo(apiProvider) {
      return ApiProviderLogo(apiProvider);
    },
}
...
}
</script>

API

light prop is optional and defaults to false (dark theme). light = true will return the light theme logo.

ChainLogo

| Prop | Type | Description | | ----- | ------- | ----------- | | id | string | Chain id | | light | boolean | Light theme |

SymbolLogo

| Prop | Type | Description | | ----- | ------- | ----------- | | id | string | Symbol id | | light | boolean | Light theme |

ApiProviderLogo

| Prop | Type | Description | | ----- | ------- | ----------- | | id | string | ApiProvider | | light | boolean | Light theme |

Visit

Live demo at https://api3dao.github.io/logos