Vela UI Docs
venizia.ai

data-03

Data03, 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-03.

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

Installation

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

Usage

// components/icons/data-03.tsx
import Data03 from "@/components/icons/data-03"

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

/** Custom vela-ui icon, synced from Figma (node under section "Icons"). */
export function Data03({ size = 24, strokeWidth = 1, className, ref, ...props }: Data03Props) {
  return (
    <svg
      ref={ref}
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      strokeWidth={strokeWidth}
      className={className}
      {...props}
    >
      <path d="M17.7602 4.32039C17.7602 5.38078 18.6198 6.24039 19.6802 6.24039C20.7406 6.24039 21.6002 5.38078 21.6002 4.32039C21.6002 3.26 20.7406 2.40039 19.6802 2.40039C18.6198 2.40039 17.7602 3.26 17.7602 4.32039ZM17.7602 4.32039H6.59975M17.7602 19.6804C17.7602 20.7408 18.6198 21.6004 19.6802 21.6004C20.7406 21.6004 21.6002 20.7408 21.6002 19.6804C21.6002 18.62 20.7406 17.7604 19.6802 17.7604C18.6198 17.7604 17.7602 18.62 17.7602 19.6804ZM17.7602 19.6804H12.2402C11.71 19.6804 11.2802 19.2506 11.2802 18.7204V5.28039M17.4002 12.0004H11.4002M21.6002 12.0004C21.6002 13.0608 20.7406 13.9204 19.6802 13.9204C18.6198 13.9204 17.7602 13.0608 17.7602 12.0004C17.7602 10.94 18.6198 10.0804 19.6802 10.0804C20.7406 10.0804 21.6002 10.94 21.6002 12.0004ZM6.23975 4.32039C6.23975 5.38078 5.38014 6.24039 4.31975 6.24039C3.25936 6.24039 2.39975 5.38078 2.39975 4.32039C2.39975 3.26 3.25936 2.40039 4.31975 2.40039C5.38014 2.40039 6.23975 3.26 6.23975 4.32039Z" stroke="currentColor" strokeLinecap="round"/>
    </svg>
  );
}
Data03.displayName = "Data03";

export default Data03;