Vela UI Docsvenizia.ai

camera-01

Camera01, 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-camera-01.

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

Installation

pnpm dlx velaui add @velaui/icon-camera-01

Usage

// components/icons/camera-01.tsx
import Camera01 from "@/components/icons/camera-01"

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

/** Custom vela-ui icon, synced from Figma (node under section "Icons"). */
export function Camera01({ size = 24, strokeWidth = 0, className, ref, ...props }: Camera01Props) {
  return (
    <svg
      ref={ref}
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      strokeWidth={strokeWidth}
      className={className}
      {...props}
    >
      <path d="M7.2 6.12023V6.62023C7.37783 6.62023 7.54228 6.52578 7.63189 6.37217L7.2 6.12023ZM8.88 3.24023V2.74023C8.70217 2.74023 8.53772 2.83469 8.44811 2.9883L8.88 3.24023ZM15.12 3.24023L15.5519 2.9883C15.4623 2.83469 15.2978 2.74023 15.12 2.74023V3.24023ZM16.8 6.12023L16.3681 6.37217C16.4577 6.52578 16.6222 6.62023 16.8 6.62023V6.12023ZM2.4 18.3602H2.9V8.52023H2.4H1.9V18.3602H2.4ZM4.8 6.12023V6.62023H7.2V6.12023V5.62023H4.8V6.12023ZM7.2 6.12023L7.63189 6.37217L9.31189 3.49217L8.88 3.24023L8.44811 2.9883L6.76811 5.8683L7.2 6.12023ZM8.88 3.24023V3.74023H15.12V3.24023V2.74023H8.88V3.24023ZM15.12 3.24023L14.6881 3.49217L16.3681 6.37217L16.8 6.12023L17.2319 5.8683L15.5519 2.9883L15.12 3.24023ZM16.8 6.12023V6.62023H19.2V6.12023V5.62023H16.8V6.12023ZM21.6 8.52023H21.1V18.3602H21.6H22.1V8.52023H21.6ZM21.6 18.3602H21.1C21.1 19.4096 20.2493 20.2602 19.2 20.2602V20.7602V21.2602C20.8016 21.2602 22.1 19.9619 22.1 18.3602H21.6ZM19.2 6.12023V6.62023C20.2493 6.62023 21.1 7.47089 21.1 8.52023H21.6H22.1C22.1 6.91861 20.8016 5.62023 19.2 5.62023V6.12023ZM2.4 8.52023H2.9C2.9 7.47089 3.75066 6.62023 4.8 6.62023V6.12023V5.62023C3.19838 5.62023 1.9 6.91861 1.9 8.52023H2.4ZM4.8 20.7602V20.2602C3.75066 20.2602 2.9 19.4096 2.9 18.3602H2.4H1.9C1.9 19.9619 3.19838 21.2602 4.8 21.2602V20.7602ZM15.6 12.8402H15.1C15.1 14.5523 13.7121 15.9402 12 15.9402V16.4402V16.9402C14.2644 16.9402 16.1 15.1046 16.1 12.8402H15.6ZM12 16.4402V15.9402C10.2879 15.9402 8.9 14.5523 8.9 12.8402H8.4H7.9C7.9 15.1046 9.73563 16.9402 12 16.9402V16.4402ZM8.4 12.8402H8.9C8.9 11.1282 10.2879 9.74023 12 9.74023V9.24023V8.74023C9.73563 8.74023 7.9 10.5759 7.9 12.8402H8.4ZM12 9.24023V9.74023C13.7121 9.74023 15.1 11.1282 15.1 12.8402H15.6H16.1C16.1 10.5759 14.2644 8.74023 12 8.74023V9.24023ZM19.2 20.7602V20.2602H4.8V20.7602V21.2602H19.2V20.7602Z" fill="currentColor"/>
    </svg>
  );
}
Camera01.displayName = "Camera01";

export default Camera01;