@primitiv-ui/icons 0.1.1 → 0.1.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Simon Revill
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@primitiv-ui/icons",
-  "version": "0.1.1",
+  "version": "0.1.2",
+  "description": "Fill-based SVG icon library for the Primitiv ecosystem. Icons inherit currentColor, scale via a size prop, accept all native SVG attributes, and tree-shake cleanly.",
   "type": "module",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/IconBase.tsx

@@ -5,6 +5,13 @@ interface IconBaseProps extends IconProps {
   ref?: Ref<SVGSVGElement>
 }
 
+/**
+ * The shared SVG wrapper every Primitiv icon renders through. Sets up the
+ * `viewBox`, `currentColor` fill, and `size`-driven width/height, forwards
+ * a ref to the `<svg>`, and marks the icon `aria-hidden` unless an
+ * `aria-label` is provided. Generated icon components pass their paths as
+ * `children`; you rarely render this directly.
+ */
 export const IconBase = ({
   size = 24,
   ref,

package/src/icons/ArrowLeft.tsx

@@ -2,6 +2,17 @@ import type { ReactElement } from 'react'
 import type { IconProps } from '../types.ts'
 import { IconBase } from '../IconBase.tsx'
 
+/**
+ * The ArrowLeft icon.
+ *
+ * A fill-based SVG that inherits `currentColor` and scales via the
+ * `size` prop. Accepts all native `<svg>` attributes (see {@link IconProps}).
+ *
+ * @example
+ * ```tsx
+ * <ArrowLeft size={20} aria-label="ArrowLeft" />
+ * ```
+ */
 export const ArrowLeft = (props: IconProps): ReactElement => (
   <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"/>

package/src/icons/ArrowRight.tsx

@@ -2,6 +2,17 @@ import type { ReactElement } from 'react'
 import type { IconProps } from '../types.ts'
 import { IconBase } from '../IconBase.tsx'
 
+/**
+ * The ArrowRight icon.
+ *
+ * A fill-based SVG that inherits `currentColor` and scales via the
+ * `size` prop. Accepts all native `<svg>` attributes (see {@link IconProps}).
+ *
+ * @example
+ * ```tsx
+ * <ArrowRight size={20} aria-label="ArrowRight" />
+ * ```
+ */
 export const ArrowRight = (props: IconProps): ReactElement => (
   <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"/>

package/src/icons/Bell.tsx

@@ -2,6 +2,17 @@ import type { ReactElement } from 'react'
 import type { IconProps } from '../types.ts'
 import { IconBase } from '../IconBase.tsx'
 
+/**
+ * The Bell icon.
+ *
+ * A fill-based SVG that inherits `currentColor` and scales via the
+ * `size` prop. Accepts all native `<svg>` attributes (see {@link IconProps}).
+ *
+ * @example
+ * ```tsx
+ * <Bell size={20} aria-label="Bell" />
+ * ```
+ */
 export const Bell = (props: IconProps): ReactElement => (
   <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"/>

package/src/icons/Calendar.tsx

@@ -2,6 +2,17 @@ import type { ReactElement } from 'react'
 import type { IconProps } from '../types.ts'
 import { IconBase } from '../IconBase.tsx'
 
+/**
+ * The Calendar icon.
+ *
+ * A fill-based SVG that inherits `currentColor` and scales via the
+ * `size` prop. Accepts all native `<svg>` attributes (see {@link IconProps}).
+ *
+ * @example
+ * ```tsx
+ * <Calendar size={20} aria-label="Calendar" />
+ * ```
+ */
 export const Calendar = (props: IconProps): ReactElement => (
   <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"/>

package/src/icons/Check.tsx

@@ -2,6 +2,17 @@ import type { ReactElement } from 'react'
 import type { IconProps } from '../types.ts'
 import { IconBase } from '../IconBase.tsx'
 
+/**
+ * The Check icon.
+ *
+ * A fill-based SVG that inherits `currentColor` and scales via the
+ * `size` prop. Accepts all native `<svg>` attributes (see {@link IconProps}).
+ *
+ * @example
+ * ```tsx
+ * <Check size={20} aria-label="Check" />
+ * ```
+ */
 export const Check = (props: IconProps): ReactElement => (
   <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"/>

package/src/icons/ChevronDown.tsx

@@ -2,6 +2,17 @@ import type { ReactElement } from 'react'
 import type { IconProps } from '../types.ts'
 import { IconBase } from '../IconBase.tsx'
 
+/**
+ * The ChevronDown icon.
+ *
+ * A fill-based SVG that inherits `currentColor` and scales via the
+ * `size` prop. Accepts all native `<svg>` attributes (see {@link IconProps}).
+ *
+ * @example
+ * ```tsx
+ * <ChevronDown size={20} aria-label="ChevronDown" />
+ * ```
+ */
 export const ChevronDown = (props: IconProps): ReactElement => (
   <IconBase {...props}>
     <path d="M20.06 9 12 17.06 3.94 9 5 7.94l7 7 7-7z"/>

package/src/icons/ChevronLeft.tsx

@@ -2,6 +2,17 @@ import type { ReactElement } from 'react'
 import type { IconProps } from '../types.ts'
 import { IconBase } from '../IconBase.tsx'
 
+/**
+ * The ChevronLeft icon.
+ *
+ * A fill-based SVG that inherits `currentColor` and scales via the
+ * `size` prop. Accepts all native `<svg>` attributes (see {@link IconProps}).
+ *
+ * @example
+ * ```tsx
+ * <ChevronLeft size={20} aria-label="ChevronLeft" />
+ * ```
+ */
 export const ChevronLeft = (props: IconProps): ReactElement => (
   <IconBase {...props}>
     <path d="m16.06 5-7 7 7 7L15 20.06 6.94 12 15 3.94z"/>

package/src/icons/ChevronRight.tsx

@@ -2,6 +2,17 @@ import type { ReactElement } from 'react'
 import type { IconProps } from '../types.ts'
 import { IconBase } from '../IconBase.tsx'
 
+/**
+ * The ChevronRight icon.
+ *
+ * A fill-based SVG that inherits `currentColor` and scales via the
+ * `size` prop. Accepts all native `<svg>` attributes (see {@link IconProps}).
+ *
+ * @example
+ * ```tsx
+ * <ChevronRight size={20} aria-label="ChevronRight" />
+ * ```
+ */
 export const ChevronRight = (props: IconProps): ReactElement => (
   <IconBase {...props}>
     <path d="M17.06 12 9 20.06 7.94 19l7-7-7-7L9 3.94z"/>

package/src/icons/ChevronUp.tsx

@@ -2,6 +2,17 @@ import type { ReactElement } from 'react'
 import type { IconProps } from '../types.ts'
 import { IconBase } from '../IconBase.tsx'
 
+/**
+ * The ChevronUp icon.
+ *
+ * A fill-based SVG that inherits `currentColor` and scales via the
+ * `size` prop. Accepts all native `<svg>` attributes (see {@link IconProps}).
+ *
+ * @example
+ * ```tsx
+ * <ChevronUp size={20} aria-label="ChevronUp" />
+ * ```
+ */
 export const ChevronUp = (props: IconProps): ReactElement => (
   <IconBase {...props}>
     <path d="M20.06 15 19 16.06l-7-7-7 7L3.94 15 12 6.94z"/>

package/src/icons/Close.tsx

@@ -2,6 +2,17 @@ import type { ReactElement } from 'react'
 import type { IconProps } from '../types.ts'
 import { IconBase } from '../IconBase.tsx'
 
+/**
+ * The Close icon.
+ *
+ * A fill-based SVG that inherits `currentColor` and scales via the
+ * `size` prop. Accepts all native `<svg>` attributes (see {@link IconProps}).
+ *
+ * @example
+ * ```tsx
+ * <Close size={20} aria-label="Close" />
+ * ```
+ */
 export const Close = (props: IconProps): ReactElement => (
   <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"/>

package/src/icons/Copy.tsx

@@ -2,6 +2,17 @@ import type { ReactElement } from 'react'
 import type { IconProps } from '../types.ts'
 import { IconBase } from '../IconBase.tsx'
 
+/**
+ * The Copy icon.
+ *
+ * A fill-based SVG that inherits `currentColor` and scales via the
+ * `size` prop. Accepts all native `<svg>` attributes (see {@link IconProps}).
+ *
+ * @example
+ * ```tsx
+ * <Copy size={20} aria-label="Copy" />
+ * ```
+ */
 export const Copy = (props: IconProps): ReactElement => (
   <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"/>

package/src/icons/Delete.tsx

@@ -2,6 +2,17 @@ import type { ReactElement } from 'react'
 import type { IconProps } from '../types.ts'
 import { IconBase } from '../IconBase.tsx'
 
+/**
+ * The Delete icon.
+ *
+ * A fill-based SVG that inherits `currentColor` and scales via the
+ * `size` prop. Accepts all native `<svg>` attributes (see {@link IconProps}).
+ *
+ * @example
+ * ```tsx
+ * <Delete size={20} aria-label="Delete" />
+ * ```
+ */
 export const Delete = (props: IconProps): ReactElement => (
   <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"/>

package/src/icons/Download.tsx

@@ -2,6 +2,17 @@ import type { ReactElement } from 'react'
 import type { IconProps } from '../types.ts'
 import { IconBase } from '../IconBase.tsx'
 
+/**
+ * The Download icon.
+ *
+ * A fill-based SVG that inherits `currentColor` and scales via the
+ * `size` prop. Accepts all native `<svg>` attributes (see {@link IconProps}).
+ *
+ * @example
+ * ```tsx
+ * <Download size={20} aria-label="Download" />
+ * ```
+ */
 export const Download = (props: IconProps): ReactElement => (
   <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"/>

package/src/icons/Edit.tsx

@@ -2,6 +2,17 @@ import type { ReactElement } from 'react'
 import type { IconProps } from '../types.ts'
 import { IconBase } from '../IconBase.tsx'
 
+/**
+ * The Edit icon.
+ *
+ * A fill-based SVG that inherits `currentColor` and scales via the
+ * `size` prop. Accepts all native `<svg>` attributes (see {@link IconProps}).
+ *
+ * @example
+ * ```tsx
+ * <Edit size={20} aria-label="Edit" />
+ * ```
+ */
 export const Edit = (props: IconProps): ReactElement => (
   <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"/>

package/src/icons/Error.tsx

@@ -2,6 +2,17 @@ import type { ReactElement } from 'react'
 import type { IconProps } from '../types.ts'
 import { IconBase } from '../IconBase.tsx'
 
+/**
+ * The Error icon.
+ *
+ * A fill-based SVG that inherits `currentColor` and scales via the
+ * `size` prop. Accepts all native `<svg>` attributes (see {@link IconProps}).
+ *
+ * @example
+ * ```tsx
+ * <Error size={20} aria-label="Error" />
+ * ```
+ */
 export const Error = (props: IconProps): ReactElement => (
   <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"/>

package/src/icons/ExternalLink.tsx

@@ -2,6 +2,17 @@ import type { ReactElement } from 'react'
 import type { IconProps } from '../types.ts'
 import { IconBase } from '../IconBase.tsx'
 
+/**
+ * The ExternalLink icon.
+ *
+ * A fill-based SVG that inherits `currentColor` and scales via the
+ * `size` prop. Accepts all native `<svg>` attributes (see {@link IconProps}).
+ *
+ * @example
+ * ```tsx
+ * <ExternalLink size={20} aria-label="ExternalLink" />
+ * ```
+ */
 export const ExternalLink = (props: IconProps): ReactElement => (
   <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"/>

package/src/icons/Eye.tsx

@@ -2,6 +2,17 @@ import type { ReactElement } from 'react'
 import type { IconProps } from '../types.ts'
 import { IconBase } from '../IconBase.tsx'
 
+/**
+ * The Eye icon.
+ *
+ * A fill-based SVG that inherits `currentColor` and scales via the
+ * `size` prop. Accepts all native `<svg>` attributes (see {@link IconProps}).
+ *
+ * @example
+ * ```tsx
+ * <Eye size={20} aria-label="Eye" />
+ * ```
+ */
 export const Eye = (props: IconProps): ReactElement => (
   <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"/>

package/src/icons/EyeOff.tsx

@@ -2,6 +2,17 @@ import type { ReactElement } from 'react'
 import type { IconProps } from '../types.ts'
 import { IconBase } from '../IconBase.tsx'
 
+/**
+ * The EyeOff icon.
+ *
+ * A fill-based SVG that inherits `currentColor` and scales via the
+ * `size` prop. Accepts all native `<svg>` attributes (see {@link IconProps}).
+ *
+ * @example
+ * ```tsx
+ * <EyeOff size={20} aria-label="EyeOff" />
+ * ```
+ */
 export const EyeOff = (props: IconProps): ReactElement => (
   <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"/>

package/src/icons/File.tsx

@@ -2,6 +2,17 @@ import type { ReactElement } from 'react'
 import type { IconProps } from '../types.ts'
 import { IconBase } from '../IconBase.tsx'
 
+/**
+ * The File icon.
+ *
+ * A fill-based SVG that inherits `currentColor` and scales via the
+ * `size` prop. Accepts all native `<svg>` attributes (see {@link IconProps}).
+ *
+ * @example
+ * ```tsx
+ * <File size={20} aria-label="File" />
+ * ```
+ */
 export const File = (props: IconProps): ReactElement => (
   <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"/>

package/src/icons/Filter.tsx

@@ -2,6 +2,17 @@ import type { ReactElement } from 'react'
 import type { IconProps } from '../types.ts'
 import { IconBase } from '../IconBase.tsx'
 
+/**
+ * The Filter icon.
+ *
+ * A fill-based SVG that inherits `currentColor` and scales via the
+ * `size` prop. Accepts all native `<svg>` attributes (see {@link IconProps}).
+ *
+ * @example
+ * ```tsx
+ * <Filter size={20} aria-label="Filter" />
+ * ```
+ */
 export const Filter = (props: IconProps): ReactElement => (
   <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"/>

package/src/icons/Folder.tsx

@@ -2,6 +2,17 @@ import type { ReactElement } from 'react'
 import type { IconProps } from '../types.ts'
 import { IconBase } from '../IconBase.tsx'
 
+/**
+ * The Folder icon.
+ *
+ * A fill-based SVG that inherits `currentColor` and scales via the
+ * `size` prop. Accepts all native `<svg>` attributes (see {@link IconProps}).
+ *
+ * @example
+ * ```tsx
+ * <Folder size={20} aria-label="Folder" />
+ * ```
+ */
 export const Folder = (props: IconProps): ReactElement => (
   <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"/>

package/src/icons/Grid.tsx

@@ -2,6 +2,17 @@ import type { ReactElement } from 'react'
 import type { IconProps } from '../types.ts'
 import { IconBase } from '../IconBase.tsx'
 
+/**
+ * The Grid icon.
+ *
+ * A fill-based SVG that inherits `currentColor` and scales via the
+ * `size` prop. Accepts all native `<svg>` attributes (see {@link IconProps}).
+ *
+ * @example
+ * ```tsx
+ * <Grid size={20} aria-label="Grid" />
+ * ```
+ */
 export const Grid = (props: IconProps): ReactElement => (
   <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"/>

package/src/icons/Home.tsx

@@ -2,6 +2,17 @@ import type { ReactElement } from 'react'
 import type { IconProps } from '../types.ts'
 import { IconBase } from '../IconBase.tsx'
 
+/**
+ * The Home icon.
+ *
+ * A fill-based SVG that inherits `currentColor` and scales via the
+ * `size` prop. Accepts all native `<svg>` attributes (see {@link IconProps}).
+ *
+ * @example
+ * ```tsx
+ * <Home size={20} aria-label="Home" />
+ * ```
+ */
 export const Home = (props: IconProps): ReactElement => (
   <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"/>

package/src/icons/Image.tsx

@@ -2,6 +2,17 @@ import type { ReactElement } from 'react'
 import type { IconProps } from '../types.ts'
 import { IconBase } from '../IconBase.tsx'
 
+/**
+ * The Image icon.
+ *
+ * A fill-based SVG that inherits `currentColor` and scales via the
+ * `size` prop. Accepts all native `<svg>` attributes (see {@link IconProps}).
+ *
+ * @example
+ * ```tsx
+ * <Image size={20} aria-label="Image" />
+ * ```
+ */
 export const Image = (props: IconProps): ReactElement => (
   <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"/>

package/src/icons/Info.tsx

@@ -2,6 +2,17 @@ import type { ReactElement } from 'react'
 import type { IconProps } from '../types.ts'
 import { IconBase } from '../IconBase.tsx'
 
+/**
+ * The Info icon.
+ *
+ * A fill-based SVG that inherits `currentColor` and scales via the
+ * `size` prop. Accepts all native `<svg>` attributes (see {@link IconProps}).
+ *
+ * @example
+ * ```tsx
+ * <Info size={20} aria-label="Info" />
+ * ```
+ */
 export const Info = (props: IconProps): ReactElement => (
   <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"/>

package/src/icons/Link.tsx

@@ -2,6 +2,17 @@ import type { ReactElement } from 'react'
 import type { IconProps } from '../types.ts'
 import { IconBase } from '../IconBase.tsx'
 
+/**
+ * The Link icon.
+ *
+ * A fill-based SVG that inherits `currentColor` and scales via the
+ * `size` prop. Accepts all native `<svg>` attributes (see {@link IconProps}).
+ *
+ * @example
+ * ```tsx
+ * <Link size={20} aria-label="Link" />
+ * ```
+ */
 export const Link = (props: IconProps): ReactElement => (
   <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"/>

package/src/icons/List.tsx

@@ -2,6 +2,17 @@ import type { ReactElement } from 'react'
 import type { IconProps } from '../types.ts'
 import { IconBase } from '../IconBase.tsx'
 
+/**
+ * The List icon.
+ *
+ * A fill-based SVG that inherits `currentColor` and scales via the
+ * `size` prop. Accepts all native `<svg>` attributes (see {@link IconProps}).
+ *
+ * @example
+ * ```tsx
+ * <List size={20} aria-label="List" />
+ * ```
+ */
 export const List = (props: IconProps): ReactElement => (
   <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"/>

package/src/icons/Mail.tsx

@@ -2,6 +2,17 @@ import type { ReactElement } from 'react'
 import type { IconProps } from '../types.ts'
 import { IconBase } from '../IconBase.tsx'
 
+/**
+ * The Mail icon.
+ *
+ * A fill-based SVG that inherits `currentColor` and scales via the
+ * `size` prop. Accepts all native `<svg>` attributes (see {@link IconProps}).
+ *
+ * @example
+ * ```tsx
+ * <Mail size={20} aria-label="Mail" />
+ * ```
+ */
 export const Mail = (props: IconProps): ReactElement => (
   <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"/>

package/src/icons/Menu.tsx

@@ -2,6 +2,17 @@ import type { ReactElement } from 'react'
 import type { IconProps } from '../types.ts'
 import { IconBase } from '../IconBase.tsx'
 
+/**
+ * The Menu icon.
+ *
+ * A fill-based SVG that inherits `currentColor` and scales via the
+ * `size` prop. Accepts all native `<svg>` attributes (see {@link IconProps}).
+ *
+ * @example
+ * ```tsx
+ * <Menu size={20} aria-label="Menu" />
+ * ```
+ */
 export const Menu = (props: IconProps): ReactElement => (
   <IconBase {...props}>
     <path d="M21.75 6.25v1.5H2.25v-1.5zm0 5v1.5H2.25v-1.5zm0 5v1.5H2.25v-1.5z"/>

package/src/icons/Minus.tsx

@@ -2,6 +2,17 @@ import type { ReactElement } from 'react'
 import type { IconProps } from '../types.ts'
 import { IconBase } from '../IconBase.tsx'
 
+/**
+ * The Minus icon.
+ *
+ * A fill-based SVG that inherits `currentColor` and scales via the
+ * `size` prop. Accepts all native `<svg>` attributes (see {@link IconProps}).
+ *
+ * @example
+ * ```tsx
+ * <Minus size={20} aria-label="Minus" />
+ * ```
+ */
 export const Minus = (props: IconProps): ReactElement => (
   <IconBase {...props}>
     <path d="M20.75 11.25v1.5H3.25v-1.5z"/>

package/src/icons/Moon.tsx

@@ -2,6 +2,17 @@ import type { ReactElement } from 'react'
 import type { IconProps } from '../types.ts'
 import { IconBase } from '../IconBase.tsx'
 
+/**
+ * The Moon icon.
+ *
+ * A fill-based SVG that inherits `currentColor` and scales via the
+ * `size` prop. Accepts all native `<svg>` attributes (see {@link IconProps}).
+ *
+ * @example
+ * ```tsx
+ * <Moon size={20} aria-label="Moon" />
+ * ```
+ */
 export const Moon = (props: IconProps): ReactElement => (
   <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"/>

package/src/icons/Plus.tsx

@@ -2,6 +2,17 @@ import type { ReactElement } from 'react'
 import type { IconProps } from '../types.ts'
 import { IconBase } from '../IconBase.tsx'
 
+/**
+ * The Plus icon.
+ *
+ * A fill-based SVG that inherits `currentColor` and scales via the
+ * `size` prop. Accepts all native `<svg>` attributes (see {@link IconProps}).
+ *
+ * @example
+ * ```tsx
+ * <Plus size={20} aria-label="Plus" />
+ * ```
+ */
 export const Plus = (props: IconProps): ReactElement => (
   <IconBase {...props}>
     <path d="M11.25 3.25h1.5v17.5h-1.5z"/><path d="M20.75 11.25v1.5H3.25v-1.5z"/>

package/src/icons/Search.tsx

@@ -2,6 +2,17 @@ import type { ReactElement } from 'react'
 import type { IconProps } from '../types.ts'
 import { IconBase } from '../IconBase.tsx'
 
+/**
+ * The Search icon.
+ *
+ * A fill-based SVG that inherits `currentColor` and scales via the
+ * `size` prop. Accepts all native `<svg>` attributes (see {@link IconProps}).
+ *
+ * @example
+ * ```tsx
+ * <Search size={20} aria-label="Search" />
+ * ```
+ */
 export const Search = (props: IconProps): ReactElement => (
   <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"/>

package/src/icons/Settings.tsx

@@ -2,6 +2,17 @@ import type { ReactElement } from 'react'
 import type { IconProps } from '../types.ts'
 import { IconBase } from '../IconBase.tsx'
 
+/**
+ * The Settings icon.
+ *
+ * A fill-based SVG that inherits `currentColor` and scales via the
+ * `size` prop. Accepts all native `<svg>` attributes (see {@link IconProps}).
+ *
+ * @example
+ * ```tsx
+ * <Settings size={20} aria-label="Settings" />
+ * ```
+ */
 export const Settings = (props: IconProps): ReactElement => (
   <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"/>

package/src/icons/Share.tsx

@@ -2,6 +2,17 @@ import type { ReactElement } from 'react'
 import type { IconProps } from '../types.ts'
 import { IconBase } from '../IconBase.tsx'
 
+/**
+ * The Share icon.
+ *
+ * A fill-based SVG that inherits `currentColor` and scales via the
+ * `size` prop. Accepts all native `<svg>` attributes (see {@link IconProps}).
+ *
+ * @example
+ * ```tsx
+ * <Share size={20} aria-label="Share" />
+ * ```
+ */
 export const Share = (props: IconProps): ReactElement => (
   <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"/>

package/src/icons/Sort.tsx

@@ -2,6 +2,17 @@ import type { ReactElement } from 'react'
 import type { IconProps } from '../types.ts'
 import { IconBase } from '../IconBase.tsx'
 
+/**
+ * The Sort icon.
+ *
+ * A fill-based SVG that inherits `currentColor` and scales via the
+ * `size` prop. Accepts all native `<svg>` attributes (see {@link IconProps}).
+ *
+ * @example
+ * ```tsx
+ * <Sort size={20} aria-label="Sort" />
+ * ```
+ */
 export const Sort = (props: IconProps): ReactElement => (
   <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"/>

package/src/icons/Success.tsx

@@ -2,6 +2,17 @@ import type { ReactElement } from 'react'
 import type { IconProps } from '../types.ts'
 import { IconBase } from '../IconBase.tsx'
 
+/**
+ * The Success icon.
+ *
+ * A fill-based SVG that inherits `currentColor` and scales via the
+ * `size` prop. Accepts all native `<svg>` attributes (see {@link IconProps}).
+ *
+ * @example
+ * ```tsx
+ * <Success size={20} aria-label="Success" />
+ * ```
+ */
 export const Success = (props: IconProps): ReactElement => (
   <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"/>

package/src/icons/Sun.tsx

@@ -2,6 +2,17 @@ import type { ReactElement } from 'react'
 import type { IconProps } from '../types.ts'
 import { IconBase } from '../IconBase.tsx'
 
+/**
+ * The Sun icon.
+ *
+ * A fill-based SVG that inherits `currentColor` and scales via the
+ * `size` prop. Accepts all native `<svg>` attributes (see {@link IconProps}).
+ *
+ * @example
+ * ```tsx
+ * <Sun size={20} aria-label="Sun" />
+ * ```
+ */
 export const Sun = (props: IconProps): ReactElement => (
   <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"/>

package/src/icons/Upload.tsx

@@ -2,6 +2,17 @@ import type { ReactElement } from 'react'
 import type { IconProps } from '../types.ts'
 import { IconBase } from '../IconBase.tsx'
 
+/**
+ * The Upload icon.
+ *
+ * A fill-based SVG that inherits `currentColor` and scales via the
+ * `size` prop. Accepts all native `<svg>` attributes (see {@link IconProps}).
+ *
+ * @example
+ * ```tsx
+ * <Upload size={20} aria-label="Upload" />
+ * ```
+ */
 export const Upload = (props: IconProps): ReactElement => (
   <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"/>

package/src/icons/User.tsx

@@ -2,6 +2,17 @@ import type { ReactElement } from 'react'
 import type { IconProps } from '../types.ts'
 import { IconBase } from '../IconBase.tsx'
 
+/**
+ * The User icon.
+ *
+ * A fill-based SVG that inherits `currentColor` and scales via the
+ * `size` prop. Accepts all native `<svg>` attributes (see {@link IconProps}).
+ *
+ * @example
+ * ```tsx
+ * <User size={20} aria-label="User" />
+ * ```
+ */
 export const User = (props: IconProps): ReactElement => (
   <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"/>

package/src/icons/Warning.tsx

@@ -2,6 +2,17 @@ import type { ReactElement } from 'react'
 import type { IconProps } from '../types.ts'
 import { IconBase } from '../IconBase.tsx'
 
+/**
+ * The Warning icon.
+ *
+ * A fill-based SVG that inherits `currentColor` and scales via the
+ * `size` prop. Accepts all native `<svg>` attributes (see {@link IconProps}).
+ *
+ * @example
+ * ```tsx
+ * <Warning size={20} aria-label="Warning" />
+ * ```
+ */
 export const Warning = (props: IconProps): ReactElement => (
   <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"/>

package/src/types.ts

@@ -1,5 +1,14 @@
 import type { SVGProps } from 'react'
 
+/**
+ * Props accepted by every Primitiv icon. Extends all native `<svg>`
+ * attributes, so `className`, `style`, `onClick`, `aria-*`, etc. pass
+ * straight through to the rendered element.
+ */
 export interface IconProps extends SVGProps<SVGSVGElement> {
+  /**
+   * Width and height of the icon, in pixels (number) or any CSS length
+   * (string). Defaults to `24`.
+   */
   size?: number | string
 }