vectify 2.0.0

package/dist/templates/lit/createIcon.ts.hbs

@@ -0,0 +1,99 @@
+import { LitElement, html, css, svg } from 'lit'
+import { property } from 'lit/decorators.js'
+import type { IconNode } from 'vectify'
+
+export interface IconOptions {
+  size?: number | string
+  color?: string
+  strokeWidth?: number | string
+  title?: string
+  ariaLabel?: string
+  ariaHidden?: boolean
+}
+
+export abstract class IconBase extends LitElement {
+  @property({ type: Number }) size = 24
+  @property({ type: String }) color = 'currentColor'
+  @property({ type: Number }) strokeWidth = 2
+  @property({ type: String }) title = ''
+  @property({ type: String }) ariaLabel = ''
+  @property({ type: Boolean }) ariaHidden = false
+
+  abstract iconNode: IconNode[]
+  abstract keepColors: boolean
+
+  static styles = css`
+    :host {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+    }
+  `
+
+  private renderNode(node: IconNode): any {
+    const [type, attrs, children] = node
+    let cleanedAttrs: Record<string, any>
+
+    if (this.keepColors) {
+      cleanedAttrs = attrs
+    } else {
+      // Track color attributes
+      let hasFill = false
+      let hasStroke = false
+      let originalStrokeWidth: number | string | undefined
+
+      if (attrs.fill && attrs.fill !== 'none') {
+        hasFill = true
+      }
+      if (attrs.stroke) {
+        hasStroke = true
+      }
+      if (attrs.strokeWidth || attrs['stroke-width']) {
+        originalStrokeWidth = attrs.strokeWidth || attrs['stroke-width']
+      }
+
+      // Keep non-color attributes
+      cleanedAttrs = Object.fromEntries(
+        Object.entries(attrs).filter(([key]) =>
+          !['stroke', 'fill', 'strokeWidth', 'stroke-width'].includes(key)
+        )
+      )
+
+      // Apply color
+      if (hasFill) {
+        cleanedAttrs.fill = this.color
+      } else if (hasStroke) {
+        cleanedAttrs.fill = 'none'
+        cleanedAttrs.stroke = this.color
+        cleanedAttrs['stroke-width'] = originalStrokeWidth ?? this.strokeWidth
+        cleanedAttrs['stroke-linecap'] = 'round'
+        cleanedAttrs['stroke-linejoin'] = 'round'
+      }
+    }
+
+    const childNodes = children && children.length > 0
+      ? children.map(child => this.renderNode(child))
+      : []
+
+    return svg`<${type} ...${cleanedAttrs}>${childNodes}</${type}>`
+  }
+
+  render() {
+    const shouldHide = this.ariaHidden !== undefined ? this.ariaHidden : (!this.title && !this.ariaLabel)
+
+    return html`
+      <svg
+        width="${this.size}"
+        height="${this.size}"
+        viewBox="0 0 24 24"
+        class="vectify-icon"
+        aria-hidden="${shouldHide}"
+        aria-label="${this.ariaLabel || undefined}"
+        role="${this.title || this.ariaLabel ? 'img' : undefined}"
+      >
+        ${this.title ? svg`<title>${this.title}</title>` : ''}
+        ${this.iconNode.map(node => this.renderNode(node))}
+      </svg>
+    `
+  }
+}

package/dist/templates/preact/component.jsx.hbs

@@ -0,0 +1,8 @@
+import { createIcon } from './createIcon'
+
+export const iconNode = [
+{{{formattedNodes}}}
+]
+
+const {{componentName}} = createIcon('{{componentName}}', iconNode, {{keepColors}})
+export default {{componentName}}

package/dist/templates/preact/component.tsx.hbs

@@ -0,0 +1,11 @@
+{{#if typescript}}
+import type { IconNode } from 'vectify'
+{{/if}}
+import { createIcon } from './createIcon'
+
+export const iconNode{{#if typescript}}: IconNode[]{{/if}} = [
+{{{formattedNodes}}}
+]
+
+const {{componentName}} = createIcon('{{componentName}}', iconNode, {{keepColors}})
+export default {{componentName}}

package/dist/templates/preact/createIcon.jsx.hbs

@@ -0,0 +1,101 @@
+import { createElement } from 'preact'
+
+export function createIcon(name, iconNode, keepColors = false) {
+  const Icon = ({
+    size = 24,
+    color = 'currentColor',
+    strokeWidth = 2,
+    class: classAttr,
+    className,
+    title,
+    'aria-label': ariaLabel,
+    'aria-hidden': ariaHidden,
+    ref,
+    ...props
+  }) => {
+    // Determine if icon should be hidden from screen readers
+    const shouldHide = ariaHidden !== undefined ? ariaHidden : (!title && !ariaLabel)
+
+    const allClassNames = [classAttr, className].filter(Boolean).join(' ')
+    const mergedClassName = allClassNames ? `vectify-icon ${allClassNames}` : 'vectify-icon'
+
+    return (
+      <svg
+        ref={ref}
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        aria-hidden={shouldHide}
+        aria-label={ariaLabel}
+        role={title || ariaLabel ? 'img' : undefined}
+        {...props}
+        class={mergedClassName}
+      >
+        {title && <title>{title}</title>}
+        {renderIconNode(iconNode, keepColors, color, strokeWidth)}
+      </svg>
+    )
+  }
+
+  Icon.displayName = name
+  return Icon
+}
+
+function renderIconNode(nodes, keepColors, color, strokeWidth) {
+  return nodes.map((node, index) => {
+    const [type, attrs, children] = node
+
+    let cleanedAttrs
+
+    if (keepColors) {
+      cleanedAttrs = attrs
+    } else {
+      // Track color attributes to determine icon type
+      let hasFill = false
+      let hasStroke = false
+      let originalStrokeWidth
+
+      Object.entries(attrs).forEach(([key, value]) => {
+        if (key === 'fill' && value !== 'none') {
+          hasFill = true
+        }
+        if (key === 'stroke') {
+          hasStroke = true
+        }
+        if (key === 'strokeWidth' || key === 'stroke-width') {
+          originalStrokeWidth = value
+        }
+      })
+
+      // Keep non-color attributes
+      cleanedAttrs = Object.fromEntries(
+        Object.entries(attrs).filter(([key]) =>
+          !['stroke', 'fill', 'strokeWidth', 'stroke-width'].includes(key)
+        )
+      )
+
+      // Apply color based on original attributes
+      if (hasFill) {
+        cleanedAttrs.fill = color
+      } else if (hasStroke) {
+        cleanedAttrs.fill = 'none'
+        cleanedAttrs.stroke = color
+        cleanedAttrs.strokeWidth = originalStrokeWidth ?? strokeWidth
+        cleanedAttrs.strokeLinecap = 'round'
+        cleanedAttrs.strokeLinejoin = 'round'
+      }
+    }
+
+    const props = { key: index, ...cleanedAttrs }
+
+    if (children && children.length > 0) {
+      return createElement(
+        type,
+        props,
+        renderIconNode(children, keepColors, color, strokeWidth)
+      )
+    }
+
+    return createElement(type, props)
+  })
+}

package/dist/templates/preact/createIcon.tsx.hbs

@@ -0,0 +1,121 @@
+import { createElement } from 'preact'
+import type { IconNode, IconProps } from 'vectify'
+import type { JSX } from 'preact'
+
+export interface CreateIconProps extends IconProps {
+  size?: number | string
+  color?: string
+  strokeWidth?: number | string
+  class?: string
+  className?: string
+  title?: string
+  'aria-label'?: string
+  'aria-hidden'?: boolean | 'true' | 'false'
+  ref?: any
+  [key: string]: any
+}
+
+export function createIcon(name: string, iconNode: IconNode[], keepColors = false) {
+  const Icon = ({
+    size = 24,
+    color = 'currentColor',
+    strokeWidth = 2,
+    class: classAttr,
+    className,
+    title,
+    'aria-label': ariaLabel,
+    'aria-hidden': ariaHidden,
+    ref,
+    ...props
+  }: CreateIconProps) => {
+    // Determine if icon should be hidden from screen readers
+    const shouldHide = ariaHidden !== undefined ? ariaHidden : (!title && !ariaLabel)
+
+    const allClassNames = [classAttr, className].filter(Boolean).join(' ')
+    const mergedClassName = allClassNames ? `vectify-icon ${allClassNames}` : 'vectify-icon'
+
+    return (
+      <svg
+        ref={ref}
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        aria-hidden={shouldHide}
+        aria-label={ariaLabel}
+        role={title || ariaLabel ? 'img' : undefined}
+        {...props}
+        class={mergedClassName}
+      >
+        {title && <title>{title}</title>}
+        {renderIconNode(iconNode, keepColors, color, strokeWidth)}
+      </svg>
+    )
+  }
+
+  Icon.displayName = name
+  return Icon
+}
+
+function renderIconNode(
+  nodes: IconNode[],
+  keepColors: boolean,
+  color: string,
+  strokeWidth: number | string
+): JSX.Element[] {
+  return nodes.map((node, index) => {
+    const [type, attrs, children] = node
+
+    let cleanedAttrs: Record<string, any>
+
+    if (keepColors) {
+      cleanedAttrs = attrs
+    } else {
+      // Track color attributes to determine icon type
+      let hasFill = false
+      let hasStroke = false
+      let originalStrokeWidth: number | string | undefined
+
+      Object.entries(attrs).forEach(([key, value]) => {
+        if (key === 'fill' && value !== 'none') {
+          hasFill = true
+        }
+        if (key === 'stroke') {
+          hasStroke = true
+        }
+        if (key === 'strokeWidth' || key === 'stroke-width') {
+          originalStrokeWidth = value
+        }
+      })
+
+      // Keep non-color attributes
+      cleanedAttrs = Object.fromEntries(
+        Object.entries(attrs).filter(([key]) =>
+          !['stroke', 'fill', 'strokeWidth', 'stroke-width'].includes(key)
+        )
+      )
+
+      // Apply color based on original attributes
+      if (hasFill) {
+        cleanedAttrs.fill = color
+      } else if (hasStroke) {
+        cleanedAttrs.fill = 'none'
+        cleanedAttrs.stroke = color
+        cleanedAttrs.strokeWidth = originalStrokeWidth ?? strokeWidth
+        cleanedAttrs.strokeLinecap = 'round'
+        cleanedAttrs.strokeLinejoin = 'round'
+      }
+    }
+
+    const props = { key: index, ...cleanedAttrs }
+
+    if (children && children.length > 0) {
+      return createElement(
+        type,
+        props,
+        renderIconNode(children, keepColors, color, strokeWidth)
+      )
+    }
+
+    return createElement(type, props)
+  })
+}

package/dist/templates/qwik/component.jsx.hbs

@@ -0,0 +1,7 @@
+import { createIcon } from './createIcon'
+
+export const iconNode = [
+{{{formattedNodes}}}
+]
+
+export const {{componentName}} = createIcon('{{componentName}}', iconNode, {{keepColors}})

package/dist/templates/qwik/component.tsx.hbs

@@ -0,0 +1,8 @@
+import { createIcon } from './createIcon'
+import type { IconNode } from 'vectify'
+
+export const iconNode: IconNode[] = [
+{{{formattedNodes}}}
+]
+
+export const {{componentName}} = createIcon('{{componentName}}', iconNode, {{keepColors}})

package/dist/templates/qwik/createIcon.jsx.hbs

@@ -0,0 +1,100 @@
+import { component$ } from '@builder.io/qwik'
+
+export function createIcon(name, iconNode, keepColors = false) {
+  return component$(({
+    size = 24,
+    color = 'currentColor',
+    strokeWidth = 2,
+    class: className,
+    title,
+    'aria-label': ariaLabel,
+    'aria-hidden': ariaHidden,
+    ...props
+  }) => {
+    // Determine if icon should be hidden from screen readers
+    const shouldHide = ariaHidden !== undefined ? ariaHidden : (!title && !ariaLabel)
+
+    const mergedClassName = className ? `vectify-icon ${className}` : 'vectify-icon'
+
+    return (
+      <svg
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        aria-hidden={shouldHide}
+        aria-label={ariaLabel}
+        role={title || ariaLabel ? 'img' : undefined}
+        {...props}
+        class={mergedClassName}
+      >
+        {title && <title>{title}</title>}
+        {renderIconNode(iconNode, keepColors, color, strokeWidth)}
+      </svg>
+    )
+  })
+}
+
+function renderIconNode(
+  nodes,
+  keepColors,
+  color,
+  strokeWidth
+) {
+  return nodes.map((node, index) => {
+    const [type, attrs, children] = node
+
+    let cleanedAttrs
+
+    if (keepColors) {
+      cleanedAttrs = attrs
+    } else {
+      // Track color attributes to determine icon type
+      let hasFill = false
+      let hasStroke = false
+      let originalStrokeWidth
+
+      Object.entries(attrs).forEach(([key, value]) => {
+        if (key === 'fill' && value !== 'none') {
+          hasFill = true
+        }
+        if (key === 'stroke') {
+          hasStroke = true
+        }
+        if (key === 'strokeWidth' || key === 'stroke-width') {
+          originalStrokeWidth = value
+        }
+      })
+
+      // Keep non-color attributes
+      cleanedAttrs = Object.fromEntries(
+        Object.entries(attrs).filter(([key]) =>
+          !['stroke', 'fill', 'strokeWidth', 'stroke-width'].includes(key)
+        )
+      )
+
+      // Apply color based on original attributes
+      if (hasFill) {
+        cleanedAttrs.fill = color
+      } else if (hasStroke) {
+        cleanedAttrs.fill = 'none'
+        cleanedAttrs.stroke = color
+        cleanedAttrs.strokeWidth = originalStrokeWidth ?? strokeWidth
+        cleanedAttrs.strokeLinecap = 'round'
+        cleanedAttrs.strokeLinejoin = 'round'
+      }
+    }
+
+    const props = { key: index, ...cleanedAttrs }
+    const Element = type
+
+    if (children && children.length > 0) {
+      return (
+        <Element {...props}>
+          {renderIconNode(children, keepColors, color, strokeWidth)}
+        </Element>
+      )
+    }
+
+    return <Element {...props} />
+  })
+}

package/dist/templates/qwik/createIcon.tsx.hbs

@@ -0,0 +1,111 @@
+import { component$, type QwikIntrinsicElements } from '@builder.io/qwik'
+import type { IconNode, IconProps } from 'vectify'
+
+export interface CreateIconProps extends IconProps, Omit<QwikIntrinsicElements['svg'], keyof IconProps> {
+  size?: number | string
+  color?: string
+  strokeWidth?: number | string
+  class?: string
+  title?: string
+  'aria-label'?: string
+  'aria-hidden'?: boolean | 'true' | 'false'
+}
+
+export function createIcon(name: string, iconNode: IconNode[], keepColors = false) {
+  return component$<CreateIconProps>(({
+    size = 24,
+    color = 'currentColor',
+    strokeWidth = 2,
+    class: className,
+    title,
+    'aria-label': ariaLabel,
+    'aria-hidden': ariaHidden,
+    ...props
+  }) => {
+    // Determine if icon should be hidden from screen readers
+    const shouldHide = ariaHidden !== undefined ? ariaHidden : (!title && !ariaLabel)
+
+    const mergedClassName = className ? `vectify-icon ${className}` : 'vectify-icon'
+
+    return (
+      <svg
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        aria-hidden={shouldHide}
+        aria-label={ariaLabel}
+        role={title || ariaLabel ? 'img' : undefined}
+        {...props}
+        class={mergedClassName}
+      >
+        {title && <title>{title}</title>}
+        {renderIconNode(iconNode, keepColors, color, strokeWidth)}
+      </svg>
+    )
+  })
+}
+
+function renderIconNode(
+  nodes: IconNode[],
+  keepColors: boolean,
+  color: string,
+  strokeWidth: number | string
+): any {
+  return nodes.map((node, index) => {
+    const [type, attrs, children] = node
+
+    let cleanedAttrs: Record<string, any>
+
+    if (keepColors) {
+      cleanedAttrs = attrs
+    } else {
+      // Track color attributes to determine icon type
+      let hasFill = false
+      let hasStroke = false
+      let originalStrokeWidth: number | string | undefined
+
+      Object.entries(attrs).forEach(([key, value]) => {
+        if (key === 'fill' && value !== 'none') {
+          hasFill = true
+        }
+        if (key === 'stroke') {
+          hasStroke = true
+        }
+        if (key === 'strokeWidth' || key === 'stroke-width') {
+          originalStrokeWidth = value
+        }
+      })
+
+      // Keep non-color attributes
+      cleanedAttrs = Object.fromEntries(
+        Object.entries(attrs).filter(([key]) =>
+          !['stroke', 'fill', 'strokeWidth', 'stroke-width'].includes(key)
+        )
+      )
+
+      // Apply color based on original attributes
+      if (hasFill) {
+        cleanedAttrs.fill = color
+      } else if (hasStroke) {
+        cleanedAttrs.fill = 'none'
+        cleanedAttrs.stroke = color
+        cleanedAttrs.strokeWidth = originalStrokeWidth ?? strokeWidth
+        cleanedAttrs.strokeLinecap = 'round'
+        cleanedAttrs.strokeLinejoin = 'round'
+      }
+    }
+
+    const props = { key: index, ...cleanedAttrs }
+    const Element = type as any
+
+    if (children && children.length > 0) {
+      return (
+        <Element {...props}>
+          {renderIconNode(children, keepColors, color, strokeWidth)}
+        </Element>
+      )
+    }
+
+    return <Element {...props} />
+  })
+}

package/dist/templates/react/component.jsx.hbs

@@ -0,0 +1,8 @@
+import { createIcon } from './createIcon'
+
+export const iconNode = [
+{{{formattedNodes}}}
+]
+
+const {{componentName}} = createIcon('{{componentName}}', iconNode, {{keepColors}})
+export default {{componentName}}

package/dist/templates/react/component.tsx.hbs

@@ -0,0 +1,11 @@
+{{#if typescript}}
+import type { IconNode } from 'vectify'
+{{/if}}
+import { createIcon } from './createIcon'
+
+export const iconNode{{#if typescript}}: IconNode[]{{/if}} = [
+{{{formattedNodes}}}
+]
+
+const {{componentName}} = createIcon('{{componentName}}', iconNode, {{keepColors}})
+export default {{componentName}}

package/dist/templates/react/createIcon.jsx.hbs

@@ -0,0 +1,100 @@
+import { createElement, forwardRef } from 'react'
+
+export function createIcon(name, iconNode, keepColors = false) {
+  const Icon = forwardRef(({
+    size = 24,
+    color = 'currentColor',
+    strokeWidth = 2,
+    className,
+    title,
+    'aria-label': ariaLabel,
+    'aria-hidden': ariaHidden,
+    ...props
+  }, ref) => {
+    // Determine if icon should be hidden from screen readers
+    const shouldHide = ariaHidden !== undefined ? ariaHidden : (!title && !ariaLabel)
+
+    const { className: propsClassName, ...restProps } = props
+    const allClassNames = [className, propsClassName].filter(Boolean).join(' ')
+    const mergedClassName = allClassNames ? `vectify-icon ${allClassNames}` : 'vectify-icon'
+
+    return (
+      <svg
+        ref={ref}
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        aria-hidden={shouldHide}
+        aria-label={ariaLabel}
+        role={title || ariaLabel ? 'img' : undefined}
+        {...restProps}
+        className={mergedClassName}
+      >
+        {title && <title>{title}</title>}
+        {renderIconNode(iconNode, keepColors, color, strokeWidth)}
+      </svg>
+    )
+  })
+
+  Icon.displayName = name
+  return Icon
+}
+
+function renderIconNode(nodes, keepColors, color, strokeWidth) {
+  return nodes.map((node, index) => {
+    const [type, attrs, children] = node
+
+    let cleanedAttrs
+
+    if (keepColors) {
+      cleanedAttrs = attrs
+    } else {
+      // Track color attributes to determine icon type
+      let hasFill = false
+      let hasStroke = false
+      let originalStrokeWidth
+
+      Object.entries(attrs).forEach(([key, value]) => {
+        if (key === 'fill' && value !== 'none') {
+          hasFill = true
+        }
+        if (key === 'stroke') {
+          hasStroke = true
+        }
+        if (key === 'strokeWidth' || key === 'stroke-width') {
+          originalStrokeWidth = value
+        }
+      })
+
+      // Keep non-color attributes
+      cleanedAttrs = Object.fromEntries(
+        Object.entries(attrs).filter(([key]) =>
+          !['stroke', 'fill', 'strokeWidth', 'stroke-width'].includes(key)
+        )
+      )
+
+      // Apply color based on original attributes
+      if (hasFill) {
+        cleanedAttrs.fill = color
+      } else if (hasStroke) {
+        cleanedAttrs.fill = 'none'
+        cleanedAttrs.stroke = color
+        cleanedAttrs.strokeWidth = originalStrokeWidth ?? strokeWidth
+        cleanedAttrs.strokeLinecap = 'round'
+        cleanedAttrs.strokeLinejoin = 'round'
+      }
+    }
+
+    const props = { key: index, ...cleanedAttrs }
+
+    if (children && children.length > 0) {
+      return createElement(
+        type,
+        props,
+        renderIconNode(children, keepColors, color, strokeWidth)
+      )
+    }
+
+    return createElement(type, props)
+  })
+}