Vela UI Docsvenizia.ai

currency-coin-bath

CurrencyCoinBath, one of the 856 Vela UI icons, in the General group: a 24px grid drawn in currentColor, so it takes the colour of the text around it. It installs on its own as @velaui/icon-currency-coin-bath.

  • 16px
  • 20px
  • 24px
  • 32px

Installation

pnpm dlx velaui add @velaui/icon-currency-coin-bath

Usage

// components/icons/currency-coin-bath.tsx
import CurrencyCoinBath from "@/components/icons/currency-coin-bath"

<CurrencyCoinBath className="size-5 text-muted" />

In use

  • In a button

  • In a sentence

    Due Friday, or whenever the venue confirms.

  • In an input

  • As a badge

    Scheduled
  • In an empty state

    No events on this day yet.

    Browse blocks

Source

import * as React from "react";

export interface CurrencyCoinBathProps extends React.SVGProps<SVGSVGElement> {
  size?: number | string;
}

/** Custom vela-ui icon, synced from Figma (node under section "Icons"). */
export function CurrencyCoinBath({ size = 24, strokeWidth = 1, className, ref, ...props }: CurrencyCoinBathProps) {
  return (
    <svg
      ref={ref}
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      strokeWidth={strokeWidth}
      className={className}
      {...props}
    >
      <path d="M11.7012 6.19174V7.59274M11.7012 15.9987V17.3997M21.6 11.9999C21.6 17.3018 17.302 21.5999 12 21.5999C6.69809 21.5999 2.40002 17.3018 2.40002 11.9999C2.40002 6.69797 6.69809 2.3999 12 2.3999C17.302 2.3999 21.6 6.69797 21.6 11.9999ZM9.59974 7.59274H13.1022C13.6596 7.59274 14.1941 7.81414 14.5882 8.20825C14.9823 8.60236 15.2037 9.13688 15.2037 9.69424V9.79441C15.2037 10.3252 14.9929 10.8342 14.6176 11.2096C14.2422 11.5849 13.7332 11.7957 13.2024 11.7957H9.59974H13.1022C13.6596 11.7957 14.1941 12.0171 14.5882 12.4112C14.9823 12.8054 15.2037 13.3399 15.2037 13.8972V13.9974C15.2037 14.5282 14.9929 15.0372 14.6176 15.4126C14.2422 15.7879 13.7332 15.9987 13.2024 15.9987H9.59974V7.59274Z" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}
CurrencyCoinBath.displayName = "CurrencyCoinBath";

export default CurrencyCoinBath;