README.md

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