@primitiv-ui/icons 0.1.0

package/README.md

@@ -0,0 +1,128 @@
+# @primitiv-ui/icons
+
+Fill-based SVG icon library for the Primitiv ecosystem. Icons inherit `currentColor`, scale via a `size` prop, and accept all native SVG attributes. Zero styles, zero runtime overhead, full tree-shaking.
+
+## Usage
+
+Within the Primitiv workspace, import directly — no build step required:
+
+```tsx
+import { Check } from "@primitiv-ui/icons";
+
+// Default size (24px)
+<Check />
+
+// Custom pixel size
+<Check size={16} />
+
+// Rem-based size
+<Check size="1rem" />
+
+// Tailwind color via currentColor inheritance
+<Check className="text-green-500" />
+
+// Accessible (not decorative)
+<Check aria-label="Confirmed" />
+```
+
+## Props
+
+All icons share the same props via `IconProps`:
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `size` | `number \| string` | `24` | Sets both `width` and `height`. Accepts pixel numbers (`16`) or CSS strings (`"1rem"`). |
+| `className` | `string` | — | Applied to the `<svg>` element. Use Tailwind's `text-*` utilities to set `currentColor`. |
+| `aria-label` | `string` | — | Makes the icon accessible to screen readers. When absent the icon is `aria-hidden="true"` (decorative). |
+| `fill` | `string` | `"currentColor"` | Override the fill colour directly. |
+| `ref` | `Ref<SVGSVGElement>` | — | Forwarded to the underlying `<svg>` element. |
+
+All other [SVG element attributes](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute) are accepted and forwarded.
+
+## Icons
+
+| Icon | Import |
+|---|---|
+| [ArrowLeft](src/icons/ArrowLeft.tsx) | `import { ArrowLeft } from "@primitiv-ui/icons"` |
+| [ArrowRight](src/icons/ArrowRight.tsx) | `import { ArrowRight } from "@primitiv-ui/icons"` |
+| [Bell](src/icons/Bell.tsx) | `import { Bell } from "@primitiv-ui/icons"` |
+| [Calendar](src/icons/Calendar.tsx) | `import { Calendar } from "@primitiv-ui/icons"` |
+| [Check](src/icons/Check.tsx) | `import { Check } from "@primitiv-ui/icons"` |
+| [ChevronDown](src/icons/ChevronDown.tsx) | `import { ChevronDown } from "@primitiv-ui/icons"` |
+| [ChevronLeft](src/icons/ChevronLeft.tsx) | `import { ChevronLeft } from "@primitiv-ui/icons"` |
+| [ChevronRight](src/icons/ChevronRight.tsx) | `import { ChevronRight } from "@primitiv-ui/icons"` |
+| [ChevronUp](src/icons/ChevronUp.tsx) | `import { ChevronUp } from "@primitiv-ui/icons"` |
+| [Close](src/icons/Close.tsx) | `import { Close } from "@primitiv-ui/icons"` |
+| [Copy](src/icons/Copy.tsx) | `import { Copy } from "@primitiv-ui/icons"` |
+| [Delete](src/icons/Delete.tsx) | `import { Delete } from "@primitiv-ui/icons"` |
+| [Download](src/icons/Download.tsx) | `import { Download } from "@primitiv-ui/icons"` |
+| [Edit](src/icons/Edit.tsx) | `import { Edit } from "@primitiv-ui/icons"` |
+| [Error](src/icons/Error.tsx) | `import { Error } from "@primitiv-ui/icons"` |
+| [ExternalLink](src/icons/ExternalLink.tsx) | `import { ExternalLink } from "@primitiv-ui/icons"` |
+| [Eye](src/icons/Eye.tsx) | `import { Eye } from "@primitiv-ui/icons"` |
+| [EyeOff](src/icons/EyeOff.tsx) | `import { EyeOff } from "@primitiv-ui/icons"` |
+| [File](src/icons/File.tsx) | `import { File } from "@primitiv-ui/icons"` |
+| [Filter](src/icons/Filter.tsx) | `import { Filter } from "@primitiv-ui/icons"` |
+| [Folder](src/icons/Folder.tsx) | `import { Folder } from "@primitiv-ui/icons"` |
+| [Grid](src/icons/Grid.tsx) | `import { Grid } from "@primitiv-ui/icons"` |
+| [Home](src/icons/Home.tsx) | `import { Home } from "@primitiv-ui/icons"` |
+| [Image](src/icons/Image.tsx) | `import { Image } from "@primitiv-ui/icons"` |
+| [Info](src/icons/Info.tsx) | `import { Info } from "@primitiv-ui/icons"` |
+| [Link](src/icons/Link.tsx) | `import { Link } from "@primitiv-ui/icons"` |
+| [List](src/icons/List.tsx) | `import { List } from "@primitiv-ui/icons"` |
+| [Mail](src/icons/Mail.tsx) | `import { Mail } from "@primitiv-ui/icons"` |
+| [Menu](src/icons/Menu.tsx) | `import { Menu } from "@primitiv-ui/icons"` |
+| [Minus](src/icons/Minus.tsx) | `import { Minus } from "@primitiv-ui/icons"` |
+| [Moon](src/icons/Moon.tsx) | `import { Moon } from "@primitiv-ui/icons"` |
+| [Plus](src/icons/Plus.tsx) | `import { Plus } from "@primitiv-ui/icons"` |
+| [Search](src/icons/Search.tsx) | `import { Search } from "@primitiv-ui/icons"` |
+| [Settings](src/icons/Settings.tsx) | `import { Settings } from "@primitiv-ui/icons"` |
+| [Share](src/icons/Share.tsx) | `import { Share } from "@primitiv-ui/icons"` |
+| [Sort](src/icons/Sort.tsx) | `import { Sort } from "@primitiv-ui/icons"` |
+| [Success](src/icons/Success.tsx) | `import { Success } from "@primitiv-ui/icons"` |
+| [Sun](src/icons/Sun.tsx) | `import { Sun } from "@primitiv-ui/icons"` |
+| [Upload](src/icons/Upload.tsx) | `import { Upload } from "@primitiv-ui/icons"` |
+| [User](src/icons/User.tsx) | `import { User } from "@primitiv-ui/icons"` |
+| [Warning](src/icons/Warning.tsx) | `import { Warning } from "@primitiv-ui/icons"` |
+
+## Adding icons from Figma
+
+1. Export the icon at **24 × 24 px** (the `md` canonical size) as an SVG from Figma.
+2. Drop the `.svg` file into `icons/svg/`, using kebab-case for the filename (e.g. `arrow-right.svg`).
+3. Run the generator:
+
+   ```sh
+   pnpm generate
+   ```
+
+4. Review the generated component in `src/icons/`. The generator optimises paths via SVGO and converts hyphenated SVG attribute names to JSX camelCase. Hand-edit the output if needed — the generated files are committed source, not disposable artifacts.
+5. Add a row to the **Icons** table in this README.
+6. Write a smoke test in `src/icons/<Name>.test.tsx` (see `Check.test.tsx` as a template).
+
+The five design sizes (`xs`=16, `sm`=20, `md`=24, `lg`=32, `xl`=48) are all driven by the `size` prop at runtime — only the `md` SVG needs to be exported from Figma.
+
+## Architecture
+
+```
+icons/svg/*.svg          ← source files from Figma (committed)
+    ↓  pnpm generate
+src/icons/*.tsx          ← generated components (committed, reviewable)
+src/IconBase.tsx         ← shared SVG wrapper (sets viewBox, fill, aria-hidden)
+src/types.ts             ← IconProps interface
+src/index.ts             ← re-exports everything
+```
+
+`IconBase` is exported for advanced use cases (e.g. building custom icon wrappers) but is not needed for normal icon consumption.
+
+## Testing
+
+```sh
+# Run all icon tests once
+npx vitest run
+
+# Watch mode
+npx vitest
+
+# With coverage
+npx vitest run --coverage
+```

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@primitiv-ui/icons",
+  "version": "0.1.0",
+  "type": "module",
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "default": "./src/index.ts"
+    }
+  },
+  "sideEffects": false,
+  "files": [
+    "src"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/primitiv-ui/primitiv.git",
+    "directory": "packages/icons"
+  },
+  "peerDependencies": {
+    "@types/react": "^18.0.0 || ^19.0.0",
+    "react": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@svgr/core": "^8.1.0",
+    "@svgr/plugin-jsx": "^8.1.0",
+    "@svgr/plugin-svgo": "^8.1.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.3.2",
+    "@vitejs/plugin-react": "^6.0.1",
+    "@vitest/coverage-v8": "^4.1.4",
+    "jsdom": "^29.0.2",
+    "svgo": "^3.3.2",
+    "tsx": "^4.19.2",
+    "vite": "^8.0.8",
+    "vitest": "^4.1.4"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "generate": "tsx scripts/generate.ts",
+    "qa": "pnpm qa:units",
+    "qa:units": "vitest run --coverage",
+    "qa:units:watch": "vitest --coverage"
+  }
+}

package/src/IconBase.test.tsx

@@ -0,0 +1,81 @@
+import { render, screen } from '@testing-library/react'
+import { createRef } from 'react'
+import { describe, expect, it } from 'vitest'
+import { IconBase } from './IconBase'
+
+describe('IconBase defaults', () => {
+  it('renders an svg element', () => {
+    render(<IconBase data-testid="icon" />)
+    expect(screen.getByTestId('icon').tagName).toBe('svg')
+  })
+
+  it('defaults width and height to 24', () => {
+    render(<IconBase data-testid="icon" />)
+    const svg = screen.getByTestId('icon')
+    expect(svg).toHaveAttribute('width', '24')
+    expect(svg).toHaveAttribute('height', '24')
+  })
+
+  it('has viewBox of 0 0 24 24', () => {
+    render(<IconBase data-testid="icon" />)
+    expect(screen.getByTestId('icon')).toHaveAttribute('viewBox', '0 0 24 24')
+  })
+
+  it('has fill set to currentColor', () => {
+    render(<IconBase data-testid="icon" />)
+    expect(screen.getByTestId('icon')).toHaveAttribute('fill', 'currentColor')
+  })
+
+  it('is aria-hidden by default', () => {
+    render(<IconBase data-testid="icon" />)
+    expect(screen.getByTestId('icon')).toHaveAttribute('aria-hidden', 'true')
+  })
+})
+
+describe('IconBase props', () => {
+  it('applies a numeric size to width and height', () => {
+    render(<IconBase data-testid="icon" size={16} />)
+    const svg = screen.getByTestId('icon')
+    expect(svg).toHaveAttribute('width', '16')
+    expect(svg).toHaveAttribute('height', '16')
+  })
+
+  it('applies a string size to width and height', () => {
+    render(<IconBase data-testid="icon" size="1rem" />)
+    const svg = screen.getByTestId('icon')
+    expect(svg).toHaveAttribute('width', '1rem')
+    expect(svg).toHaveAttribute('height', '1rem')
+  })
+
+  it('applies className to the svg element', () => {
+    render(<IconBase data-testid="icon" className="my-class" />)
+    expect(screen.getByTestId('icon')).toHaveClass('my-class')
+  })
+
+  it('allows overriding fill', () => {
+    render(<IconBase data-testid="icon" fill="red" />)
+    expect(screen.getByTestId('icon')).toHaveAttribute('fill', 'red')
+  })
+
+  it('removes aria-hidden when aria-label is provided', () => {
+    render(<IconBase data-testid="icon" aria-label="Search" />)
+    expect(screen.getByTestId('icon')).not.toHaveAttribute('aria-hidden')
+  })
+
+  it('renders children inside the svg', () => {
+    render(
+      <IconBase data-testid="icon">
+        <path data-testid="path" d="M0 0" />
+      </IconBase>
+    )
+    expect(screen.getByTestId('path')).toBeInTheDocument()
+  })
+})
+
+describe('IconBase ref', () => {
+  it('forwards ref to the underlying svg element', () => {
+    const ref = createRef<SVGSVGElement>()
+    render(<IconBase ref={ref} data-testid="icon" />)
+    expect(ref.current).toBe(screen.getByTestId('icon'))
+  })
+})

package/src/IconBase.tsx

@@ -0,0 +1,26 @@
+import type { Ref } from 'react'
+import type { IconProps } from './types'
+
+interface IconBaseProps extends IconProps {
+  ref?: Ref<SVGSVGElement>
+}
+
+export const IconBase = ({
+  size = 24,
+  ref,
+  children,
+  ...props
+}: IconBaseProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    aria-hidden={props['aria-label'] === undefined ? true : undefined}
+    ref={ref}
+    {...props}
+  >
+    {children}
+  </svg>
+)

package/src/icons/ArrowLeft.tsx

@@ -0,0 +1,8 @@
+import type { IconProps } from '../types'
+import { IconBase } from '../IconBase'
+
+export const ArrowLeft = (props: IconProps) => (
+  <IconBase {...props}>
+    <path d="M20.75 11.25v1.5H3.908v-1.5z"/><path d="m12.06 5-7 7 7 7L11 20.06 2.94 12 11 3.94z"/>
+  </IconBase>
+)

package/src/icons/ArrowRight.tsx

@@ -0,0 +1,8 @@
+import type { IconProps } from '../types'
+import { IconBase } from '../IconBase'
+
+export const ArrowRight = (props: IconProps) => (
+  <IconBase {...props}>
+    <path d="M19.75 11.25v1.5H3.25v-1.5z"/><path d="M21.06 12 13 20.06 11.94 19l7-7-7-7L13 3.94z"/>
+  </IconBase>
+)

package/src/icons/Bell.tsx

@@ -0,0 +1,8 @@
+import type { IconProps } from '../types'
+import { IconBase } from '../IconBase'
+
+export const Bell = (props: IconProps) => (
+  <IconBase {...props}>
+    <path d="M17.25 11c0-3.662-2.737-6.25-5.25-6.25S6.75 7.338 6.75 11v5.31l-.94.94h12.38l-.94-.94zm1.5 4.69 3.06 3.06H2.19l3.06-3.06V11c0-4.338 3.263-7.75 6.75-7.75s6.75 3.412 6.75 7.75zm-4 4.56v1.5h-5.5v-1.5z"/>
+  </IconBase>
+)

package/src/icons/Calendar.tsx

@@ -0,0 +1,8 @@
+import type { IconProps } from '../types'
+import { IconBase } from '../IconBase'
+
+export const Calendar = (props: IconProps) => (
+  <IconBase {...props}>
+    <path d="M21.75 4.25v17.5H2.25V4.25zm-18 16h16.5V5.75H3.75z"/><path d="M21.75 9.25v1.5H2.25v-1.5zm-14.5-7h1.5v5.5h-1.5zm8 0h1.5v5.5h-1.5z"/>
+  </IconBase>
+)

package/src/icons/Check.test.tsx

@@ -0,0 +1,27 @@
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+import { Check } from './Check'
+
+describe('Check icon', () => {
+  it('renders an svg element', () => {
+    render(<Check data-testid="icon" />)
+    expect(screen.getByTestId('icon').tagName).toBe('svg')
+  })
+
+  it('passes size prop through to the underlying svg', () => {
+    render(<Check data-testid="icon" size={32} />)
+    const svg = screen.getByTestId('icon')
+    expect(svg).toHaveAttribute('width', '32')
+    expect(svg).toHaveAttribute('height', '32')
+  })
+
+  it('passes className through to the underlying svg', () => {
+    render(<Check data-testid="icon" className="text-green-500" />)
+    expect(screen.getByTestId('icon')).toHaveClass('text-green-500')
+  })
+
+  it('is aria-hidden by default', () => {
+    render(<Check data-testid="icon" />)
+    expect(screen.getByTestId('icon')).toHaveAttribute('aria-hidden', 'true')
+  })
+})

package/src/icons/Check.tsx

@@ -0,0 +1,8 @@
+import type { IconProps } from '../types'
+import { IconBase } from '../IconBase'
+
+export const Check = (props: IconProps) => (
+  <IconBase {...props}>
+    <path d="M21.057 5.904 10.05 19.111 2.939 12 4 10.94l5.95 5.949 9.954-11.946z"/>
+  </IconBase>
+)

package/src/icons/ChevronDown.tsx

@@ -0,0 +1,8 @@
+import type { IconProps } from '../types'
+import { IconBase } from '../IconBase'
+
+export const ChevronDown = (props: IconProps) => (
+  <IconBase {...props}>
+    <path d="M20.06 9 12 17.06 3.94 9 5 7.94l7 7 7-7z"/>
+  </IconBase>
+)

package/src/icons/ChevronLeft.tsx

@@ -0,0 +1,8 @@
+import type { IconProps } from '../types'
+import { IconBase } from '../IconBase'
+
+export const ChevronLeft = (props: IconProps) => (
+  <IconBase {...props}>
+    <path d="m16.06 5-7 7 7 7L15 20.06 6.94 12 15 3.94z"/>
+  </IconBase>
+)

package/src/icons/ChevronRight.tsx

@@ -0,0 +1,8 @@
+import type { IconProps } from '../types'
+import { IconBase } from '../IconBase'
+
+export const ChevronRight = (props: IconProps) => (
+  <IconBase {...props}>
+    <path d="M17.06 12 9 20.06 7.94 19l7-7-7-7L9 3.94z"/>
+  </IconBase>
+)

package/src/icons/ChevronUp.tsx

@@ -0,0 +1,8 @@
+import type { IconProps } from '../types'
+import { IconBase } from '../IconBase'
+
+export const ChevronUp = (props: IconProps) => (
+  <IconBase {...props}>
+    <path d="M20.06 15 19 16.06l-7-7-7 7L3.94 15 12 6.94z"/>
+  </IconBase>
+)

package/src/icons/Close.tsx

@@ -0,0 +1,8 @@
+import type { IconProps } from '../types'
+import { IconBase } from '../IconBase'
+
+export const Close = (props: IconProps) => (
+  <IconBase {...props}>
+    <path d="M20.06 19 19 20.06 3.94 5 5 3.94z"/><path d="M20.06 5 5 20.06 3.94 19 19 3.94z"/>
+  </IconBase>
+)

package/src/icons/Copy.tsx

@@ -0,0 +1,8 @@
+import type { IconProps } from '../types'
+import { IconBase } from '../IconBase'
+
+export const Copy = (props: IconProps) => (
+  <IconBase {...props}>
+    <path d="M20.75 7.25v13.5H7.25V7.25zm-12 12h10.5V8.75H8.75z"/><path d="M15.25 4.75H4.75v10.5h4v1.5h-5.5V3.25h13.5v5.5h-1.5z"/>
+  </IconBase>
+)

package/src/icons/Delete.tsx

@@ -0,0 +1,8 @@
+import type { IconProps } from '../types'
+import { IconBase } from '../IconBase'
+
+export const Delete = (props: IconProps) => (
+  <IconBase {...props}>
+    <path d="M20.75 6.25v1.5H3.25v-1.5z"/><path d="M18.81 7.314 17.69 20.75H6.31L5.19 7.314l1.496-.124 1.003 12.06h8.622l1.003-12.06z"/><path d="M14.25 4.75h-4.5v3h-1.5v-4.5h7.5v4.5h-1.5zm-5 5.5h1.5v7.5h-1.5zm4 0h1.5v7.5h-1.5z"/>
+  </IconBase>
+)

package/src/icons/Download.tsx

@@ -0,0 +1,8 @@
+import type { IconProps } from '../types'
+import { IconBase } from '../IconBase'
+
+export const Download = (props: IconProps) => (
+  <IconBase {...props}>
+    <path d="M11 3h1.5v13H11z"/><path d="m18.81 10.75-7.06 7.06-7.06-7.06 1.06-1.06 6 6 6-6zM20.5 19v1.5H3V19z"/>
+  </IconBase>
+)

package/src/icons/Edit.tsx

@@ -0,0 +1,8 @@
+import type { IconProps } from '../types'
+import { IconBase } from '../IconBase'
+
+export const Edit = (props: IconProps) => (
+  <IconBase {...props}>
+    <path d="M21.06 8 8.31 20.75H3.25v-5.06L16 2.94zM4.75 16.31v2.94h2.94L18.94 8 16 5.06z"/><path d="M18.06 11 17 12.06 11.94 7 13 5.94z"/>
+  </IconBase>
+)

package/src/icons/Error.tsx

@@ -0,0 +1,8 @@
+import type { IconProps } from '../types'
+import { IconBase } from '../IconBase'
+
+export const Error = (props: IconProps) => (
+  <IconBase {...props}>
+    <path d="M20.25 12a8.25 8.25 0 1 0-16.5 0 8.25 8.25 0 0 0 16.5 0m1.5 0c0 5.385-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12 6.615 2.25 12 2.25s9.75 4.365 9.75 9.75"/><path d="M17.06 16 16 17.06 6.94 8 8 6.94z"/><path d="M17.06 8 8 17.06 6.94 16 16 6.94z"/>
+  </IconBase>
+)

package/src/icons/ExternalLink.tsx

@@ -0,0 +1,8 @@
+import type { IconProps } from '../types'
+import { IconBase } from '../IconBase'
+
+export const ExternalLink = (props: IconProps) => (
+  <IconBase {...props}>
+    <path d="M19.25 4.75h-6v-1.5h7.5v7.5h-1.5z"/><path d="M20.06 5 11 14.06 9.94 13 19 3.94z"/><path d="M10.75 5.25v1.5h-6v12.5h12.5v-6h1.5v7.5H3.25V5.25z"/>
+  </IconBase>
+)

package/src/icons/Eye.tsx

@@ -0,0 +1,8 @@
+import type { IconProps } from '../types'
+import { IconBase } from '../IconBase'
+
+export const Eye = (props: IconProps) => (
+  <IconBase {...props}>
+    <path d="M12 4.25c2.06 0 3.972.256 5.769 1.361 1.789 1.101 3.368 2.987 4.902 6.054l.168.335-.168.335c-1.534 3.067-3.113 4.953-4.902 6.054-1.797 1.105-3.71 1.361-5.769 1.361s-3.972-.256-5.769-1.361c-1.789-1.101-3.368-2.987-4.902-6.054L1.161 12l.168-.335c1.534-3.067 3.113-4.953 4.902-6.054C8.028 4.506 9.941 4.25 12 4.25m0 1.5c-1.94 0-3.528.244-4.981 1.139-1.405.864-2.77 2.39-4.176 5.111 1.406 2.721 2.771 4.247 4.176 5.111 1.453.895 3.04 1.139 4.981 1.139s3.528-.244 4.981-1.139c1.404-.864 2.77-2.39 4.175-5.111-1.406-2.721-2.77-4.247-4.175-5.111C15.528 5.994 13.941 5.75 12 5.75"/><path d="M14.25 12a2.25 2.25 0 1 0-4.5 0 2.25 2.25 0 0 0 4.5 0m1.5 0a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0"/>
+  </IconBase>
+)

package/src/icons/EyeOff.tsx

@@ -0,0 +1,8 @@
+import type { IconProps } from '../types'
+import { IconBase } from '../IconBase'
+
+export const EyeOff = (props: IconProps) => (
+  <IconBase {...props}>
+    <path d="m22.059 19.938-.997 1.12L1.942 4.064l.996-1.122 19.12 16.996Z"/><path d="m7.06 7-.53.53c-.956.956-1.678 1.917-2.295 2.78-.461.647-.899 1.29-1.332 1.807 1.385 2.648 2.732 4.143 4.116 4.994 1.453.895 3.04 1.139 4.981 1.139 1.432 0 2.832-.19 4.222-.746l.696-.278.557 1.392-.697.279c-1.61.644-3.21.853-4.778.853-2.06 0-3.972-.256-5.769-1.361-1.789-1.101-3.368-2.987-4.902-6.054l-.241-.483.382-.382c.442-.443.89-1.114 1.545-2.03.633-.887 1.41-1.926 2.455-2.97L6 5.94zM12 4.25c2.06 0 3.972.256 5.769 1.361 1.789 1.101 3.368 2.987 4.902 6.054l.155.31-.137.32a19.5 19.5 0 0 1-2.182 3.847l-.442.606-1.213-.883.441-.606a18 18 0 0 0 1.875-3.236c-1.41-2.736-2.779-4.268-4.187-5.134C15.528 5.994 13.941 5.75 12 5.75c-.262 0-.553.103-.944.305-.331.17-.84.477-1.292.647l-.702.264-.528-1.404.702-.264c.347-.13.64-.323 1.133-.577.434-.224.993-.471 1.631-.471"/><path d="M8.25 12c0-.697.276-1.335.606-1.886l.387-.643 1.286.772-.385.643c-.27.45-.394.81-.394 1.114 0 1.286.964 2.25 2.25 2.25.303 0 .665-.124 1.114-.394l.643-.385.772 1.286-.643.387c-.55.33-1.19.606-1.886.606-2.114 0-3.75-1.636-3.75-3.75"/>
+  </IconBase>
+)

package/src/icons/File.tsx

@@ -0,0 +1,8 @@
+import type { IconProps } from '../types'
+import { IconBase } from '../IconBase'
+
+export const File = (props: IconProps) => (
+  <IconBase {...props}>
+    <path d="m14.31 2.25 5.44 5.44v14.06H4.25V2.25zm-8.56 18h12.5V8.31l-4.56-4.56H5.75z"/><path d="M13.25 2.75h1.5v4.5h4.5v1.5h-6z"/>
+  </IconBase>
+)

package/src/icons/Filter.tsx

@@ -0,0 +1,8 @@
+import type { IconProps } from '../types'
+import { IconBase } from '../IconBase'
+
+export const Filter = (props: IconProps) => (
+  <IconBase {...props}>
+    <path d="M22.533 3.25 14.75 13.257v7.493h-5.5v-7.493L1.467 3.25zM10.75 12.742v6.508h2.5v-6.508l6.217-7.992H4.533z"/>
+  </IconBase>
+)

package/src/icons/Folder.tsx

@@ -0,0 +1,8 @@
+import type { IconProps } from '../types'
+import { IconBase } from '../IconBase'
+
+export const Folder = (props: IconProps) => (
+  <IconBase {...props}>
+    <path d="m10.31 5.25 2 2h9.44v12.5H2.25V5.25zm-6.56 13h16.5v-9.5h-8.56l-2-2H3.75z"/>
+  </IconBase>
+)

package/src/icons/Grid.tsx

@@ -0,0 +1,8 @@
+import type { IconProps } from '../types'
+import { IconBase } from '../IconBase'
+
+export const Grid = (props: IconProps) => (
+  <IconBase {...props}>
+    <path d="M11.75 2.25v9.5h-9.5v-9.5zm-8 8h6.5v-6.5h-6.5zm18-8v9.5h-9.5v-9.5zm-8 8h6.5v-6.5h-6.5zm-2 2v9.5h-9.5v-9.5zm-8 8h6.5v-6.5h-6.5zm18-8v9.5h-9.5v-9.5zm-8 8h6.5v-6.5h-6.5z"/>
+  </IconBase>
+)

package/src/icons/Home.tsx

@@ -0,0 +1,8 @@
+import type { IconProps } from '../types'
+import { IconBase } from '../IconBase'
+
+export const Home = (props: IconProps) => (
+  <IconBase {...props}>
+    <path d="m22.059 10.938-.997 1.12L12 4.004 2.937 12.06l-.996-1.121L12 1.995l10.059 8.941Z"/><path d="M4.25 9.25h1.5v10h12.5v-10h1.5v11.5H4.25z"/><path d="M13.25 14.75h-2.5v6h-1.5v-7.5h5.5v7.5h-1.5z"/>
+  </IconBase>
+)

package/src/icons/Image.tsx

@@ -0,0 +1,8 @@
+import type { IconProps } from '../types'
+import { IconBase } from '../IconBase'
+
+export const Image = (props: IconProps) => (
+  <IconBase {...props}>
+    <path d="M21.75 3.25v17.5H2.25V3.25zm-18 16h16.5V4.75H3.75z"/><path d="M10.25 9a1.25 1.25 0 1 0-2.5 0 1.25 1.25 0 0 0 2.5 0m1.5 0a2.75 2.75 0 1 1-5.5 0 2.75 2.75 0 0 1 5.5 0"/><path d="m21.56 11.042-7.525 6.946-5.057-4.045-5.643 4.105-.883-1.213 6.57-4.778 4.943 3.954 6.577-6.07z"/>
+  </IconBase>
+)

package/src/icons/Info.tsx

@@ -0,0 +1,8 @@
+import type { IconProps } from '../types'
+import { IconBase } from '../IconBase'
+
+export const Info = (props: IconProps) => (
+  <IconBase {...props}>
+    <path d="M20.25 12a8.25 8.25 0 1 0-16.5 0 8.25 8.25 0 0 0 16.5 0m1.5 0c0 5.385-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12 6.615 2.25 12 2.25s9.75 4.365 9.75 9.75"/><path d="M11.25 10.25h1.5v7.5h-1.5zm0-4h1.5v2.5h-1.5z"/>
+  </IconBase>
+)

package/src/icons/Link.tsx

@@ -0,0 +1,8 @@
+import type { IconProps } from '../types'
+import { IconBase } from '../IconBase'
+
+export const Link = (props: IconProps) => (
+  <IconBase {...props}>
+    <path d="M10.75 7.25v1.5H4c-.053 0-.233.029-.44.492-.194.438-.31 1.076-.31 1.758s.116 1.32.31 1.758c.207.463.387.492.44.492h6.75v1.5H4c-.947 0-1.517-.721-1.81-1.383-.306-.687-.44-1.549-.44-2.367s.134-1.68.44-2.367C2.482 7.97 3.052 7.25 4 7.25zm9.25 2c.947 0 1.517.721 1.81 1.383.306.687.44 1.549.44 2.367s-.134 1.68-.44 2.367c-.293.662-.863 1.383-1.81 1.383h-6.75v-1.5H20c.053 0 .233-.029.44-.492.194-.438.31-1.076.31-1.758s-.116-1.32-.31-1.758c-.207-.463-.387-.492-.44-.492h-6.75v-1.5z"/><path d="M16.75 11.25v1.5h-9.5v-1.5z"/>
+  </IconBase>
+)

package/src/icons/List.tsx

@@ -0,0 +1,8 @@
+import type { IconProps } from '../types'
+import { IconBase } from '../IconBase'
+
+export const List = (props: IconProps) => (
+  <IconBase {...props}>
+    <path d="M21.75 5.25v1.5H7.25v-1.5zm0 6v1.5H7.25v-1.5zm0 6v1.5H7.25v-1.5zm-17-12v1.5h-2.5v-1.5zm0 6v1.5h-2.5v-1.5zm0 6v1.5h-2.5v-1.5z"/>
+  </IconBase>
+)

package/src/icons/Mail.tsx

@@ -0,0 +1,8 @@
+import type { IconProps } from '../types'
+import { IconBase } from '../IconBase'
+
+export const Mail = (props: IconProps) => (
+  <IconBase {...props}>
+    <path d="M21.75 4.25v15.5H2.25V4.25zm-18 14h16.5V5.75H3.75z"/><path d="m20.542 5.406.86 1.232L12 13.95 2.673 6.696 3.577 5.5 12 12.049z"/>
+  </IconBase>
+)

package/src/icons/Menu.tsx

@@ -0,0 +1,8 @@
+import type { IconProps } from '../types'
+import { IconBase } from '../IconBase'
+
+export const Menu = (props: IconProps) => (
+  <IconBase {...props}>
+    <path d="M21.75 6.25v1.5H2.25v-1.5zm0 5v1.5H2.25v-1.5zm0 5v1.5H2.25v-1.5z"/>
+  </IconBase>
+)

package/src/icons/Minus.tsx

@@ -0,0 +1,8 @@
+import type { IconProps } from '../types'
+import { IconBase } from '../IconBase'
+
+export const Minus = (props: IconProps) => (
+  <IconBase {...props}>
+    <path d="M20.75 11.25v1.5H3.25v-1.5z"/>
+  </IconBase>
+)

package/src/icons/Moon.tsx

@@ -0,0 +1,8 @@
+import type { IconProps } from '../types'
+import { IconBase } from '../IconBase'
+
+export const Moon = (props: IconProps) => (
+  <IconBase {...props}>
+    <path fillRule="evenodd" d="M8.41 3.745a8.7 8.7 0 0 0 11.844 11.842A9 9 0 1 1 8.41 3.745M5.806 7.771a7.5 7.5 0 0 0 10.422 10.422c-.076.002-.152.007-.228.007-5.633 0-10.2-4.567-10.2-10.2q.001-.114.006-.229" clipRule="evenodd"/>
+  </IconBase>
+)

package/src/icons/Plus.tsx

@@ -0,0 +1,8 @@
+import type { IconProps } from '../types'
+import { IconBase } from '../IconBase'
+
+export const Plus = (props: IconProps) => (
+  <IconBase {...props}>
+    <path d="M11.25 3.25h1.5v17.5h-1.5z"/><path d="M20.75 11.25v1.5H3.25v-1.5z"/>
+  </IconBase>
+)

package/src/icons/Search.tsx

@@ -0,0 +1,8 @@
+import type { IconProps } from '../types'
+import { IconBase } from '../IconBase'
+
+export const Search = (props: IconProps) => (
+  <IconBase {...props}>
+    <path d="M16.25 10.5a5.75 5.75 0 1 0-11.5 0 5.75 5.75 0 0 0 11.5 0m1.5 0a7.25 7.25 0 1 1-14.5 0 7.25 7.25 0 0 1 14.5 0"/><path d="M21.06 20 20 21.06l-5.56-5.56 1.06-1.06z"/>
+  </IconBase>
+)

package/src/icons/Settings.tsx

@@ -0,0 +1,8 @@
+import type { IconProps } from '../types'
+import { IconBase } from '../IconBase'
+
+export const Settings = (props: IconProps) => (
+  <IconBase {...props}>
+    <path d="M14.25 12a2.25 2.25 0 1 0-4.5 0 2.25 2.25 0 0 0 4.5 0m1.5 0a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0"/><path d="m13.335 3.993 2-.999 1.129 2.256h2.286v2.286l2.256 1.129-1 2L22.676 12l-2.67 1.335 1 2-2.256 1.128v2.287h-2.286l-1.129 2.256-2-1L12 22.676l-1.336-2.67-1.999 1-1.129-2.256H5.25v-2.287l-2.256-1.128 1-2L1.323 12l2.67-1.336-1-1.999L5.25 7.536V5.25h2.286l1.129-2.256 2 1L12 1.323zm-2 2.013-2-1-.871 1.744H6.75v1.714l-1.744.871 1 2-1.33.665 1.33.665-1 2 1.329.664.415.207v1.714h1.714l.871 1.743 2-.999.665 1.33.665-1.33 2 1 .664-1.329.207-.415h1.714v-1.714l.415-.207 1.328-.665-.999-1.999 1.33-.665-1.33-.665 1-2-1.744-.871V6.75h-1.714l-.207-.415-.665-1.33-1.999 1L12 4.678z"/>
+  </IconBase>
+)

package/src/icons/Share.tsx

@@ -0,0 +1,8 @@
+import type { IconProps } from '../types'
+import { IconBase } from '../IconBase'
+
+export const Share = (props: IconProps) => (
+  <IconBase {...props}>
+    <path d="M8.25 12a2.25 2.25 0 1 0-4.5 0 2.25 2.25 0 0 0 4.5 0m1.5 0a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0m10.5-6a2.25 2.25 0 1 0-4.5 0 2.25 2.25 0 0 0 4.5 0m1.5 0a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0m-1.5 12a2.25 2.25 0 1 0-4.5 0 2.25 2.25 0 0 0 4.5 0m1.5 0a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0"/><path d="m15.91 7.335-7.414 4.17-.596-1.34 7.414-4.17zm0 9.33-.596 1.34-7.414-4.17.596-1.34z"/>
+  </IconBase>
+)

package/src/icons/Sort.tsx

@@ -0,0 +1,8 @@
+import type { IconProps } from '../types'
+import { IconBase } from '../IconBase'
+
+export const Sort = (props: IconProps) => (
+  <IconBase {...props}>
+    <path d="M5.25 4.25h1.5v16.5h-1.5z"/><path d="M10.06 7 9 8.06l-3-3-3 3L1.94 7 6 2.94zm7.19-3.75h1.5v16.5h-1.5z"/><path d="M22.06 17 18 21.06 13.94 17 15 15.94l3 3 3-3z"/>
+  </IconBase>
+)

package/src/icons/Success.tsx

@@ -0,0 +1,8 @@
+import type { IconProps } from '../types'
+import { IconBase } from '../IconBase'
+
+export const Success = (props: IconProps) => (
+  <IconBase {...props}>
+    <path d="M20.25 12a8.25 8.25 0 1 0-16.5 0 8.25 8.25 0 0 0 16.5 0m1.5 0c0 5.385-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12 6.615 2.25 12 2.25s9.75 4.365 9.75 9.75"/><path d="m18.058 8.919-7.016 8.183L5.939 12 7 10.94l3.957 3.957 5.962-6.955z"/>
+  </IconBase>
+)

package/src/icons/Sun.tsx

@@ -0,0 +1,8 @@
+import type { IconProps } from '../types'
+import { IconBase } from '../IconBase'
+
+export const Sun = (props: IconProps) => (
+  <IconBase {...props}>
+    <path fillRule="evenodd" d="M12.75 21.5h-1.5v-3h1.5zm-4.82-4.37-2.12 2.12-1.06-1.06 2.12-2.12zm11.32 1.06-1.06 1.06-2.12-2.12 1.06-1.06zM12 7.5a4.5 4.5 0 1 1 0 9 4.5 4.5 0 0 1 0-9M12 9a3 3 0 1 0 0 6 3 3 0 0 0 0-6m-6.5 3.75h-3v-1.5h3zm16 0h-3v-1.5h3zM7.93 6.87 6.87 7.93 4.75 5.81l1.06-1.06zm11.32-1.06-2.12 2.12-1.06-1.06 2.12-2.12zm-6.5-.31h-1.5v-3h1.5z" clipRule="evenodd"/>
+  </IconBase>
+)

package/src/icons/Upload.tsx

@@ -0,0 +1,8 @@
+import type { IconProps } from '../types'
+import { IconBase } from '../IconBase'
+
+export const Upload = (props: IconProps) => (
+  <IconBase {...props}>
+    <path d="M12.5 17.81H11v-13h1.5z"/><path d="M4.69 10.06 11.75 3l7.06 7.06-1.06 1.061-6-6-6 6zM20.5 19v1.5H3V19z"/>
+  </IconBase>
+)

package/src/icons/User.tsx

@@ -0,0 +1,8 @@
+import type { IconProps } from '../types'
+import { IconBase } from '../IconBase'
+
+export const User = (props: IconProps) => (
+  <IconBase {...props}>
+    <path d="M15.25 8a3.25 3.25 0 1 0-6.5 0 3.25 3.25 0 0 0 6.5 0m1.5 0a4.75 4.75 0 1 1-9.5 0 4.75 4.75 0 0 1 9.5 0"/><path d="M19.25 21c0-4.526-3.601-7.25-7.25-7.25S4.75 16.474 4.75 21v.75h-1.5V21c0-5.474 4.399-8.75 8.75-8.75s8.75 3.276 8.75 8.75v.75h-1.5z"/>
+  </IconBase>
+)

package/src/icons/Warning.tsx

@@ -0,0 +1,8 @@
+import type { IconProps } from '../types'
+import { IconBase } from '../IconBase'
+
+export const Warning = (props: IconProps) => (
+  <IconBase {...props}>
+    <path d="M23.311 20.75H.688L12 1.52zm-20-1.5H20.69L12 4.479z"/><path d="M11.25 8.25h1.5v6.5h-1.5zm0 7.5h1.5v2.5h-1.5z"/>
+  </IconBase>
+)

package/src/icons/icons.test.tsx

@@ -0,0 +1,20 @@
+import { render } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+import type { IconProps } from '../types'
+import * as icons from './index'
+
+type IconComponent = (props: IconProps) => React.ReactElement
+
+const iconEntries = Object.entries(icons) as [string, IconComponent][]
+
+describe('all icons', () => {
+  it.each(iconEntries)('%s renders an svg with correct defaults', (_, Icon) => {
+    const { container } = render(<Icon data-testid="icon" />)
+    const svg = container.querySelector('svg')
+    expect(svg).not.toBeNull()
+    expect(svg).toHaveAttribute('viewBox', '0 0 24 24')
+    expect(svg).toHaveAttribute('width', '24')
+    expect(svg).toHaveAttribute('fill', 'currentColor')
+    expect(svg).toHaveAttribute('aria-hidden', 'true')
+  })
+})

package/src/icons/index.ts

@@ -0,0 +1,41 @@
+export { ArrowLeft } from './ArrowLeft.tsx'
+export { ArrowRight } from './ArrowRight.tsx'
+export { Bell } from './Bell.tsx'
+export { Calendar } from './Calendar.tsx'
+export { Check } from './Check.tsx'
+export { ChevronDown } from './ChevronDown.tsx'
+export { ChevronLeft } from './ChevronLeft.tsx'
+export { ChevronRight } from './ChevronRight.tsx'
+export { ChevronUp } from './ChevronUp.tsx'
+export { Close } from './Close.tsx'
+export { Copy } from './Copy.tsx'
+export { Delete } from './Delete.tsx'
+export { Download } from './Download.tsx'
+export { Edit } from './Edit.tsx'
+export { Error } from './Error.tsx'
+export { ExternalLink } from './ExternalLink.tsx'
+export { EyeOff } from './EyeOff.tsx'
+export { Eye } from './Eye.tsx'
+export { File } from './File.tsx'
+export { Filter } from './Filter.tsx'
+export { Folder } from './Folder.tsx'
+export { Grid } from './Grid.tsx'
+export { Home } from './Home.tsx'
+export { Image } from './Image.tsx'
+export { Info } from './Info.tsx'
+export { Link } from './Link.tsx'
+export { List } from './List.tsx'
+export { Mail } from './Mail.tsx'
+export { Menu } from './Menu.tsx'
+export { Minus } from './Minus.tsx'
+export { Moon } from './Moon.tsx'
+export { Plus } from './Plus.tsx'
+export { Search } from './Search.tsx'
+export { Settings } from './Settings.tsx'
+export { Share } from './Share.tsx'
+export { Sort } from './Sort.tsx'
+export { Success } from './Success.tsx'
+export { Sun } from './Sun.tsx'
+export { Upload } from './Upload.tsx'
+export { User } from './User.tsx'
+export { Warning } from './Warning.tsx'

package/src/index.ts

@@ -0,0 +1,3 @@
+export type { IconProps } from './types'
+export { IconBase } from './IconBase'
+export * from './icons/index'

package/src/types.ts

@@ -0,0 +1,5 @@
+import type { SVGProps } from 'react'
+
+export interface IconProps extends SVGProps<SVGSVGElement> {
+  size?: number | string
+}