@api3/logos/README.md

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

# Getting started

## Installation

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

## Usage

### React

```js
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

```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](https://api3dao.github.io/logos)