Vela UI Docsvenizia.ai

image-no-borders

ImageNoBorders, 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-image-no-borders.

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

Installation

pnpm dlx velaui add @velaui/icon-image-no-borders

Usage

// components/icons/image-no-borders.tsx
import ImageNoBorders from "@/components/icons/image-no-borders"

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

/** Custom vela-ui icon, synced from Figma (node under section "Icons"). */
export function ImageNoBorders({ size = 24, strokeWidth = 0, className, ref, ...props }: ImageNoBordersProps) {
  return (
    <svg
      ref={ref}
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      strokeWidth={strokeWidth}
      className={className}
      {...props}
    >
      <path d="M2.40002 20.4001L2.00959 20.0878C1.88952 20.2378 1.86611 20.4435 1.94937 20.6167C2.03263 20.7899 2.20782 20.9001 2.40002 20.9001V20.4001ZM7.68002 13.8001L8.07046 13.4878C7.97557 13.3691 7.83192 13.3001 7.68002 13.3001C7.52813 13.3001 7.38448 13.3691 7.28959 13.4878L7.68002 13.8001ZM9.60002 16.2001L9.20959 16.5124C9.30447 16.6311 9.44813 16.7001 9.60002 16.7001C9.75191 16.7001 9.89557 16.6311 9.99046 16.5124L9.60002 16.2001ZM13.92 10.8001L14.3105 10.4878C14.2156 10.3691 14.0719 10.3001 13.92 10.3001C13.7681 10.3001 13.6245 10.3691 13.5296 10.4878L13.92 10.8001ZM21.6 20.4001V20.9001C21.7922 20.9001 21.9674 20.7899 22.0507 20.6167C22.1339 20.4435 22.1105 20.2378 21.9905 20.0878L21.6 20.4001ZM8.40002 5.4001H7.90002C7.90002 6.11807 7.31799 6.7001 6.60002 6.7001V7.2001V7.7001C7.87028 7.7001 8.90002 6.67035 8.90002 5.4001H8.40002ZM6.60002 7.2001V6.7001C5.88205 6.7001 5.30002 6.11807 5.30002 5.4001H4.80002H4.30002C4.30002 6.67035 5.32977 7.7001 6.60002 7.7001V7.2001ZM4.80002 5.4001H5.30002C5.30002 4.68213 5.88205 4.1001 6.60002 4.1001V3.6001V3.1001C5.32977 3.1001 4.30002 4.12984 4.30002 5.4001H4.80002ZM6.60002 3.6001V4.1001C7.31799 4.1001 7.90002 4.68213 7.90002 5.4001H8.40002H8.90002C8.90002 4.12984 7.87028 3.1001 6.60002 3.1001V3.6001ZM2.40002 20.4001L2.79046 20.7124L8.07046 14.1124L7.68002 13.8001L7.28959 13.4878L2.00959 20.0878L2.40002 20.4001ZM7.68002 13.8001L7.28959 14.1124L9.20959 16.5124L9.60002 16.2001L9.99046 15.8878L8.07046 13.4878L7.68002 13.8001ZM9.60002 16.2001L9.99046 16.5124L14.3105 11.1124L13.92 10.8001L13.5296 10.4878L9.20959 15.8878L9.60002 16.2001ZM13.92 10.8001L13.5296 11.1124L21.2096 20.7124L21.6 20.4001L21.9905 20.0878L14.3105 10.4878L13.92 10.8001ZM21.6 20.4001V19.9001H2.40002V20.4001V20.9001H21.6V20.4001Z" fill="currentColor"/>
    </svg>
  );
}
ImageNoBorders.displayName = "ImageNoBorders";

export default ImageNoBorders;