Vela UI Docsvenizia.ai

currency-bath

CurrencyBath, 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-bath.

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

Installation

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

Usage

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

<CurrencyBath 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 CurrencyBathProps extends React.SVGProps<SVGSVGElement> {
  size?: number | string;
}

/** Custom vela-ui icon, synced from Figma (node under section "Icons"). */
export function CurrencyBath({ size = 24, strokeWidth = 1, className, ref, ...props }: CurrencyBathProps) {
  return (
    <svg
      ref={ref}
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      strokeWidth={strokeWidth}
      className={className}
      {...props}
    >
      <path d="M11 4V6M11 18V20M8 6H13C13.7956 6 14.5587 6.31607 15.1213 6.87868C15.6839 7.44129 16 8.20435 16 9V9.143C16 9.90072 15.699 10.6274 15.1632 11.1632C14.6274 11.699 13.9007 12 13.143 12H8H13C13.7956 12 14.5587 12.3161 15.1213 12.8787C15.6839 13.4413 16 14.2044 16 15V15.143C16 15.9007 15.699 16.6274 15.1632 17.1632C14.6274 17.699 13.9007 18 13.143 18H8V6Z" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}
CurrencyBath.displayName = "CurrencyBath";

export default CurrencyBath;