@primitiv-ui/icons 0.1.28 → 0.1.30

package/README.md

@@ -46,6 +46,7 @@ All other [SVG element attributes](https://developer.mozilla.org/en-US/docs/Web/
 | [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"` |
+| [Bold](src/icons/Bold.tsx) | `import { Bold } 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"` |
@@ -64,10 +65,11 @@ All other [SVG element attributes](https://developer.mozilla.org/en-US/docs/Web/
 | [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"` |
+| [Grid](src/icons/GridIcon.tsx) | `import { GridIcon } from "@primitiv-ui/icons"` — exported as `GridIcon`, see below |
 | [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"` |
+| [Italic](src/icons/Italic.tsx) | `import { Italic } 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"` |
@@ -76,6 +78,8 @@ All other [SVG element attributes](https://developer.mozilla.org/en-US/docs/Web/
 | [Minimize](src/icons/Minimize.tsx) | `import { Minimize } 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"` |
+| [Pause](src/icons/Pause.tsx) | `import { Pause } from "@primitiv-ui/icons"` |
+| [Play](src/icons/Play.tsx) | `import { Play } 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"` |
@@ -83,6 +87,7 @@ All other [SVG element attributes](https://developer.mozilla.org/en-US/docs/Web/
 | [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"` |
+| [Underline](src/icons/Underline.tsx) | `import { Underline } 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"` |
@@ -103,6 +108,34 @@ All other [SVG element attributes](https://developer.mozilla.org/en-US/docs/Web/
 
 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.
 
+### Exported-name overrides
+
+An icon's exported name normally comes straight from its filename, which is what
+keeps the SVG asset, the Figma glyph and the React export in lockstep. One icon
+is an exception, via `NAME_OVERRIDES` in `scripts/generate.ts`:
+
+| Glyph / SVG / Figma | Exported as |
+|---|---|
+| `grid` | **`GridIcon`** |
+
+`Grid` is also a registry layout component (RFC 0022), so a consumer importing
+both in the same module gets a duplicate-identifier error that fails the build
+outright — which is exactly how this was found. Renaming the asset to
+`grid-icon.svg` would fix it too, but it pushes a redundant `-icon` suffix onto
+the SVG and the Figma glyph, where it reads as a mistake. Overriding only the
+exported symbol leaves both of those named `grid`, so **nothing needs renaming
+in Figma**.
+
+Only add an override for a genuine collision, never for taste — every entry is
+a place where the code name and the design name can drift.
+
+**`List` is the same shape of collision and is deliberately *not* overridden.**
+There is a registry `list` component too, but nothing imports both in one module
+today, and renaming a published export is a breaking change that should not be
+made speculatively. If you hit it, either alias at the import site
+(`import { List as ListIcon } from "@primitiv-ui/icons"`) or add the override
+here and take the break knowingly.
+
 ## Architecture
 
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primitiv-ui/icons",
-  "version": "0.1.28",
+  "version": "0.1.30",
   "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",

package/src/icons/Bold.tsx

@@ -0,0 +1,20 @@
+import type { ReactElement } from 'react'
+import type { IconProps } from '../types.ts'
+import { IconBase } from '../IconBase.tsx'
+
+/**
+ * The Bold icon.
+ *
+ * A fill-based SVG that inherits `currentColor` and scales via the
+ * `size` prop. Accepts all native `<svg>` attributes (see {@link IconProps}).
+ *
+ * @example
+ * ```tsx
+ * <Bold size={20} aria-label="Bold" />
+ * ```
+ */
+export const Bold = (props: IconProps): ReactElement => (
+  <IconBase {...props}>
+    <path fillRule="evenodd" d="M12.5 2.875c1.667 0 3.132.49 4.198 1.411 1.077.93 1.677 2.243 1.677 3.714 0 1.399-.544 2.634-1.528 3.531q.57.297 1.047.701A4.89 4.89 0 0 1 19.625 16c0 1.483-.623 2.803-1.746 3.73-1.108.915-2.63 1.395-4.379 1.395H5.375V2.875zm-4.875 16H13.5c1.35 0 2.329-.37 2.946-.88.602-.497.929-1.179.929-1.995 0-.821-.332-1.533-.943-2.057-.622-.531-1.597-.918-2.932-.918H7.625zm0-8.1H12.5c1.25 0 2.163-.344 2.742-.827.562-.468.883-1.123.883-1.948 0-.83-.325-1.516-.898-2.01-.583-.505-1.494-.865-2.727-.865H7.625z" clipRule="evenodd"/>
+  </IconBase>
+)

package/src/icons/{Grid.tsx → GridIcon.tsx}

@@ -10,10 +10,10 @@ import { IconBase } from '../IconBase.tsx'
  *
  * @example
  * ```tsx
- * <Grid size={20} aria-label="Grid" />
+ * <GridIcon size={20} aria-label="Grid" />
  * ```
  */
-export const Grid = (props: IconProps): ReactElement => (
+export const GridIcon = (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"/>
   </IconBase>

package/src/icons/Italic.tsx

@@ -0,0 +1,20 @@
+import type { ReactElement } from 'react'
+import type { IconProps } from '../types.ts'
+import { IconBase } from '../IconBase.tsx'
+
+/**
+ * The Italic icon.
+ *
+ * A fill-based SVG that inherits `currentColor` and scales via the
+ * `size` prop. Accepts all native `<svg>` attributes (see {@link IconProps}).
+ *
+ * @example
+ * ```tsx
+ * <Italic size={20} aria-label="Italic" />
+ * ```
+ */
+export const Italic = (props: IconProps): ReactElement => (
+  <IconBase {...props}>
+    <path d="M18.5 5.75h-3.472l-4.465 12.5H14v1.5H5.5v-1.5h3.472l4.465-12.5H10v-1.5h8.5z"/>
+  </IconBase>
+)

package/src/icons/Pause.tsx

@@ -0,0 +1,20 @@
+import type { ReactElement } from 'react'
+import type { IconProps } from '../types.ts'
+import { IconBase } from '../IconBase.tsx'
+
+/**
+ * The Pause icon.
+ *
+ * A fill-based SVG that inherits `currentColor` and scales via the
+ * `size` prop. Accepts all native `<svg>` attributes (see {@link IconProps}).
+ *
+ * @example
+ * ```tsx
+ * <Pause size={20} aria-label="Pause" />
+ * ```
+ */
+export const Pause = (props: IconProps): ReactElement => (
+  <IconBase {...props}>
+    <path d="M10.25 18.5h-1.5v-13h1.5zM15.25 18.5h-1.5v-13h1.5z"/>
+  </IconBase>
+)

package/src/icons/Play.tsx

@@ -0,0 +1,20 @@
+import type { ReactElement } from 'react'
+import type { IconProps } from '../types.ts'
+import { IconBase } from '../IconBase.tsx'
+
+/**
+ * The Play icon.
+ *
+ * A fill-based SVG that inherits `currentColor` and scales via the
+ * `size` prop. Accepts all native `<svg>` attributes (see {@link IconProps}).
+ *
+ * @example
+ * ```tsx
+ * <Play size={20} aria-label="Play" />
+ * ```
+ */
+export const Play = (props: IconProps): ReactElement => (
+  <IconBase {...props}>
+    <path fillRule="evenodd" d="M19.978 12 7.92 20.44V3.56zM9.42 17.56 17.362 12 9.42 6.44z" clipRule="evenodd"/>
+  </IconBase>
+)

package/src/icons/Underline.tsx

@@ -0,0 +1,20 @@
+import type { ReactElement } from 'react'
+import type { IconProps } from '../types.ts'
+import { IconBase } from '../IconBase.tsx'
+
+/**
+ * The Underline icon.
+ *
+ * A fill-based SVG that inherits `currentColor` and scales via the
+ * `size` prop. Accepts all native `<svg>` attributes (see {@link IconProps}).
+ *
+ * @example
+ * ```tsx
+ * <Underline size={20} aria-label="Underline" />
+ * ```
+ */
+export const Underline = (props: IconProps): ReactElement => (
+  <IconBase {...props}>
+    <path d="M18.5 21.25h-13v-1.5h13zM7.75 11.5c0 2.615 1.893 4.5 4.25 4.5s4.25-1.885 4.25-4.5v-8h1.5v8c0 3.385-2.507 6-5.75 6s-5.75-2.615-5.75-6v-8h1.5z"/>
+  </IconBase>
+)

package/src/icons/index.ts

@@ -1,6 +1,7 @@
 export { ArrowLeft } from './ArrowLeft.tsx'
 export { ArrowRight } from './ArrowRight.tsx'
 export { Bell } from './Bell.tsx'
+export { Bold } from './Bold.tsx'
 export { Calendar } from './Calendar.tsx'
 export { Check } from './Check.tsx'
 export { ChevronDown } from './ChevronDown.tsx'
@@ -19,10 +20,11 @@ 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 { GridIcon } from './GridIcon.tsx'
 export { Home } from './Home.tsx'
 export { Image } from './Image.tsx'
 export { Info } from './Info.tsx'
+export { Italic } from './Italic.tsx'
 export { Link } from './Link.tsx'
 export { List } from './List.tsx'
 export { Mail } from './Mail.tsx'
@@ -31,6 +33,8 @@ export { Menu } from './Menu.tsx'
 export { Minimize } from './Minimize.tsx'
 export { Minus } from './Minus.tsx'
 export { Moon } from './Moon.tsx'
+export { Pause } from './Pause.tsx'
+export { Play } from './Play.tsx'
 export { Plus } from './Plus.tsx'
 export { Search } from './Search.tsx'
 export { Settings } from './Settings.tsx'
@@ -38,6 +42,7 @@ export { Share } from './Share.tsx'
 export { Sort } from './Sort.tsx'
 export { Success } from './Success.tsx'
 export { Sun } from './Sun.tsx'
+export { Underline } from './Underline.tsx'
 export { Upload } from './Upload.tsx'
 export { User } from './User.tsx'
 export { Warning } from './Warning.tsx'