### Install and Run Next.js Example

Source: https://github.com/0xa3k5/web3icons/blob/main/examples/README.md

Navigate to the Next.js example directory, install dependencies, and start the development server.

```bash
cd examples/nextjs
bun install
bun dev
```

--------------------------------

### Install and Run React + Vite Example

Source: https://github.com/0xa3k5/web3icons/blob/main/examples/README.md

Navigate to the React + Vite example directory, install dependencies, and start the development server.

```bash
cd examples/react-vite
bun install
bun dev
```

--------------------------------

### Install and Run Project

Source: https://github.com/0xa3k5/web3icons/blob/main/examples/react-vite/README.md

Installs project dependencies using Bun and starts the development server.

```bash
bun install
bun dev
```

--------------------------------

### Install @web3icons/core with bun

Source: https://github.com/0xa3k5/web3icons/blob/main/packages/core/README.md

Use this command to install the core package using bun.

```bash
bun i @web3icons/core
```

--------------------------------

### Install @web3icons/core and @web3icons/react with bun

Source: https://github.com/0xa3k5/web3icons/blob/main/README.md

Install the core SVG package and the React component package using bun. This is an alternative package manager for installation.

```bash
bun i @web3icons/core @web3icons/react
```

--------------------------------

### Start Development Mode

Source: https://github.com/0xa3k5/web3icons/blob/main/CLAUDE.md

Starts the development server using Turbo for efficient development workflows.

```bash
# Start development mode (uses turbo dev)
bun dev
```

--------------------------------

### Install @web3icons/react

Source: https://github.com/0xa3k5/web3icons/blob/main/apps/website/src/app/blog/content/complete-guide-crypto-web3-icons.mdx

Install the @web3icons/react package using npm. This is the first step to using the library in your project.

```bash
npm install @web3icons/react
```

--------------------------------

### Install @web3icons/core with yarn

Source: https://github.com/0xa3k5/web3icons/blob/main/packages/core/README.md

Use this command to install the core package using yarn.

```bash
yarn add @web3icons/core
```

--------------------------------

### Install @web3icons/react

Source: https://github.com/0xa3k5/web3icons/blob/main/apps/website/src/app/blog/content/add-crypto-icons-react-app.mdx

Install the @web3icons/react package using npm, yarn, pnpm, or bun. No additional configuration or CSS imports are needed.

```bash
npm install @web3icons/react
```

```bash
yarn add @web3icons/react
```

```bash
pnpm add @web3icons/react
```

```bash
bun add @web3icons/react
```

--------------------------------

### Install @web3icons/core and @web3icons/react with yarn

Source: https://github.com/0xa3k5/web3icons/blob/main/README.md

Install the core SVG package and the React component package using yarn. This command is equivalent to the npm installation.

```bash
yarn add @web3icons/core @web3icons/react
```

--------------------------------

### Install @web3icons/core with npm

Source: https://github.com/0xa3k5/web3icons/blob/main/packages/core/README.md

Use this command to install the core package using npm.

```bash
npm i @web3icons/core
```

--------------------------------

### Clone Repository and Install Dependencies

Source: https://github.com/0xa3k5/web3icons/blob/main/apps/website/src/app/docs/content/guides/contributing.mdx

Clone the Web3 Icons repository and install project dependencies using Bun.

```bash
# Clone the repository
git clone https://github.com/0xa3k5/web3icons.git
cd web3icons

# Install dependencies (uses Bun)
bun install

# Build all packages
bun build:packages
```

--------------------------------

### Icon Sharing System: filePath Example (Testnets)

Source: https://github.com/0xa3k5/web3icons/blob/main/AGENTS.md

Example demonstrating the icon sharing system using `filePath` to reference mainnet icons for testnets. This reduces redundancy by reusing existing SVG files.

```json
{
  "id": "sepolia",
  "filePath": "network:ethereum", // References ethereum.svg
  "name": "Sepolia Testnet",
  "chainId": 11155111
}
```

--------------------------------

### Install Core Package

Source: https://github.com/0xa3k5/web3icons/blob/main/apps/website/src/app/blog/content/complete-guide-crypto-web3-icons.mdx

Install the core package for raw SVG access when building with frameworks like Vue, Svelte, or vanilla HTML.

```bash
npm install @web3icons/core
```

--------------------------------

### Build and Test Packages

Source: https://github.com/0xa3k5/web3icons/blob/main/apps/website/src/app/docs/content/guides/contributing.mdx

Commands to build all packages and start the website development server. Also includes commands to check generated files in core and react packages.

```bash
# Build packages
bun build:packages

# Start the website dev server
bun dev

# Check generated files
ls packages/core/src/svgs/tokens/branded/
ls packages/react/src/icons/tokens/
```

--------------------------------

### Wallet Metadata Example

Source: https://github.com/0xa3k5/web3icons/blob/main/apps/website/src/app/docs/content/common/api.mdx

An example entry for wallet metadata, including its ID, name, and supported variants.

```typescript
const wallets: TWalletMetadata[]

// Example entry
{
  id: 'metamask',
  name: 'MetaMask',
  variants: ['mono', 'branded']
}
```

--------------------------------

### Install Vite Bundle Visualizer

Source: https://github.com/0xa3k5/web3icons/blob/main/apps/website/src/app/docs/content/guides/vite.mdx

Install the rollup-plugin-visualizer for analyzing your Vite bundle size. You can install it using npm or npx.

```bash
# Install visualizer
npm install -D rollup-plugin-visualizer

# Or use npx
npx vite-bundle-visualizer
```

--------------------------------

### Install @web3icons/core and @web3icons/react with npm

Source: https://github.com/0xa3k5/web3icons/blob/main/README.md

Install the core SVG package and the React component package using npm. This is the recommended way to integrate Web3 Icons into your project.

```bash
npm i @web3icons/core @web3icons/react
```

--------------------------------

### Optimal Import Examples

Source: https://github.com/0xa3k5/web3icons/blob/main/apps/website/src/app/docs/content/guides/vite.mdx

Illustrates tree-shakeable imports versus importing everything. Use tree-shakeable imports for better bundle optimization.

```tsx
// ✅ - tree-shakeable

// ✅ - for dynamic use cases

// ❌ Avoid - imports everything
```

--------------------------------

### Analyze Bundle Size

Source: https://github.com/0xa3k5/web3icons/blob/main/examples/README.md

Run the build analysis command to verify tree-shaking and understand the bundle size of the examples.

```bash
bun run build:analyze
```

--------------------------------

### Icon Sharing System: filePath Example (Token Variants)

Source: https://github.com/0xa3k5/web3icons/blob/main/AGENTS.md

Shows how `filePath` can be used for multiple token listings that share the same icon. This simplifies icon management for similar tokens.

```json
{
  "id": "tether-bridged",
  "filePath": "token:USDT", // References USDT.svg
  "symbol": "USDT.e",
  "name": "Tether USD (Bridged)"
}
```

--------------------------------

### Token Metadata Example

Source: https://github.com/0xa3k5/web3icons/blob/main/apps/website/src/app/docs/content/common/api.mdx

An example entry for token metadata, including its ID, name, symbol, supported variants, contract addresses across networks, and market cap rank.

```typescript
const tokens: TTokenMetadata[]

// Example entry
{
  id: 'bitcoin',
  name: 'Bitcoin',
  symbol: 'BTC',
  variants: ['mono', 'branded', 'background'],
  addresses: {
    ethereum: '0x2260fac5e5542a773aa44fbcfedf7c193bc2c599'
  },
  marketCapRank: 1
}
```

--------------------------------

### Tree-Shaking Example

Source: https://github.com/0xa3k5/web3icons/blob/main/apps/website/src/app/docs/content/react/performance.mdx

Demonstrates correct and incorrect ways to import icons to ensure tree-shaking works effectively. Avoid dynamic lookups to prevent breaking tree-shaking.

```tsx
// Good - only BTC and ETH icons included

// Bad - includes ALL icons

// Bad - breaks tree-shaking
const iconName = 'TokenETH'
const Icon = Icons[iconName] // Dynamic lookup prevents tree-shaking
```

--------------------------------

### Network Metadata Example

Source: https://github.com/0xa3k5/web3icons/blob/main/apps/website/src/app/docs/content/common/api.mdx

An example entry for network metadata, showing its ID, name, short name, chain ID, CAIP-2 identifier, supported variants, and native coin ID.

```typescript
const networks: TNetworkMetadata[]

// Example entry
{
  id: 'ethereum',
  name: 'Ethereum',
  shortName: 'ETH',
  chainId: 1,
  caip2id: 'eip155:1',
  variants: ['mono', 'branded'],
  nativeCoinId: 'ethereum'
}
```

--------------------------------

### Basic React Icon Usage

Source: https://github.com/0xa3k5/web3icons/blob/main/apps/website/src/app/docs/content/guides/vite.mdx

Demonstrates how to import and use web3icons as React components in your application. Ensure @web3icons/react is installed.

```tsx
// src/App.tsx

function App() {
  return (
    <div className="flex gap-4">
      <TokenBTC size={32} variant="branded" />
      <TokenETH size={32} variant="branded" />
      <NetworkEthereum size={32} variant="branded" />
    </div>
  )
}

export default App
```

--------------------------------

### Exchange Metadata Example

Source: https://github.com/0xa3k5/web3icons/blob/main/apps/website/src/app/docs/content/common/api.mdx

An example entry for exchange metadata, specifying its ID, name, type (e.g., 'dex'), and supported variants.

```typescript
const exchanges: TExchangeMetadata[]

// Example entry
{
  id: 'uniswap',
  name: 'Uniswap',
  type: 'dex',
  variants: ['mono', 'branded']
}
```

--------------------------------

### React Icon Usage

Source: https://github.com/0xa3k5/web3icons/blob/main/apps/website/src/app/docs/content/home.mdx

Demonstrates how to import and use token, network, and wallet icons from the Web3 Icons React package. Ensure the package is installed and imported correctly.

```jsx
function App() {
  return (
    <div>
      <TokenBTC size={32} variant="branded" />
      <NetworkEthereum size={32} variant="branded" />
      <WalletMetamask size={32} variant="branded" />
    </div>
  )
}
```

--------------------------------

### Icon Sharing System: filePath Example (Wrapped Tokens)

Source: https://github.com/0xa3k5/web3icons/blob/main/AGENTS.md

Illustrates using `filePath` to link wrapped tokens to their underlying token's icon. This is useful for maintaining a consistent visual representation.

```json
{
  "id": "wrapped-bitcoin",
  "filePath": "token:BTC", // References BTC.svg
  "symbol": "WBTC",
  "name": "Wrapped Bitcoin"
}
```

--------------------------------

### Render Icons with @web3icons/core

Source: https://github.com/0xa3k5/web3icons/blob/main/apps/website/src/app/docs/content/guides/remix.mdx

Use the @web3icons/core package to render icons as images. This example shows how to import and use SVG assets for tokens and networks.

```tsx
// app/routes/icons.tsx

export default function Icons() {
  return (
    <div className="flex gap-4">
      <img src={svgs.tokens.brandedBTC} alt="Bitcoin" width={32} height={32} />
      <img src={svgs.tokens.brandedETH} alt="Ethereum" width={32} height={32} />
      <img
        src={svgs.networks.brandedPolygon}
        alt="Polygon"
        width={32}
        height={32}
      />
    </div>
  )
}
```

--------------------------------

### Direct File Path Examples

Source: https://github.com/0xa3k5/web3icons/blob/main/apps/website/src/app/docs/content/core/quick-start.mdx

Illustrates the directory structure for accessing SVG files directly within the package. This is useful for build tools that support direct SVG imports.

```plaintext
// Tokens: /svgs/tokens/{variant}/{SYMBOL}.svg

// Networks: /svgs/networks/{variant}/{kebab-case}.svg

// Wallets: /svgs/wallets/{variant}/{kebab-case}.svg
```

--------------------------------

### Accessing Exchange Icons

Source: https://github.com/0xa3k5/web3icons/blob/main/apps/website/src/app/docs/content/core/api.mdx

Demonstrates how to get branded and mono variants of exchange icons using PascalCase keys.

```javascript
svgs.exchanges.brandedUniswap
svgs.exchanges.monoUniswap

svgs.exchanges.brandedBinance
svgs.exchanges.monoBinance

svgs.exchanges.brandedCoinbase
svgs.exchanges.monoCoinbase
```

--------------------------------

### TypeScript Support for Icon Creation

Source: https://github.com/0xa3k5/web3icons/blob/main/apps/website/src/app/docs/content/core/quick-start.mdx

Demonstrates how to leverage TypeScript for type safety when creating icons. This example defines an interface for token display properties and uses it to generate an `<img>` element.

```typescript
interface TokenDisplay {
  token: TTokenMetadata
  size: number
}

function createIcon({ token, size }: TokenDisplay) {
  const key = `branded${token.symbol}` as keyof typeof svgs.tokens
  const img = document.createElement('img')
  img.src = svgs.tokens[key]
  img.width = size
  return img
}
```

--------------------------------

### Sharing Icons via filePath

Source: https://github.com/0xa3k5/web3icons/blob/main/apps/website/src/app/docs/content/guides/contributing.mdx

Examples demonstrating how multiple metadata entries can reference the same SVG file using the 'filePath' property, such as for Wrapped Bitcoin and Sepolia testnet.

```json
// Wrapped Bitcoin uses Bitcoin's icon
{
  "id": "wrapped-bitcoin",
  "filePath": "token:BTC",
  "symbol": "WBTC",
  "name": "Wrapped Bitcoin"
}

// Sepolia testnet uses Ethereum's icon
{
  "id": "sepolia",
  "filePath": "network:ethereum",
  "name": "Sepolia Testnet",
  "chainId": 11155111
}
```

--------------------------------

### Direct SVG Import Example

Source: https://github.com/0xa3k5/web3icons/blob/main/apps/website/src/app/docs/content/guides/vite.mdx

Demonstrates how to import and use an SVG file directly as an image source in a React component after configuring Vite to handle SVG assets.

```tsx
// Direct SVG import

function App() {
  return <img src={btcIcon} alt="Bitcoin" />
}
```

--------------------------------

### Portfolio Card Component

Source: https://github.com/0xa3k5/web3icons/blob/main/apps/website/src/app/blog/content/add-crypto-icons-react-app.mdx

A complete React component example demonstrating how to build a portfolio card using the dynamic TokenIcon import. It displays token details, balance, and 24h change with appropriate styling.

```tsx
import { TokenIcon } from '@web3icons/react/dynamic'

interface Holding {
  symbol: string
  name: string
  balance: number
  value: number
  change24h: number
}

function PortfolioCard({ holding }: { holding: Holding }) {
  const isPositive = holding.change24h >= 0

  return (
    <div className="flex items-center gap-4 rounded-lg border border-gray-800 p-4">
      <TokenIcon symbol={holding.symbol} size={40} variant="background" />

      <div className="flex-1">
        <div className="flex items-center gap-2">
          <span className="font-medium">{holding.name}</span>
          <span className="text-sm text-gray-500">{holding.symbol}</span>
        </div>
        <span className="text-sm text-gray-400">
          {holding.balance} {holding.symbol}
        </span>
      </div>

      <div className="text-right">
        <div className="font-mono">${holding.value.toLocaleString()}</div>
        <div
          className={`font-mono text-sm ${isPositive ? 'text-green-400' : 'text-red-400'}`}
        >
          {isPositive ? '+' : ''}
          {holding.change24h.toFixed(2)}%
        </div>
      </div>
    </div>
  )
}
```

--------------------------------

### Post-Build Step

Source: https://github.com/0xa3k5/web3icons/blob/main/CLAUDE.md

Runs the post-build script, which includes generating icon documentation and formatting code.

```bash
# Post-build step (runs after main build)
bun post-build      # Runs generate-icons-md + format
```

--------------------------------

### Importing Dynamic and Static Components

Source: https://github.com/0xa3k5/web3icons/blob/main/README.md

Demonstrates how to import dynamic components from the '/dynamic' entry point and static components from the main entry point. Dynamic components are client-side only and not tree-shakable, while static components are server-safe and tree-shakable.

```jsx
// ✅ Dynamic components (client-side only)
import { TokenIcon, NetworkIcon } from '@web3icons/react/dynamic'

// ✅ Static components (server-safe, tree-shakable)
import { TokenBTC, NetworkEthereum } from '@web3icons/react'
```

--------------------------------

### Core Package Build Pre-build Steps

Source: https://github.com/0xa3k5/web3icons/blob/main/AGENTS.md

Outlines the pre-build steps for the core package, including ordering metadata, optimizing SVGs using SVGO, and generating import mappings and export files.

```typescript
# Pre-build steps (scripts/build-scripts/core/core.pre-build.ts):

# 1. Order metadata: Alphabetically sorts all metadata JSON files
# 2. Optimize SVGs: Processes raw-svgs/ → packages/core/src/svgs/
#    - Applies SVGO optimization
#    - Organizes by type and variant folders
# 3. Generate svg-module.ts: Creates import mappings for all SVGs
# 4. Generate index.ts: Exports all SVG assets
```

--------------------------------

### Node Ancestors Function

Source: https://github.com/0xa3k5/web3icons/blob/main/examples/react-vite/stats.html

Returns an array of all ancestors of a node, starting from the node itself up to the root.

```javascript
function node_ancestors() {
  var node = this,
      nodes = [node];
  while (node = node.parent) {
    nodes.push(node);
  }
  return nodes;
}
```

--------------------------------

### Build Figma Plugin

Source: https://github.com/0xa3k5/web3icons/blob/main/apps/figma-plugin/README.md

Run this command to build the plugin, generating manifest.json and the JavaScript bundle.

```bash
$ npm run build
```

--------------------------------

### Compute Height Function

Source: https://github.com/0xa3k5/web3icons/blob/main/examples/react-vite/stats.html

Calculates and assigns the height property to each node in the hierarchy, starting from the leaves.

```javascript
function computeHeight(node) {
  var height = 0;
  do {
    node.height = height;
  } while ((node = node.parent) && (node.height < ++height));
}
```

--------------------------------

### TokenBTC Background Variant

Source: https://github.com/0xa3k5/web3icons/blob/main/apps/website/src/app/docs/content/react/quick-start.mdx

Example of using the 'background' variant for the TokenBTC icon with a size of 48 pixels.

```javascript
import { TokenBTC } from '@web3icons/react'

<TokenBTC variant="background" size={48} />
```

--------------------------------

### TokenBTC Branded Variant

Source: https://github.com/0xa3k5/web3icons/blob/main/apps/website/src/app/docs/content/react/quick-start.mdx

Example of using the 'branded' variant for the TokenBTC icon with a size of 48 pixels.

```javascript
import { TokenBTC } from '@web3icons/react'

<TokenBTC variant="branded" size={48} />
```

--------------------------------

### TokenBTC Mono Variant

Source: https://github.com/0xa3k5/web3icons/blob/main/apps/website/src/app/docs/content/react/quick-start.mdx

Example of using the 'mono' variant for the TokenBTC icon with a size of 48 pixels.

```javascript
import { TokenBTC } from '@web3icons/react'

<TokenBTC variant="mono" size={48} />
```

--------------------------------

### Optimal Import Patterns for Tree-Shaking

Source: https://github.com/0xa3k5/web3icons/blob/main/apps/website/src/app/docs/content/guides/nextjs.mdx

Illustrates recommended import patterns for ensuring tree-shakable code and minimal bundle sizes. Avoid importing entire libraries when only specific icons are needed.

```tsx
// ✅ - tree-shakeable, minimal bundle

// ✅ - only load when needed

// ❌ - imports entire icon library
```

--------------------------------

### Build All Packages

Source: https://github.com/0xa3k5/web3icons/blob/main/apps/website/src/app/docs/content/guides/contributing.mdx

Build all packages within the project after adding new icons or making code changes.

```bash
# Build all packages
bun build:packages
```

--------------------------------

### Build All Packages

Source: https://github.com/0xa3k5/web3icons/blob/main/AGENTS.md

Builds all packages and apps in the monorepo, including post-build steps. Uses Bun as the package manager and Turbo for build orchestration.

```bash
bun build
```

--------------------------------

### Handle Exclamation Mark for Negation

Source: https://github.com/0xa3k5/web3icons/blob/main/examples/react-vite/stats.html

Processes the exclamation mark, potentially initiating an extended glob 'negate' pattern or a direct negation if at the start.

```javascript
if (value === '!') {
  if (opts.noextglob !== true && peek() === '(') {
    if (peek(2) !== '?' || !/[!=<:]/.test(peek(3))) {
      extglobOpen('negate', value);
      continue;
    }
  }
  if (opts.nonegate !== true && state.index === 0) {
    negate();
    continue;
  }
}
```

--------------------------------

### Node Sum Function

Source: https://github.com/0xa3k5/web3icons/blob/main/examples/react-vite/stats.html

Computes the sum of values for each node, starting from the leaves and moving up. Requires a function to extract the value from node data.

```javascript
function node_sum(value) {
  return this.eachAfter(function(node) {
    var sum = +value(node.data) || 0,
        children = node.children,
        i = children && children.length;
    while (--i >= 0) sum += children[i].value;
    node.value = sum;
  });
}
```

--------------------------------

### Analyze Bundle Size with Source Map Explorer

Source: https://github.com/0xa3k5/web3icons/blob/main/apps/website/src/app/docs/content/guides/remix.mdx

Build your Remix project with sourcemaps enabled and then use source-map-explorer to analyze the size of your client-side JavaScript bundles.

```bash
# Build with stats
npx remix build --sourcemap

# Analyze
npx source-map-explorer build/client/**/*.js
```

--------------------------------

### TypeScript Type Inference Example

Source: https://github.com/0xa3k5/web3icons/blob/main/apps/website/src/app/docs/content/guides/nextjs.mdx

No additional TypeScript configuration is required as the packages include full type definitions. Types are automatically inferred.

```typescript
// Types are automatically inferred

type TokenBTCProps = ComponentProps<typeof TokenBTC>
// { size?: number | string; variant?: 'mono' | 'branded' | 'background'; ... }
```

--------------------------------

### Basic Glob Matching

Source: https://github.com/0xa3k5/web3icons/blob/main/examples/react-vite/stats.html

Use picomatch to create a function that checks if a string matches a glob pattern. This example demonstrates matching files that do not end with 'a'.

```javascript
const picomatch = require('picomatch');

const isMatch = picomatch('*.!(*a)');
console.log(isMatch('a.a')); //=> false
console.log(isMatch('a.b')); //=> true
```

--------------------------------

### Icon Management Workflow

Source: https://github.com/0xa3k5/web3icons/blob/main/AGENTS.md

Describes the workflow for adding and managing icons, including using `bun add-icons` to detect changes and prompt for metadata, or `bun add-metadata` for referencing existing icons.

```bash
2. **Run `bun add-icons`**:
   - Detects git changes in raw-svgs/
   - Prompts for metadata (name, id, CoinGecko ID, etc.)
   - Adds entries to metadata JSON files
   - Or use `bun add-metadata` to reference existing icons

3. **Build packages**:
   - `bun build:packages` processes everything
   - SVGs are optimized and copied to core package
   - React components are auto-generated
```

--------------------------------

### Bundle Analysis Commands

Source: https://github.com/0xa3k5/web3icons/blob/main/apps/website/src/app/docs/content/core/api.mdx

Lists commands for analyzing bundle size with Vite, Webpack, and Next.js.

```bash
# Vite
npx vite-bundle-visualizer

# Webpack
npx webpack-bundle-analyzer

# Next.js
ANALYZE=true npm run build
```

--------------------------------

### Network Switcher Component Example

Source: https://github.com/0xa3k5/web3icons/blob/main/apps/website/src/app/docs/content/guides/remix.mdx

A React component for Remix that allows users to switch between different blockchain networks. It uses the NetworkIcon component from web3icons.

```typescript
// app/components/network-switcher.tsx

const networks = [
  { chainId: 1, name: 'Ethereum', network: 'ethereum' },
  { chainId: 137, name: 'Polygon', network: 'polygon' },
  { chainId: 42161, name: 'Arbitrum', network: 'arbitrum' },
  { chainId: 10, name: 'Optimism', network: 'optimism' },
  { chainId: 8453, name: 'Base', network: 'base' },
]

interface Props {
  currentChainId: number
  onSwitch: (chainId: number) => void
}

export function NetworkSwitcher({ currentChainId, onSwitch }: Props) {
  const [isOpen, setIsOpen] = useState(false)
  const current = 
    networks.find((n) => n.chainId === currentChainId) || networks[0]

  return (
    <div className="relative">
      <button
        onClick={() => setIsOpen(!isOpen)}
        className="flex items-center gap-2 rounded-lg border px-3 py-2"
      >
        <NetworkIcon chainId={current.chainId} size={20} variant="branded" />
        <span>{current.name}</span>
      </button>

      {isOpen && (
        <div className="absolute right-0 mt-2 w-48 rounded-lg border bg-white shadow-lg">
          {networks.map((network) => (
            <button
              key={network.chainId}
              onClick={() => {
                onSwitch(network.chainId)
                setIsOpen(false)
              }}
              className={`flex w-full items-center gap-2 px-3 py-2 hover:bg-gray-50 ${ 
                network.chainId === currentChainId ? 'bg-blue-50' : ''
              }`}
            >
              <NetworkIcon
                chainId={network.chainId}
                size={20}
                variant="branded"
              />
              <span>{network.name}</span>
            </button>
          ))}
        </div>
      )}
    </div>
  )
}
```

--------------------------------

### Importing and Using Individual Web3 Icons in React

Source: https://github.com/0xa3k5/web3icons/blob/main/README.md

Demonstrates how to import and use various individual token, network, wallet, and exchange icons from the `@web3icons/react` library. Each icon can be customized with `size`, `variant`, and `className` props. This approach leverages tree-shaking for smaller bundle sizes.

```jsx
import {
  TokenBTC,
  TokenETH,
  TokenGRT,
  NetworkBinanceSmartChain,
  NetworkEthereum,
  NetworkAvalanche,
  WalletLedger,
  WalletMetamask,
  WalletSafe,
  ExchangeBybit,
  ExchangePancakeSwap,
  ExchangeBalancer,
} from '@web3icons/react'

const App = () => {
  return (
    <>
      <div>
        {/* Token Icons */}
        <TokenBTC size={64} variant="branded" className="my-custom-class" />
        <TokenETH size={64} variant="branded" className="my-custom-class" />
        <TokenGRT size={64} variant="branded" className="my-custom-class" />
      </div>
      <div>
        {/* Network Icons */}
        <NetworkEthereum
          size={64}
          variant="branded"
          className="my-custom-class"
        />
        <NetworkAvalanche
          size={64}
          variant="branded"
          className="my-custom-class"
        />
        <NetworkBinanceSmartChain
          size={64}
          variant="branded"
          className="my-custom-class"
        />
      </div>
      <div>
        {/* Wallet Icons */}
        <WalletLedger size={64} variant="branded" className="my-custom-class" />
        <WalletMetamask
          size={64}
          variant="branded"
          className="my-custom-class"
        />
        <WalletSafe size={64} variant="branded" className="my-custom-class" />
      </div>
      <div>
        {/* Exchange Icons */}
        <ExchangeBybit
          size={64}
          variant="branded"
          className="my-custom-class"
        />
        <ExchangeBalancer
          size={64}
          variant="branded"
          className="my-custom-class"
        />
        <ExchangePancakeSwap
          size={64}
          variant="branded"
          className="my-custom-class"
        />
      </div>
    </>
  )
}

export default App
```

--------------------------------

### RGB Interpolation

Source: https://github.com/0xa3k5/web3icons/blob/main/examples/react-vite/stats.html

Creates an RGB color interpolator, optionally applying gamma correction. It handles color conversion and interpolation between start and end RGB values.

```javascript
var rgb = (function rgbGamma(y) { var color = gamma(y); function rgb(start, end) { var r = color((start = rgb$1(start)).r, (end = rgb$1(end)).r), g = color(start.g, end.g), b = color(start.b, end.b), opacity = nogamma(start.opacity, end.opacity); return function(t) { start.r = r(t); start.g = g(t); start.b = b(t); start.opacity = opacity(t); return start + ""; }; } rgb.gamma = rgbGamma; return rgb; })(1);
```

--------------------------------

### Accessing Token Icons

Source: https://github.com/0xa3k5/web3icons/blob/main/apps/website/src/app/docs/content/core/api.mdx

Demonstrates how to access branded, mono, and background variants of token icons using their specific keys.

```javascript
svgs.tokens.brandedBTC // Bitcoin branded
svgs.tokens.monoBTC // Bitcoin mono
svgs.tokens.backgroundBTC // Bitcoin with background

svgs.tokens.brandedETH // Ethereum branded
svgs.tokens.monoETH // Ethereum mono
svgs.tokens.backgroundETH // Ethereum with background
```

--------------------------------

### Handling Slashes in Regex

Source: https://github.com/0xa3k5/web3icons/blob/main/examples/react-vite/stats.html

This code manages forward slashes '/' in a regex, specifically handling the case where a glob starts with './' to adjust the parsing state.

```javascript
if (value === '/') { if (prev.type === 'dot' && state.index === state.start + 1) { state.start = state.index + 1; state.consumed = ''; state.output = ''; tokens.pop(); prev = bos; continue; } push({ type: 'slash', value, output: SLASH_LITERAL }); continue; }
```

--------------------------------

### React Package Build Pre-build Steps

Source: https://github.com/0xa3k5/web3icons/blob/main/AGENTS.md

Details the pre-build steps for the react package, focusing on converting SVGs to React components using SVGR and generating an index file for component exports.

```typescript
# Pre-build steps (scripts/build-scripts/react/react.pre-build.ts):

# 1. Generate components: Converts SVGs to React components using SVGR
#    - Creates `Token{Symbol}`, `Network{Name}`, `Wallet{Name}`, `Exchange{Name}` components
#    - Located in packages/react/src/icons/
# 2. Generate index.ts: Exports all React components
```

--------------------------------

### Build Individual Packages

Source: https://github.com/0xa3k5/web3icons/blob/main/CLAUDE.md

Builds specific packages. Use 'bun build:common' for metadata, 'bun build:core' for optimized SVGs, and 'bun build:react' for React components.

```bash
# Build individual packages
bun build:common    # Generates metadata TypeScript files from JSON
bun build:core      # Optimizes SVGs, generates index and svg-module
bun build:react     # Generates React components from SVGs
```

--------------------------------

### Build All Packages and Apps

Source: https://github.com/0xa3k5/web3icons/blob/main/CLAUDE.md

Executes the full build process for all packages and applications within the monorepo, including post-build steps.

```bash
# Build all packages and apps (runs turbo build + post-build)
bun build
```

--------------------------------

### Type-Safe Token Card Component

Source: https://github.com/0xa3k5/web3icons/blob/main/apps/website/src/app/docs/content/common/quick-start.mdx

Example of a React component for displaying token information, enforcing type safety for props like token metadata, variant, and click handlers.

```typescript

interface TokenCardProps {
  token: TTokenMetadata
  variant: TVariant
  onClick: (token: TTokenMetadata) => void
}

function TokenCard({ token, variant, onClick }: TokenCardProps) {
  return (
    <button onClick={() => onClick(token)}>
      <span>{token.name} ({token.symbol})</span>
    </button>
  )
}
```

--------------------------------

### Verify Tree-Shaking with Bundler Analyzers

Source: https://github.com/0xa3k5/web3icons/blob/main/apps/website/src/app/docs/content/react/performance.mdx

Commands to analyze your bundle size and verify that only necessary icons are included. These tools help confirm tree-shaking effectiveness.

```bash
# Next.js
ANALYZE=true npm run build

# Vite
npx vite-bundle-visualizer

# Webpack
npx webpack-bundle-analyzer
```

--------------------------------

### Dynamic Component Reference

Source: https://github.com/0xa3k5/web3icons/blob/main/apps/website/src/app/blog/content/add-crypto-icons-react-app.mdx

Examples of using dynamic components for Token, Network, Wallet, and Exchange icons. These components look up the correct SVG at runtime based on the provided symbol or ID.

```tsx
// Token: look up by symbol
<TokenIcon symbol="ETH" size={24} variant="branded" />

// Network: look up by network ID
<NetworkIcon network="ethereum" size={24} variant="branded" />

// Wallet: look up by wallet ID
<WalletIcon wallet="metamask" size={24} variant="branded" />

// Exchange: look up by exchange ID
<ExchangeIcon exchange="binance" size={24} variant="branded" />
```

--------------------------------

### Accessing Network Icons

Source: https://github.com/0xa3k5/web3icons/blob/main/apps/website/src/app/docs/content/core/api.mdx

Shows how to retrieve branded and mono variants of network icons using PascalCase naming conventions.

```javascript
svgs.networks.brandedEthereum
svgs.networks.monoEthereum

svgs.networks.brandedPolygon
svgs.networks.monoPolygon

svgs.networks.brandedBinanceSmartChain
svgs.networks.monoBinanceSmartChain
```

--------------------------------

### Client Components in Next.js App Router

Source: https://github.com/0xa3k5/web3icons/blob/main/apps/website/src/app/docs/content/guides/nextjs.mdx

For dynamic components or those requiring client-side interactivity in Next.js, use the 'use client' directive. This example shows a simple token display component.

```tsx
// app/components/token-display.tsx
'use client'

interface Props {
  symbol: string
}

export function TokenDisplay({ symbol }: Props) {
  return <TokenIcon symbol={symbol} size={32} variant="branded" />
}
```

```tsx
// app/page.tsx

export default function Page() {
  return <TokenDisplay symbol="BTC" />
}
```

--------------------------------

### Accessing Wallet Icons

Source: https://github.com/0xa3k5/web3icons/blob/main/apps/website/src/app/docs/content/core/api.mdx

Illustrates accessing branded and mono variants of wallet icons, keyed by their PascalCase names.

```javascript
svgs.wallets.brandedMetamask
svgs.wallets.monoMetamask

svgs.wallets.brandedCoinbaseWallet
svgs.wallets.monoCoinbaseWallet

svgs.wallets.brandedRainbow
svgs.wallets.monoRainbow
```

--------------------------------

### Tick Specification for Scale Generation

Source: https://github.com/0xa3k5/web3icons/blob/main/examples/react-vite/stats.html

Calculates tick specifications (start, stop, increment) for generating axis ticks on a scale. Used in data visualization libraries for creating appropriate tick marks.

```javascript
function tickSpec(start, stop, count) {
  const step = (stop - start) / Math.max(0, count),
      power = Math.floor(Math.log10(step)),
      error = step / Math.pow(10, power),
      factor = error >= e10 ? 10 : error >= e5 ? 5 : error >= e2 ? 2 : 1;
  let i1, i2, inc;
  if (power < 0) {
    inc = Math.pow(10, -power) / factor;
    i1 = Math.round(start * inc);
    i2 = Math.round(stop * inc);
    if (i1 / inc < start) ++i1;
    if (i2 / inc > stop) --i2;
    inc = -inc;
  } else {
    inc = Math.pow(10, power) * factor;
    i1 = Math.round(start / inc);
    i2 = Math.round(stop / inc);
    if (i1 * inc < start) ++i1;
    if (i2 * inc > stop) --i2;
  }
  if (i2 < i1 && 0.5 <= count && count < 2) return tickSpec(start, stop, count * 2);
  return [i1, i2, inc];
}
```

--------------------------------

### Display Wallet Assets with Remix Loaders

Source: https://github.com/0xa3k5/web3icons/blob/main/apps/website/src/app/docs/content/guides/remix.mdx

Fetch wallet assets dynamically using Remix loaders and display them with TokenIcon. Ensure the `fetchWalletAssets` function is implemented and accessible.

```tsx
// app/routes/wallet.$address.tsx

interface Asset {
  symbol: string
  name: string
  balance: string
}

export async function loader({ params }: LoaderFunctionArgs) {
  const assets = await fetchWalletAssets(params.address!)
  return json({ assets })
}

export default function Wallet() {
  const { assets } = useLoaderData<typeof loader>()

  return (
    <div className="space-y-4">
      {assets.map((asset) => (
        <div
          key={asset.symbol}
          className="flex items-center gap-4 border-b pb-4"
        >
          <TokenIcon symbol={asset.symbol} size={40} variant="branded" />
          <div>
            <div className="font-semibold">{asset.name}</div>
            <div className="text-sm text-gray-500">
              {asset.balance} {asset.symbol}
            </div>
          </div>
        </div>
      ))}
    </div>
  )
}
```

--------------------------------

### Remix Hydration Tip with Static and Dynamic Icons

Source: https://github.com/0xa3k5/web3icons/blob/main/apps/website/src/app/docs/content/guides/remix.mdx

This pattern demonstrates how to manage hydration mismatches in Remix by using static icons for critical above-the-fold content and dynamic icons for content below the fold. It suggests using `ClientOnly` from `remix-utils` for dynamic components.

```tsx
// Recommended pattern

export default function Page() {
  return (
    <>
      {/* Hero - uses static icons for fast paint */}
      <header>
        <TokenBTC size={48} variant="branded" />
      </header>

      {/* Below fold - dynamic icons are fine */}
      <main>
        <TokenIcon symbol={userSelectedToken} size={32} variant="branded" />
      </main>
    </>
  )
}
```

--------------------------------

### Route-Based Code Splitting with Dynamic Icons

Source: https://github.com/0xa3k5/web3icons/blob/main/apps/website/src/app/docs/content/guides/nextjs.mdx

Dynamic icons in client components are automatically code-split per route in the App Router. This example shows icons loading only when a specific route is visited.

```tsx
// app/wallet/page.tsx
'use client'

// This chunk only loads when /wallet is visited
export default function WalletPage() {
  const assets = useWalletAssets()
  return assets.map((a) => <TokenIcon key={a.symbol} symbol={a.symbol} />)
}
```

--------------------------------

### Core Package Pre-build Script

Source: https://github.com/0xa3k5/web3icons/blob/main/CLAUDE.md

Runs pre-build steps for the core package, including ordering metadata, optimizing SVGs, and generating module files.

```typescript
scripts/build-scripts/core/core.pre-build.ts
```