Vela UI Docsvenizia.ai

gift-01

Gift01, 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-gift-01.

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

Installation

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

Usage

// components/icons/gift-01.tsx
import Gift01 from "@/components/icons/gift-01"

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

/** Custom vela-ui icon, synced from Figma (node under section "Icons"). */
export function Gift01({ size = 24, strokeWidth = 1, className, ref, ...props }: Gift01Props) {
  return (
    <svg
      ref={ref}
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      strokeWidth={strokeWidth}
      className={className}
      {...props}
    >
      <path d="M12.1746 21.6538V7.69012M10.5496 6.85244C10.7224 6.89123 10.9046 6.84368 11.0291 6.71922C11.1535 6.59476 11.201 6.41253 11.1623 6.23973C11.0071 5.60595 10.4356 3.4837 9.84873 2.89684C9.11757 2.16568 7.92757 2.16263 7.20002 2.89017C6.47253 3.61767 6.47547 4.80767 7.20669 5.53888C7.80316 6.13535 9.91581 6.6973 10.5496 6.85244ZM12.3242 6.23968C12.2854 6.41255 12.3329 6.59471 12.4574 6.71917C12.5818 6.84363 12.7641 6.89111 12.9369 6.85239C13.5706 6.69723 15.6929 6.12569 16.2797 5.53883C17.0109 4.80767 17.014 3.61767 16.2864 2.89012C15.5589 2.16263 14.3689 2.16557 13.6377 2.89679C13.0412 3.49326 12.4793 5.60591 12.3242 6.23968ZM3.09821 12.5774H20.9018C21.2874 12.5774 21.6 12.2648 21.6 11.8792V8.38831C21.6 8.00271 21.2874 7.69012 20.9018 7.69012H3.09821C2.71261 7.69012 2.40002 8.00271 2.40002 8.38831V11.8792C2.40002 12.2648 2.71261 12.5774 3.09821 12.5774ZM19.8546 12.5774V20.9556C19.8546 21.3412 19.542 21.6538 19.1564 21.6538H4.84366C4.45807 21.6538 4.14548 21.3412 4.14548 20.9556V12.5774H19.8546Z" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}
Gift01.displayName = "Gift01";

export default Gift01;