Vela UI Docs
venizia.ai

edit-04

Edit04, 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-edit-04.

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

Installation

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

Usage

// components/icons/edit-04.tsx
import Edit04 from "@/components/icons/edit-04"

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

/** Custom vela-ui icon, synced from Figma (node under section "Icons"). */
export function Edit04({ size = 24, strokeWidth = 1, className, ref, ...props }: Edit04Props) {
  return (
    <svg
      ref={ref}
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      strokeWidth={strokeWidth}
      className={className}
      {...props}
    >
      <path fillRule="evenodd" clipRule="evenodd" d="M15.3248 4.90705C15.7152 4.5165 16.3482 4.51623 16.7388 4.90645L19.0923 7.25721C19.4831 7.64759 19.4834 8.28092 19.0929 8.67163L9.13504 18.6349C8.99576 18.7743 8.81841 18.8694 8.62527 18.9083L4.20004 19.8L5.09329 15.38C5.13224 15.1872 5.22716 15.0103 5.36617 14.8712L15.3248 4.90705Z" stroke="currentColor" strokeLinejoin="round"/>
    </svg>
  );
}
Edit04.displayName = "Edit04";

export default Edit04;