Vela UI Docs
venizia.ai

book-02

Book02, 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-book-02.

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

Installation

pnpm dlx velaui add @velaui/icon-book-02

Usage

// components/icons/book-02.tsx
import Book02 from "@/components/icons/book-02"

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

/** Custom vela-ui icon, synced from Figma (node under section "Icons"). */
export function Book02({ size = 24, strokeWidth = 1, className, ref, ...props }: Book02Props) {
  return (
    <svg
      ref={ref}
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      strokeWidth={strokeWidth}
      className={className}
      {...props}
    >
      <path d="M11.7257 20.2286V5.4172M11.7257 20.2286L10.2682 18.7712C9.44522 17.9481 8.32947 17.4858 7.16555 17.4858H3.49619C2.89025 17.4858 2.4 16.9946 2.4 16.3886V4.86863C2.4 4.26269 2.89121 3.77148 3.49714 3.77148H7.71362C8.87754 3.77148 9.99379 4.23385 10.8168 5.05687L11.7257 5.96577L12.6346 5.05687C13.4576 4.23385 14.5739 3.77148 15.7378 3.77148H20.5029C21.1088 3.77148 21.6 4.26269 21.6 4.86863V16.3886C21.6 16.9946 21.1088 17.4858 20.5029 17.4858H16.2864C15.1225 17.4858 14.0062 17.9481 13.1832 18.7712L11.7257 20.2286Z" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}
Book02.displayName = "Book02";

export default Book02;