Vela UI Docs
venizia.ai

data-04

Data04, 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-data-04.

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

Installation

pnpm dlx velaui add @velaui/icon-data-04

Usage

// components/icons/data-04.tsx
import Data04 from "@/components/icons/data-04"

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

/** Custom vela-ui icon, synced from Figma (node under section "Icons"). */
export function Data04({ size = 24, strokeWidth = 1, className, ref, ...props }: Data04Props) {
  return (
    <svg
      ref={ref}
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      strokeWidth={strokeWidth}
      className={className}
      {...props}
    >
      <path d="M12 17.4004V11.4004M19.68 17.7604C18.6196 17.7604 17.76 18.62 17.76 19.6804C17.76 20.7408 18.6196 21.6004 19.68 21.6004C20.7404 21.6004 21.6 20.7408 21.6 19.6804C21.6 18.62 20.7404 17.7604 19.68 17.7604ZM19.68 17.7604L19.68 12.2404C19.68 11.7102 19.2502 11.2804 18.72 11.2804H5.28002C4.74983 11.2804 4.32002 11.7102 4.32002 12.2404L4.32002 17.7604M4.32002 17.7604C3.25964 17.7604 2.40002 18.62 2.40002 19.6804C2.40002 20.7408 3.25964 21.6004 4.32002 21.6004C5.38041 21.6004 6.24002 20.7408 6.24002 19.6804C6.24002 18.62 5.38041 17.7604 4.32002 17.7604ZM12 21.6004C10.9396 21.6004 10.08 20.7408 10.08 19.6804C10.08 18.62 10.9396 17.7604 12 17.7604C13.0604 17.7604 13.92 18.62 13.92 19.6804C13.92 20.7408 13.0604 21.6004 12 21.6004ZM6.00002 7.20039H18C18.6628 7.20039 19.2 6.66313 19.2 6.00039V3.60039C19.2 2.93765 18.6628 2.40039 18 2.40039H6.00002C5.33728 2.40039 4.80002 2.93765 4.80002 3.60039V6.00039C4.80002 6.66313 5.33728 7.20039 6.00002 7.20039Z" stroke="currentColor" strokeLinecap="round"/>
    </svg>
  );
}
Data04.displayName = "Data04";

export default Data04;