Vela UI Docs
venizia.ai

bag-05

Bag05, 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-bag-05.

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

Installation

pnpm dlx velaui add @velaui/icon-bag-05

Usage

// components/icons/bag-05.tsx
import Bag05 from "@/components/icons/bag-05"

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

/** Custom vela-ui icon, synced from Figma (node under section "Icons"). */
export function Bag05({ size = 24, strokeWidth = 1, className, ref, ...props }: Bag05Props) {
  return (
    <svg
      ref={ref}
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      strokeWidth={strokeWidth}
      className={className}
      {...props}
    >
      <path d="M21.6003 6.30004L2.40092 6.29976L2.39967 6.3001M2.39967 6.3001L6.2482 2.45157C6.47325 2.22653 6.77847 2.1001 7.09673 2.1001H16.9026C17.2209 2.1001 17.5261 2.22653 17.7511 2.45157L21.6003 6.30004L21.5997 19.6161C21.5997 20.8775 20.5577 21.9001 19.2724 21.9001H4.72695C3.44163 21.9001 2.39967 20.8775 2.39967 19.6161V6.3001ZM15.5997 9.9001C15.5997 11.8883 13.9879 13.5001 11.9997 13.5001C10.0114 13.5001 8.39967 11.8883 8.39967 9.9001" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}
Bag05.displayName = "Bag05";

export default Bag05;