Token Icon

import { TokenIcon } from "@/components/sol/token-icon";

const SOL_ICON =
  "https://raw.githubusercontent.com/solana-labs/token-list/main/assets/mainnet/So11111111111111111111111111111111111111112/logo.png";

export function TokenIconDemo() {
  return <TokenIcon src={SOL_ICON} alt="SOL" width={48} height={48} />;
}

Installation

pnpm dlx shadcn@latest add @solanaui/token-icon

npx shadcn@latest add @solanaui/token-icon

yarn dlx shadcn@latest add @solanaui/token-icon

Usage

const SOL_ICON =
  "https://raw.githubusercontent.com/solana-labs/token-list/main/assets/mainnet/So11111111111111111111111111111111111111112/logo.png";

<TokenIcon src={SOL_ICON} alt="SOL" width={48} height={48} />

Source Code

"use client";

import React from "react";
import { Skeleton } from "@/components/ui/skeleton";
import { cn } from "@/lib/utils";

type TokenIconProps = {
  src: string;
  alt?: string;
  width?: number;
  height?: number;
  className?: string;
};

const TokenIcon = ({
  alt = "Token",
  className = "",
  width,
  height,
  ...props
}: TokenIconProps) => {
  const [status, setStatus] = React.useState<"loading" | "loaded" | "error">(
    "loading",
  );

  if (status === "error") {
    const fontSize = typeof width === "number" ? width * 0.35 : "1rem";
    return (
      <div
        className={cn(
          "rounded-full bg-muted inline-flex items-center justify-center font-medium text-muted-foreground",
          className,
        )}
        style={{ width, height, fontSize }}
      >
        {alt.charAt(0).toUpperCase()}
      </div>
    );
  }

  return (
    <div className="relative inline-block" style={{ width, height }}>
      {status === "loading" && (
        <Skeleton
          className={cn("rounded-full absolute inset-0", className)}
          style={{ width, height }}
        />
      )}
      <img
        alt={alt}
        className={cn(
          "rounded-full block",
          status === "loading" && "opacity-0",
          className,
        )}
        onLoad={() => setStatus("loaded")}
        onError={() => setStatus("error")}
        width={width}
        height={height}
        {...props}
      />
    </div>
  );
};

export type { TokenIconProps };
export { TokenIcon };

"use client";import React from "react";import { Skeleton } from "@/components/ui/skeleton";import { cn } from "@/lib/utils";type TokenIconProps = {  src: string;  alt?: string;  width?: number;  height?: number;  className?: string;};const TokenIcon = ({  alt = "Token",  className = "",  width,  height,  ...props}: TokenIconProps) => {  const [status, setStatus] = React.useState<"loading" | "loaded" | "error">(    "loading",  );  if (status === "error") {    const fontSize = typeof width === "number" ? width * 0.35 : "1rem";    return (      <div        className={cn(          "rounded-full bg-muted inline-flex items-center justify-center font-medium text-muted-foreground",          className,        )}        style={{ width, height, fontSize }}      >        {alt.charAt(0).toUpperCase()}      </div>    );  }  return (    <div className="relative inline-block" style={{ width, height }}>      {status === "loading" && (        <Skeleton          className={cn("rounded-full absolute inset-0", className)}          style={{ width, height }}        />      )}      <img        alt={alt}        className={cn(          "rounded-full block",          status === "loading" && "opacity-0",          className,        )}        onLoad={() => setStatus("loaded")}        onError={() => setStatus("error")}        width={width}        height={height}        {...props}      />    </div>  );};export type { TokenIconProps };export { TokenIcon };

Installation

Usage

Source Code

On this page