Vela UI Docsvenizia.ai

coins-rotate

CoinsRotate, 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-coins-rotate.

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

Installation

pnpm dlx velaui add @velaui/icon-coins-rotate

Usage

// components/icons/coins-rotate.tsx
import CoinsRotate from "@/components/icons/coins-rotate"

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

/** Custom vela-ui icon, synced from Figma (node under section "Icons"). */
export function CoinsRotate({ size = 24, strokeWidth = 1, className, ref, ...props }: CoinsRotateProps) {
  return (
    <svg
      ref={ref}
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      strokeWidth={strokeWidth}
      className={className}
      {...props}
    >
      <path d="M10.2 7.79995C10.7457 5.39516 12.8963 3.59995 15.4662 3.59995C18.4485 3.59995 20.8662 6.01761 20.8662 8.99995C20.8662 11.7625 18.7918 14.0405 16.1157 14.3613M6.6 5.99995L9 3.59995L6.6 1.19995M1.8 8.39995V6.79995C1.8 5.03264 3.23269 3.59995 5 3.59995H7.4M17.4 18L15 20.3999L17.4 22.7999M22.2 15.6V17.1999C22.2 18.9673 20.7673 20.4 19 20.4H16.6M12.6 16.2C12.6 19.1823 10.1823 21.5999 7.2 21.5999C4.21767 21.5999 1.8 19.1823 1.8 16.2C1.8 13.2176 4.21767 10.8 7.2 10.8C10.1823 10.8 12.6 13.2176 12.6 16.2Z" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}
CoinsRotate.displayName = "CoinsRotate";

export default CoinsRotate;