@stacksjs/iconify-core 0.1.3

package/README.md

@@ -0,0 +1,88 @@
+# @stacksjs/iconify-core
+
+Core utilities for using Iconify icons in stx templates.
+
+## Installation
+
+```bash
+bun add @stacksjs/iconify-core
+```
+
+## Usage
+
+This package provides the core utilities for rendering icons. You'll typically use it alongside a specific icon collection package like `@stacksjs/iconify-lucide` or `@stacksjs/iconify-mdi`.
+
+```typescript
+import { renderIcon } from '@stacksjs/iconify-core'
+import type { IconData, IconProps } from '@stacksjs/iconify-core'
+
+const iconData: IconData = {
+  body: '<path fill="currentColor" d="..."/>',
+  width: 24,
+  height: 24,
+  viewBox: '0 0 24 24'
+}
+
+const svg = renderIcon(iconData, {
+  size: 32,
+  color: '#4a90e2'
+})
+```
+
+## API
+
+### `renderIcon(iconData: IconData, props?: IconProps): string`
+
+Renders an icon to an SVG string.
+
+#### Parameters
+
+- `iconData`: Icon data object containing SVG body and dimensions
+- `props`: Optional rendering options
+
+#### Icon Props
+
+```typescript
+interface IconProps {
+  size?: string | number          // Icon size (width and height)
+  width?: string | number          // Icon width
+  height?: string | number         // Icon height
+  color?: string                   // Icon color (default: 'currentColor')
+  hFlip?: boolean                  // Flip horizontally
+  vFlip?: boolean                  // Flip vertically
+  rotate?: 0 | 90 | 180 | 270     // Rotation in degrees
+  class?: string                   // Additional CSS classes
+  style?: string                   // Additional inline styles
+}
+```
+
+## Example
+
+```typescript
+import { home } from '@stacksjs/iconify-lucide'
+import { renderIcon } from '@stacksjs/iconify-core'
+
+// Basic usage
+const icon1 = renderIcon(home, { size: 24 })
+
+// With color
+const icon2 = renderIcon(home, { size: 24, color: '#ff0000' })
+
+// With transformations
+const icon3 = renderIcon(home, {
+  size: 24,
+  rotate: 90,
+  hFlip: true
+})
+
+// With custom classes and styles
+const icon4 = renderIcon(home, {
+  size: 24,
+  class: 'my-icon',
+  style: 'opacity: 0.8;'
+})
+```
+
+## License
+
+MIT

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@stacksjs/iconify-core",
+  "type": "module",
+  "version": "0.1.3",
+  "description": "Core utilities for Iconify SVG icons in stx",
+  "author": "Chris Breuer <chris@stacksjs.org>",
+  "license": "MIT",
+  "keywords": [
+    "iconify",
+    "icons",
+    "svg",
+    "stx",
+    "ui"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build": "bun build.ts",
+    "dev": "bun build.ts --watch"
+  }
+}

package/src/index.ts

@@ -0,0 +1,141 @@
+export interface IconProps {
+  /**
+   * Icon name
+   */
+  name?: string
+  /**
+   * Icon size (width and height)
+   * @default "1em"
+   */
+  size?: string | number
+  /**
+   * Icon width
+   */
+  width?: string | number
+  /**
+   * Icon height
+   */
+  height?: string | number
+  /**
+   * Icon color
+   * @default "currentColor"
+   */
+  color?: string
+  /**
+   * Horizontal flip
+   */
+  hFlip?: boolean
+  /**
+   * Vertical flip
+   */
+  vFlip?: boolean
+  /**
+   * Rotation in degrees
+   */
+  rotate?: 0 | 90 | 180 | 270 | 1 | 2 | 3
+  /**
+   * Additional CSS classes
+   */
+  class?: string
+  /**
+   * Additional inline styles
+   */
+  style?: string
+}
+
+export interface IconData {
+  /**
+   * Icon body (SVG path data)
+   */
+  body: string
+  /**
+   * Icon width (default: 24)
+   */
+  width?: number
+  /**
+   * Icon height (default: 24)
+   */
+  height?: number
+  /**
+   * Icon viewBox
+   */
+  viewBox?: string
+  /**
+   * Whether the icon uses currentColor
+   */
+  currentColor?: boolean
+}
+
+/**
+ * Generate SVG string from icon data
+ */
+export function renderIcon(iconData: IconData, props: IconProps = {}): string {
+  const {
+    size,
+    width: propWidth,
+    height: propHeight,
+    color = 'currentColor',
+    hFlip = false,
+    vFlip = false,
+    rotate = 0,
+    class: className = '',
+    style: customStyle = '',
+  } = props
+
+  const width = propWidth || size || iconData.width || 24
+  const height = propHeight || size || iconData.height || 24
+  const viewBox = iconData.viewBox || `0 0 ${iconData.width || 24} ${iconData.height || 24}`
+
+  // Build transform
+  const transforms: string[] = []
+  if (hFlip)
+    transforms.push('scaleX(-1)')
+  if (vFlip)
+    transforms.push('scaleY(-1)')
+  if (rotate) {
+    const deg = typeof rotate === 'number' && rotate < 4 ? rotate * 90 : rotate
+    transforms.push(`rotate(${deg}deg)`)
+  }
+
+  const transform = transforms.length > 0 ? transforms.join(' ') : ''
+  const transformStyle = transform ? `transform: ${transform};` : ''
+
+  // Build style
+  const styles: string[] = []
+  if (transformStyle)
+    styles.push(transformStyle)
+  if (customStyle)
+    styles.push(customStyle)
+
+  const style = styles.length > 0 ? ` style="${styles.join(' ')}"` : ''
+  const classAttr = className ? ` class="${className}"` : ''
+
+  // Replace currentColor in body if color is specified
+  let body = iconData.body
+  if (color && color !== 'currentColor') {
+    body = body.replace(/currentColor/g, color)
+  }
+
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="${viewBox}"${classAttr}${style}>${body}</svg>`
+}
+
+/**
+ * Generate icon component CSS
+ */
+export function generateIconCSS(prefix: string): string {
+  return `
+.icon-${prefix} {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.125em;
+}
+
+.icon-${prefix} svg {
+  width: 100%;
+  height: 100%;
+}
+`.trim()
+}
+
+export { type IconData as Icon }