Vela UI Docs
venizia.ai

skew

Skew, 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-skew.

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

Installation

pnpm dlx velaui add @velaui/icon-skew

Usage

// components/icons/skew.tsx
import Skew from "@/components/icons/skew"

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

/** Custom vela-ui icon, synced from Figma (node under section "Icons"). */
export function Skew({ size = 24, strokeWidth = 1, className, ref, ...props }: SkewProps) {
  return (
    <svg
      ref={ref}
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      strokeWidth={strokeWidth}
      className={className}
      {...props}
    >
      <path d="M17.8736 16.5478L20.2736 7.45302M15.3473 19.0741H6.75785M3.72627 16.2951L6.12627 7.70565M8.65258 4.92671H17.4947M4.61048 7.45302H7.64206C8.20015 7.45302 8.65258 7.00059 8.65258 6.4425V3.41092C8.65258 2.85282 8.20015 2.40039 7.64206 2.40039H4.61048C4.05238 2.40039 3.59995 2.85282 3.59995 3.41092V6.4425C3.59995 7.00059 4.05238 7.45302 4.61048 7.45302ZM18.7578 7.45302H21.7894C22.3475 7.45302 22.7999 7.00059 22.7999 6.4425V3.41092C22.7999 2.85282 22.3475 2.40039 21.7894 2.40039H18.7578C18.1997 2.40039 17.7473 2.85282 17.7473 3.41092V6.4425C17.7473 7.00059 18.1997 7.45302 18.7578 7.45302ZM2.21048 21.6004H5.24206C5.80015 21.6004 6.25258 21.148 6.25258 20.5899V17.5583C6.25258 17.0002 5.80015 16.5478 5.24206 16.5478H2.21048C1.65238 16.5478 1.19995 17.0002 1.19995 17.5583V20.5899C1.19995 21.148 1.65238 21.6004 2.21048 21.6004ZM16.3578 21.6004H19.3894C19.9475 21.6004 20.4 21.148 20.4 20.5899V17.5583C20.4 17.0002 19.9475 16.5478 19.3894 16.5478H16.3578C15.7997 16.5478 15.3473 17.0002 15.3473 17.5583V20.5899C15.3473 21.148 15.7997 21.6004 16.3578 21.6004Z" stroke="currentColor" strokeLinecap="round"/>
    </svg>
  );
}
Skew.displayName = "Skew";

export default Skew;