cybercore-css 0.2.0

package/src/icons/README.md

@@ -0,0 +1,378 @@
+# Cyber Icons
+
+Cyberpunk-themed SVG icon system for CYBERCORE CSS. Production-ready,
+tree-shakeable, and fully typed.
+
+## Features
+
+- **150+ icon specs** across 10 categories
+- **Stroke-based design** - scales perfectly at any size
+- **currentColor** - inherits text color automatically
+- **Zero dependencies** - pure SVG
+- **Tree-shakeable** - import only what you need
+- **TypeScript** - full type definitions
+- **Accessible** - aria-label support built-in
+
+## Installation
+
+Icons are included with CYBERCORE CSS:
+
+```bash
+npm install cybercore-css
+```
+
+## Quick Start
+
+### Simple HTML/CSS (No Build Tools)
+
+Copy SVG files directly from `node_modules/cybercore-css/src/icons/svg/` or use
+the CDN:
+
+```html
+<!-- Include CSS for icon utilities -->
+<link
+  rel="stylesheet"
+  href="https://unpkg.com/cybercore-css/dist/cybercore.min.css"
+/>
+
+<!-- Option 1: Copy SVG inline -->
+<span class="cyber-icon cyber-icon--cyan" style="width: 24px; height: 24px;">
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="1.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <polyline points="4 17 10 11 4 5" />
+    <line x1="12" y1="19" x2="20" y2="19" />
+  </svg>
+</span>
+
+<!-- Option 2: Use as background image -->
+<span class="my-icon"></span>
+<style>
+  .my-icon {
+    width: 24px;
+    height: 24px;
+    background-image: url('path/to/terminal.svg');
+    background-size: contain;
+  }
+</style>
+```
+
+**Icon CSS Classes:**
+
+- `.cyber-icon--cyan` / `--magenta` / `--yellow` / `--green` - Color variants
+- `.cyber-icon--sm` (16px) / `--md` (24px) / `--lg` (32px) / `--xl` (48px) -
+  Sizes
+- `.cyber-icon--spin` / `--pulse` / `--glitch` - Animations
+
+### React / Next.js / Vite
+
+```tsx
+import { renderIcon, getRegisteredIcons } from 'cybercore-css/icons';
+
+function App() {
+  return (
+    <div>
+      {/* Method 1: Render as HTML string */}
+      <span
+        dangerouslySetInnerHTML={{
+          __html: renderIcon('terminal', { size: 24, color: 'cyan' }),
+        }}
+      />
+
+      {/* Method 2: Create a reusable Icon component */}
+      <Icon name="shield" size={32} color="magenta" />
+    </div>
+  );
+}
+
+// Reusable Icon Component
+function Icon({ name, size = 24, color = 'current', className = '' }) {
+  return (
+    <span
+      className={`cyber-icon ${className}`}
+      style={{
+        color: color !== 'current' ? `var(--cyber-${color}-500)` : undefined,
+      }}
+      dangerouslySetInnerHTML={{ __html: renderIcon(name, { size }) }}
+    />
+  );
+}
+```
+
+### Vue.js
+
+```vue
+<template>
+  <span v-html="iconHtml" class="cyber-icon"></span>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import { renderIcon } from 'cybercore-css/icons';
+
+const props = defineProps({
+  name: String,
+  size: { type: Number, default: 24 },
+  color: { type: String, default: 'cyan' },
+});
+
+const iconHtml = computed(() =>
+  renderIcon(props.name, { size: props.size, color: props.color })
+);
+</script>
+```
+
+### Svelte
+
+```svelte
+<script>
+  import { renderIcon } from 'cybercore-css/icons';
+
+  export let name = 'terminal';
+  export let size = 24;
+  export let color = 'cyan';
+
+  $: html = renderIcon(name, { size, color });
+</script>
+
+<span class="cyber-icon" {@html html}></span>
+```
+
+## Usage
+
+### Import Everything
+
+```ts
+import * as CyberIcons from 'cybercore-css/icons';
+
+// Render an icon
+const html = CyberIcons.renderIcon('terminal', {
+  size: 24,
+  color: 'cyan',
+});
+```
+
+### Import Specific Functions
+
+```ts
+import { renderIcon, getIcon, icons } from 'cybercore-css/icons';
+
+// Get raw SVG string
+const svg = getIcon('terminal');
+
+// Render with options
+const html = renderIcon('terminal', { size: 32, color: 'magenta' });
+
+// Access registry directly
+const chipSvg = icons.chip.svg;
+```
+
+### Tree-Shakeable Imports (Optimal Bundle Size)
+
+For the smallest bundle, import icons directly and use `renderIconDef`:
+
+```ts
+// Import only the icons you need
+import { renderIconDef } from 'cybercore-css/icons';
+import { terminal, chip } from 'cybercore-css/icons/defs/tech';
+import { arrowUp } from 'cybercore-css/icons/defs/navigation';
+
+// Render with full options - bundler only includes these 3 icons
+const html = renderIconDef(terminal, { size: 24, color: 'cyan' });
+const chipHtml = renderIconDef(chip, { size: 32, variant: 'solid' });
+
+// Access SVG directly
+element.innerHTML = arrowUp.svg;
+```
+
+**Why this works for tree-shaking:**
+
+- `renderIcon('terminal')` - NOT tree-shakeable (needs full registry for string
+  lookup)
+- `renderIconDef(terminal)` - Tree-shakeable (bundler sees the direct import)
+
+### Legacy Individual Imports
+
+```ts
+import {
+  ChipIcon,
+  TerminalIcon,
+  SignalIcon,
+} from 'cybercore-css/icons/individual';
+
+// Each export is the raw SVG string
+element.innerHTML = ChipIcon;
+```
+
+### Sprite Sheet (For Many Icons)
+
+```ts
+import { createSpriteSheet, renderIconRef } from 'cybercore-css/icons';
+
+// Add sprite sheet once to your HTML
+document.body.insertAdjacentHTML('beforeend', createSpriteSheet());
+
+// Then reference icons by ID (smaller HTML)
+const html = renderIconRef('terminal', { size: 24 });
+// Output: <svg><use href="#cyber-icon-terminal"/></svg>
+```
+
+### Data URI (For CSS)
+
+```ts
+import { getIconDataUri } from 'cybercore-css/icons';
+
+const uri = getIconDataUri('chip', '#00f0ff');
+// Use in CSS: background-image: url(${uri});
+```
+
+## API Reference
+
+### `renderIcon(name, options?)`
+
+Renders an icon as an HTML string. **Not tree-shakeable** - use for convenience
+when bundle size isn't critical.
+
+| Option        | Type                                                      | Default     | Description              |
+| ------------- | --------------------------------------------------------- | ----------- | ------------------------ |
+| `size`        | `16 \| 20 \| 24 \| 32 \| 48 \| 64`                        | `24`        | Icon size in pixels      |
+| `color`       | `'cyan' \| 'magenta' \| 'yellow' \| 'green' \| 'current'` | `'current'` | Color variant            |
+| `variant`     | `'outline' \| 'solid' \| 'duotone' \| 'glitch'`           | `'outline'` | Icon variant             |
+| `className`   | `string`                                                  | `''`        | Additional CSS classes   |
+| `aria-label`  | `string`                                                  | -           | Accessibility label      |
+| `aria-hidden` | `boolean`                                                 | `true`      | Hide from screen readers |
+
+### `renderIconDef(icon, options?)`
+
+Renders an icon from its definition. **Tree-shakeable** - bundler only includes
+icons you import.
+
+```ts
+import { renderIconDef } from 'cybercore-css/icons';
+import { terminal } from 'cybercore-css/icons/defs/tech';
+
+const html = renderIconDef(terminal, { size: 24, color: 'cyan' });
+```
+
+Same options as `renderIcon`.
+
+### `getIconSvg(icon, variant?)`
+
+Returns the SVG string from an icon definition. **Tree-shakeable**.
+
+```ts
+import { getIconSvg } from 'cybercore-css/icons';
+import { shield } from 'cybercore-css/icons/defs/security';
+
+const svg = getIconSvg(shield, 'solid');
+```
+
+### `getIcon(name, variant?)`
+
+Returns the raw SVG string for an icon by name, or `null` if not found. **Not
+tree-shakeable**.
+
+### `iconExists(name)`
+
+Returns `true` if the icon exists in the registry.
+
+### `createSpriteSheet()`
+
+Generates an SVG sprite sheet containing all icons.
+
+### `getIconDataUri(name, color?)`
+
+Returns a data URI for use in CSS `background-image`.
+
+## Icon Categories
+
+| Category        | Description       | Examples                                 |
+| --------------- | ----------------- | ---------------------------------------- |
+| `navigation`    | UI navigation     | arrow-up, chevron-right, home, menu      |
+| `actions`       | User interactions | search, edit, delete, copy, download     |
+| `media`         | Audio/video       | play, pause, volume-high, camera         |
+| `communication` | Messaging         | bell, message, mail, send                |
+| `data`          | Analytics         | chart-bar, database, calendar, clock     |
+| `security`      | Auth & privacy    | lock, key, shield, eye, user             |
+| `tech`          | Development       | terminal, code, chip, server, git-branch |
+| `files`         | Documents         | file, folder, clipboard, attachment      |
+| `status`        | Feedback          | info, warning, error, success, loading   |
+| `social`        | Social            | heart, star, thumbs-up, bookmark         |
+
+## Design Guidelines
+
+When creating new icons, follow these rules:
+
+### Structure
+
+- **ViewBox**: Always `0 0 24 24`
+- **Stroke-based**: Use `fill="none" stroke="currentColor"`
+- **Stroke width**: Always `1.5`
+- **Line caps**: Use `stroke-linecap="round" stroke-linejoin="round"`
+
+### Template
+
+```svg
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+  <!-- Icon paths here -->
+</svg>
+```
+
+### Style
+
+- Keep it simple - icons should be recognizable at 16px
+- Use geometric shapes with subtle cyber/tech details
+- Avoid complex gradients or effects
+- Test at multiple sizes: 16, 24, 32, 48px
+
+### Don'ts
+
+- No inline styles
+- No embedded scripts
+- No raster images
+- No external references
+- No proprietary fonts
+
+## Validation
+
+Run the validation script to check all icons:
+
+```bash
+npm run validate:icons
+```
+
+This checks:
+
+- SVG structure and attributes
+- Security (no scripts or event handlers)
+- Consistency (stroke width, viewBox)
+- Coverage (implemented vs. specified)
+
+## Contributing Icons
+
+1. Check `icon-list.ts` for icons that need to be created
+2. Create the SVG following the design guidelines
+3. Add to `registry.ts` with proper metadata
+4. Add individual export to `individual.ts`
+5. Run validation and tests
+
+## Color Palette
+
+Icons work with the CYBERCORE color system:
+
+| Color   | CSS Variable          | Hex       |
+| ------- | --------------------- | --------- |
+| Cyan    | `--cyber-cyan-500`    | `#00f0ff` |
+| Magenta | `--cyber-magenta-500` | `#ff00aa` |
+| Yellow  | `--cyber-yellow-500`  | `#f0ff00` |
+| Green   | `--cyber-green-500`   | `#00ff88` |
+
+## License
+
+MIT - Part of CYBERCORE CSS

package/src/icons/defs/_template.ts

@@ -0,0 +1,27 @@
+/**
+ * Icon Name
+ * @category category-name
+ *
+ * TEMPLATE FILE - Copy this to create a new icon definition
+ * Filename: icon-name.ts (kebab-case)
+ * Export name: iconName (camelCase)
+ */
+import type { IconDefinition } from '../types';
+
+export const iconName: IconDefinition = {
+  name: 'icon-name', // kebab-case, matches filename
+  category: 'navigation', // navigation|actions|media|communication|data|security|tech|files|status|social
+  description: 'Brief description of the icon',
+  tags: ['tag1', 'tag2', 'tag3'],
+  svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+  <!-- Icon paths here -->
+</svg>`,
+  // Optional: Add variants
+  // variants: {
+  //   solid: `<svg>...</svg>`,
+  //   duotone: `<svg>...</svg>`,
+  //   glitch: `<svg>...</svg>`,
+  // },
+};
+
+export default iconName;

package/src/icons/defs/actions/check.ts

@@ -0,0 +1,36 @@
+/**
+ * Check Icon
+ * @category actions
+ */
+import type { IconDefinition } from '../../types';
+
+export const check: IconDefinition = {
+  name: 'check',
+  category: 'actions',
+  description: 'Confirm or mark complete',
+  tags: ['check', 'checkmark', 'confirm', 'done', 'success'],
+  svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M20 6L9 17l-5-5"/>
+  <circle cx="9" cy="17" r="1"/>
+  <line x1="7" y1="10" x2="9" y2="12"/>
+</svg>`,
+  variants: {
+    solid: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+  <path d="M20.71 5.29a1 1 0 0 1 0 1.42l-11 11a1 1 0 0 1-1.42 0l-5-5a1 1 0 1 1 1.42-1.42L9 15.59l10.29-10.3a1 1 0 0 1 1.42 0z"/>
+</svg>`,
+    duotone: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M4 12l5 5L20 6" fill="currentColor" opacity="0.3"/>
+  <path d="M20 6L9 17l-5-5"/>
+  <circle cx="9" cy="17" r="1"/>
+  <line x1="7" y1="10" x2="9" y2="12"/>
+</svg>`,
+    glitch: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M20 6L9 17l-5-5" transform="translate(1,-1)" opacity="0.5"/>
+  <path d="M20 6L9 17l-5-5"/>
+  <circle cx="9" cy="17" r="1"/>
+  <line x1="7" y1="10" x2="9" y2="12"/>
+</svg>`,
+  },
+};
+
+export default check;

package/src/icons/defs/actions/copy.ts

@@ -0,0 +1,37 @@
+/**
+ * Copy Icon
+ * @category actions
+ */
+import type { IconDefinition } from '../../types';
+
+export const copy: IconDefinition = {
+  name: 'copy',
+  category: 'actions',
+  description: 'Copy to clipboard',
+  tags: ['copy', 'clipboard', 'duplicate', 'clone', 'paste'],
+  svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+  <rect x="9" y="8" width="11" height="11" rx="2"/>
+  <path d="M5 15H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>
+</svg>`,
+  variants: {
+    solid: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+  <path d="M11 2a2 2 0 0 0-2 2v1H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h1v1a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2H9V4a2 2 0 0 0-2-2zm0 7h8a2 2 0 0 1 2 2v8H7V9h4zm2 3a1 1 0 0 0-1 1v3a1 1 0 0 0 2 0v-3a1 1 0 0 0-1-1zm2 1a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2z"/>
+</svg>`,
+    duotone: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+  <rect x="9" y="9" width="12" height="12" rx="2" fill="currentColor" opacity="0.3"/>
+  <rect x="9" y="9" width="12" height="12" rx="2"/>
+  <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>
+  <line x1="12" y1="13" x2="12" y2="17"/>
+  <line x1="15" y1="15" x2="18" y2="15"/>
+</svg>`,
+    glitch: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+  <rect x="9" y="9" width="12" height="12" rx="2" transform="translate(1,-1)" opacity="0.5"/>
+  <rect x="9" y="9" width="12" height="12" rx="2"/>
+  <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>
+  <line x1="12" y1="13" x2="12" y2="17"/>
+  <line x1="15" y1="15" x2="18" y2="15"/>
+</svg>`,
+  },
+};
+
+export default copy;

package/src/icons/defs/actions/cut.ts

@@ -0,0 +1,44 @@
+/**
+ * Cut Icon
+ * @category actions
+ */
+import type { IconDefinition } from '../../types';
+
+export const cut: IconDefinition = {
+  name: 'cut',
+  category: 'actions',
+  description: 'Cut to clipboard',
+  tags: ['cut', 'scissors', 'clipboard', 'remove', 'snip'],
+  svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+  <circle cx="6" cy="18" r="2"/>
+  <circle cx="18" cy="18" r="2"/>
+  <path d="M8 18l4-9 4 9"/>
+  <path d="M12 9l8-6"/>
+  <line x1="8" y1="3" x2="12" y2="9"/>
+</svg>`,
+  variants: {
+    solid: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+  <path d="M6 15a3 3 0 1 0 0 6 3 3 0 0 0 0-6zm12 0a3 3 0 1 0 0 6 3 3 0 0 0 0-6zm-9.5 1.5l3.5-7.5 3.5 7.5h-7zm3.5-8.5l7.5-5.5a1 1 0 0 1 1.2 1.6l-8 5.9a1 1 0 0 1-1.4 0L4.3 3.6a1 1 0 1 1 1.2-1.6L12 7.5z"/>
+</svg>`,
+    duotone: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+  <circle cx="6" cy="18" r="2" fill="currentColor" opacity="0.3"/>
+  <circle cx="18" cy="18" r="2" fill="currentColor" opacity="0.3"/>
+  <circle cx="6" cy="18" r="2"/>
+  <circle cx="18" cy="18" r="2"/>
+  <path d="M8 18l4-9 4 9"/>
+  <path d="M12 9l8-6"/>
+  <line x1="8" y1="3" x2="12" y2="9"/>
+</svg>`,
+    glitch: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+  <circle cx="6" cy="18" r="2" transform="translate(1,-1)" opacity="0.5"/>
+  <circle cx="18" cy="18" r="2" transform="translate(1,-1)" opacity="0.5"/>
+  <circle cx="6" cy="18" r="2"/>
+  <circle cx="18" cy="18" r="2"/>
+  <path d="M8 18l4-9 4 9"/>
+  <path d="M12 9l8-6"/>
+  <line x1="8" y1="3" x2="12" y2="9"/>
+</svg>`,
+  },
+};
+
+export default cut;

package/src/icons/defs/actions/delete.ts

@@ -0,0 +1,42 @@
+/**
+ * Delete Icon
+ * @category actions
+ */
+import type { IconDefinition } from '../../types';
+
+export const deleteIcon: IconDefinition = {
+  name: 'delete',
+  category: 'actions',
+  description: 'Delete or remove content',
+  tags: ['delete', 'trash', 'remove', 'discard', 'bin'],
+  svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M3 6h18"/>
+  <path d="M8 6V4h8v2"/>
+  <path d="M19 6v14H5V6"/>
+  <line x1="10" y1="11" x2="10" y2="16"/>
+  <line x1="14" y1="11" x2="14" y2="16"/>
+</svg>`,
+  variants: {
+    solid: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+  <path d="M3 5a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2H3zm5 0V4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v1H8zM5 8v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V8H5zm5 2a1 1 0 0 1 1 1v5a1 1 0 0 1-2 0v-5a1 1 0 0 1 1-1zm4 0a1 1 0 0 1 1 1v5a1 1 0 0 1-2 0v-5a1 1 0 0 1 1-1z"/>
+</svg>`,
+    duotone: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M19 6v14H5V6" fill="currentColor" opacity="0.3"/>
+  <path d="M3 6h18"/>
+  <path d="M8 6V4h8v2"/>
+  <path d="M19 6v14H5V6"/>
+  <line x1="10" y1="11" x2="10" y2="16"/>
+  <line x1="14" y1="11" x2="14" y2="16"/>
+</svg>`,
+    glitch: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M19 6v14H5V6" transform="translate(1,-1)" opacity="0.5"/>
+  <path d="M3 6h18"/>
+  <path d="M8 6V4h8v2"/>
+  <path d="M19 6v14H5V6"/>
+  <line x1="10" y1="11" x2="10" y2="16"/>
+  <line x1="14" y1="11" x2="14" y2="16"/>
+</svg>`,
+  },
+};
+
+export default deleteIcon;

package/src/icons/defs/actions/download.ts

@@ -0,0 +1,36 @@
+/**
+ * Download Icon
+ * @category actions
+ */
+import type { IconDefinition } from '../../types';
+
+export const download: IconDefinition = {
+  name: 'download',
+  category: 'actions',
+  description: 'Download file or data',
+  tags: ['download', 'save', 'export', 'arrow-down', 'fetch'],
+  svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M12 3v12m0 0l-4-4m4 4l4-4"/>
+  <path d="M3 17v2a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-2"/>
+  <line x1="7" y1="21" x2="17" y2="21"/>
+</svg>`,
+  variants: {
+    solid: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+  <path d="M12 2a1 1 0 0 1 1 1v9.59l2.29-2.3a1 1 0 1 1 1.42 1.42l-4 4a1 1 0 0 1-1.42 0l-4-4a1 1 0 1 1 1.42-1.42L11 12.59V3a1 1 0 0 1 1-1zM3 16a1 1 0 0 1 1 1v2a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-2a1 1 0 0 1 2 0v2a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3v-2a1 1 0 0 1 1-1z"/>
+</svg>`,
+    duotone: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M3 17v2a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-2" fill="currentColor" opacity="0.3"/>
+  <path d="M12 3v12m0 0l-4-4m4 4l4-4"/>
+  <path d="M3 17v2a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-2"/>
+  <line x1="7" y1="21" x2="17" y2="21"/>
+</svg>`,
+    glitch: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M12 3v12m0 0l-4-4m4 4l4-4" transform="translate(1,-1)" opacity="0.5"/>
+  <path d="M12 3v12m0 0l-4-4m4 4l4-4"/>
+  <path d="M3 17v2a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-2"/>
+  <line x1="7" y1="21" x2="17" y2="21"/>
+</svg>`,
+  },
+};
+
+export default download;

package/src/icons/defs/actions/drag.ts

@@ -0,0 +1,60 @@
+/**
+ * Drag Icon
+ * @category actions
+ */
+import type { IconDefinition } from '../../types';
+
+export const drag: IconDefinition = {
+  name: 'drag',
+  category: 'actions',
+  description: 'Drag handle for reordering',
+  tags: ['drag', 'handle', 'grip', 'move', 'reorder'],
+  svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+  <circle cx="9" cy="6" r="1"/>
+  <circle cx="15" cy="6" r="1"/>
+  <circle cx="9" cy="12" r="1"/>
+  <circle cx="15" cy="12" r="1"/>
+  <circle cx="9" cy="18" r="1"/>
+  <circle cx="15" cy="18" r="1"/>
+</svg>`,
+  variants: {
+    solid: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+  <circle cx="9" cy="6" r="1.5"/>
+  <circle cx="15" cy="6" r="1.5"/>
+  <circle cx="9" cy="12" r="1.5"/>
+  <circle cx="15" cy="12" r="1.5"/>
+  <circle cx="9" cy="18" r="1.5"/>
+  <circle cx="15" cy="18" r="1.5"/>
+</svg>`,
+    duotone: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+  <circle cx="9" cy="6" r="1" fill="currentColor" opacity="0.3"/>
+  <circle cx="15" cy="6" r="1" fill="currentColor" opacity="0.3"/>
+  <circle cx="9" cy="12" r="1" fill="currentColor" opacity="0.3"/>
+  <circle cx="15" cy="12" r="1" fill="currentColor" opacity="0.3"/>
+  <circle cx="9" cy="18" r="1" fill="currentColor" opacity="0.3"/>
+  <circle cx="15" cy="18" r="1" fill="currentColor" opacity="0.3"/>
+  <circle cx="9" cy="6" r="1"/>
+  <circle cx="15" cy="6" r="1"/>
+  <circle cx="9" cy="12" r="1"/>
+  <circle cx="15" cy="12" r="1"/>
+  <circle cx="9" cy="18" r="1"/>
+  <circle cx="15" cy="18" r="1"/>
+</svg>`,
+    glitch: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+  <circle cx="9" cy="6" r="1" transform="translate(1,-1)" opacity="0.5"/>
+  <circle cx="15" cy="6" r="1" transform="translate(1,-1)" opacity="0.5"/>
+  <circle cx="9" cy="12" r="1" transform="translate(1,-1)" opacity="0.5"/>
+  <circle cx="15" cy="12" r="1" transform="translate(1,-1)" opacity="0.5"/>
+  <circle cx="9" cy="18" r="1" transform="translate(1,-1)" opacity="0.5"/>
+  <circle cx="15" cy="18" r="1" transform="translate(1,-1)" opacity="0.5"/>
+  <circle cx="9" cy="6" r="1"/>
+  <circle cx="15" cy="6" r="1"/>
+  <circle cx="9" cy="12" r="1"/>
+  <circle cx="15" cy="12" r="1"/>
+  <circle cx="9" cy="18" r="1"/>
+  <circle cx="15" cy="18" r="1"/>
+</svg>`,
+  },
+};
+
+export default drag;