vectify 2.0.0

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

@@ -0,0 +1,117 @@
+import { createElement, forwardRef } from 'react'
+import type { IconNode, IconProps } from 'vectify'
+import type { ReactNode, SVGProps } from 'react'
+
+export interface CreateIconProps extends IconProps, Omit<SVGProps<SVGSVGElement>, keyof IconProps> {
+  size?: number | string
+  color?: string
+  strokeWidth?: number | string
+  className?: string
+  title?: string
+  'aria-label'?: string
+  'aria-hidden'?: boolean | 'true' | 'false'
+}
+
+export function createIcon(name: string, iconNode: IconNode[], keepColors = false) {
+  const Icon = forwardRef<SVGSVGElement, CreateIconProps>(({
+    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 as any
+    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: IconNode[],
+  keepColors: boolean,
+  color: string,
+  strokeWidth: number | string
+): ReactNode {
+  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/solid/component.tsx.hbs

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

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

@@ -0,0 +1,127 @@
+import { splitProps } from 'solid-js'
+
+export function createIcon(name, iconNode, keepColors = false) {
+  return (props) => {
+    const [local, others] = splitProps(props, [
+      'size',
+      'color',
+      'strokeWidth',
+      'class',
+      'title',
+      'aria-label',
+      'aria-hidden'
+    ])
+
+    const size = () => local.size ?? 24
+    const color = () => local.color ?? 'currentColor'
+    const strokeWidth = () => local.strokeWidth ?? 2
+
+    // Determine if icon should be hidden from screen readers
+    const shouldHide = () => local['aria-hidden'] !== undefined
+      ? local['aria-hidden']
+      : (!local.title && !local['aria-label'])
+
+    const mergedClass = () => local.class ? `vectify-icon ${local.class}` : 'vectify-icon'
+
+    const renderIconNode = (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'
+        }
+      }
+
+      // Convert strokeWidth to stroke-width for SVG
+      if (cleanedAttrs.strokeWidth) {
+        cleanedAttrs['stroke-width'] = cleanedAttrs.strokeWidth
+        delete cleanedAttrs.strokeWidth
+      }
+      if (cleanedAttrs.strokeLinecap) {
+        cleanedAttrs['stroke-linecap'] = cleanedAttrs.strokeLinecap
+        delete cleanedAttrs.strokeLinecap
+      }
+      if (cleanedAttrs.strokeLinejoin) {
+        cleanedAttrs['stroke-linejoin'] = cleanedAttrs.strokeLinejoin
+        delete cleanedAttrs.strokeLinejoin
+      }
+
+      const childElements = children && children.length > 0
+        ? children.map((child, idx) => renderIconNode(child, idx))
+        : undefined
+
+      // Create SVG element using the type as tag name
+      switch (type) {
+        case 'path':
+          return <path {...cleanedAttrs}>{childElements}</path>
+        case 'circle':
+          return <circle {...cleanedAttrs}>{childElements}</circle>
+        case 'rect':
+          return <rect {...cleanedAttrs}>{childElements}</rect>
+        case 'line':
+          return <line {...cleanedAttrs}>{childElements}</line>
+        case 'polyline':
+          return <polyline {...cleanedAttrs}>{childElements}</polyline>
+        case 'polygon':
+          return <polygon {...cleanedAttrs}>{childElements}</polygon>
+        case 'ellipse':
+          return <ellipse {...cleanedAttrs}>{childElements}</ellipse>
+        case 'g':
+          return <g {...cleanedAttrs}>{childElements}</g>
+        default:
+          return <g {...cleanedAttrs}>{childElements}</g>
+      }
+    }
+
+    return (
+      <svg
+        width={size()}
+        height={size()}
+        viewBox="0 0 24 24"
+        aria-hidden={shouldHide()}
+        aria-label={local['aria-label']}
+        role={local.title || local['aria-label'] ? 'img' : undefined}
+        {...others}
+        class={mergedClass()}
+      >
+        {local.title && <title>{local.title}</title>}
+        {iconNode.map((node, index) => renderIconNode(node, index))}
+      </svg>
+    )
+  }
+}

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

@@ -0,0 +1,139 @@
+import { JSX, splitProps, createMemo } from 'solid-js'
+import type { IconNode } from 'vectify'
+
+export interface CreateIconProps {
+  size?: number | string
+  color?: string
+  strokeWidth?: number | string
+  class?: string
+  title?: string
+  'aria-label'?: string
+  'aria-hidden'?: boolean | 'true' | 'false'
+  [key: string]: any
+}
+
+export function createIcon(name: string, iconNode: IconNode[], keepColors = false) {
+  return (props: CreateIconProps): JSX.Element => {
+    const [local, others] = splitProps(props, [
+      'size',
+      'color',
+      'strokeWidth',
+      'class',
+      'title',
+      'aria-label',
+      'aria-hidden'
+    ])
+
+    const size = () => local.size ?? 24
+    const color = () => local.color ?? 'currentColor'
+    const strokeWidth = () => local.strokeWidth ?? 2
+
+    // Determine if icon should be hidden from screen readers
+    const shouldHide = () => local['aria-hidden'] !== undefined
+      ? local['aria-hidden']
+      : (!local.title && !local['aria-label'])
+
+    const mergedClass = () => local.class ? `vectify-icon ${local.class}` : 'vectify-icon'
+
+    const renderIconNode = (node: IconNode, index: number): JSX.Element => {
+      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'
+        }
+      }
+
+      // Convert strokeWidth to stroke-width for SVG
+      if (cleanedAttrs.strokeWidth) {
+        cleanedAttrs['stroke-width'] = cleanedAttrs.strokeWidth
+        delete cleanedAttrs.strokeWidth
+      }
+      if (cleanedAttrs.strokeLinecap) {
+        cleanedAttrs['stroke-linecap'] = cleanedAttrs.strokeLinecap
+        delete cleanedAttrs.strokeLinecap
+      }
+      if (cleanedAttrs.strokeLinejoin) {
+        cleanedAttrs['stroke-linejoin'] = cleanedAttrs.strokeLinejoin
+        delete cleanedAttrs.strokeLinejoin
+      }
+
+      const childElements = children && children.length > 0
+        ? children.map((child, idx) => renderIconNode(child, idx))
+        : undefined
+
+      // Create SVG element using the type as tag name
+      switch (type) {
+        case 'path':
+          return <path {...cleanedAttrs}>{childElements}</path>
+        case 'circle':
+          return <circle {...cleanedAttrs}>{childElements}</circle>
+        case 'rect':
+          return <rect {...cleanedAttrs}>{childElements}</rect>
+        case 'line':
+          return <line {...cleanedAttrs}>{childElements}</line>
+        case 'polyline':
+          return <polyline {...cleanedAttrs}>{childElements}</polyline>
+        case 'polygon':
+          return <polygon {...cleanedAttrs}>{childElements}</polygon>
+        case 'ellipse':
+          return <ellipse {...cleanedAttrs}>{childElements}</ellipse>
+        case 'g':
+          return <g {...cleanedAttrs}>{childElements}</g>
+        default:
+          return <g {...cleanedAttrs}>{childElements}</g>
+      }
+    }
+
+    return (
+      <svg
+        width={size()}
+        height={size()}
+        viewBox="0 0 24 24"
+        aria-hidden={shouldHide()}
+        aria-label={local['aria-label']}
+        role={local.title || local['aria-label'] ? 'img' : undefined}
+        {...others}
+        class={mergedClass()}
+      >
+        {local.title && <title>{local.title}</title>}
+        {iconNode.map((node, index) => renderIconNode(node, index))}
+      </svg>
+    )
+  }
+}

package/dist/templates/svelte/component.js.svelte.hbs

@@ -0,0 +1,9 @@
+<script>
+  import Icon from './Icon.svelte'
+
+  const iconNode = [
+{{{formattedNodes}}}
+  ]
+</script>
+
+<Icon {iconNode} {...$$restProps} />

package/dist/templates/svelte/component.ts.svelte.hbs

@@ -0,0 +1,10 @@
+<script lang="ts">
+  import Icon from './Icon.svelte'
+  import type { IconNode } from 'vectify'
+
+  const iconNode: IconNode[] = [
+{{{formattedNodes}}}
+  ]
+</script>
+
+<Icon {iconNode} {...$$restProps} />

package/dist/templates/svelte/icon.js.svelte.hbs

@@ -0,0 +1,123 @@
+<script>
+  import { onMount } from 'svelte'
+
+  export let iconNode
+  export let size = 24
+  export let color = 'currentColor'
+  export let strokeWidth = 2
+  export let className = ''
+  export let title = ''
+  export let ariaLabel = ''
+  export let ariaHidden = undefined
+  export let keepColors = false
+
+  let svgElement
+
+  // Merge className with default class
+  $: mergedClass = className ? `vectify-icon ${className}` : 'vectify-icon'
+
+  // Determine if icon should be hidden from screen readers
+  $: shouldHide = ariaHidden !== undefined ? ariaHidden : (!title && !ariaLabel)
+
+  // Clean icon node to apply color
+  $: cleanedIconNode = keepColors ? iconNode : cleanIconNodes(iconNode, color, strokeWidth)
+
+  function cleanIconNodes(nodes, color, strokeWidth) {
+    return nodes.map(node => {
+      const [type, attrs, children] = node
+
+      // Keep non-color attributes and determine if we need fill or stroke
+      const cleanedAttrs = {}
+      let hasFill = false
+      let hasStroke = false
+      let originalStrokeWidth
+
+      Object.entries(attrs).forEach(([key, value]) => {
+        // Track color attributes
+        if (key === 'fill') {
+          if (value !== 'none') {
+            hasFill = true
+          }
+        }
+        if (key === 'stroke') {
+          hasStroke = true
+        }
+        if (key === 'strokeWidth' || key === 'stroke-width') {
+          originalStrokeWidth = value
+        }
+
+        // Keep non-color attributes
+        if (!['stroke', 'fill', 'strokeWidth', 'stroke-width'].includes(key)) {
+          cleanedAttrs[key] = value
+        }
+      })
+
+      // Apply color based on original attributes
+      if (hasFill) {
+        cleanedAttrs.fill = color
+      } else if (hasStroke) {
+        // Stroke-based icon: set fill to none to prevent default black fill
+        cleanedAttrs.fill = 'none'
+        cleanedAttrs.stroke = color
+        cleanedAttrs.strokeWidth = originalStrokeWidth ?? strokeWidth
+        cleanedAttrs.strokeLinecap = 'round'
+        cleanedAttrs.strokeLinejoin = 'round'
+      }
+
+      const cleanedChildren = children ? cleanIconNodes(children, color, strokeWidth) : undefined
+
+      return cleanedChildren ? [type, cleanedAttrs, cleanedChildren] : [type, cleanedAttrs]
+    })
+  }
+
+  function renderNode(node) {
+    const [type, attrs, children] = node
+    const element = document.createElementNS('http://www.w3.org/2000/svg', type)
+
+    // Set attributes
+    Object.entries(attrs).forEach(([key, value]) => {
+      element.setAttribute(key, String(value))
+    })
+
+    // Render children
+    if (children && children.length > 0) {
+      children.forEach(child => {
+        element.appendChild(renderNode(child))
+      })
+    }
+
+    return element
+  }
+
+  onMount(() => {
+    // Clear existing content (except title if present)
+    while (svgElement.firstChild) {
+      if (svgElement.firstChild.nodeName !== 'title') {
+        svgElement.removeChild(svgElement.firstChild)
+      } else {
+        break
+      }
+    }
+
+    // Render icon nodes after title
+    cleanedIconNode.forEach(node => {
+      svgElement.appendChild(renderNode(node))
+    })
+  })
+</script>
+
+<svg
+  bind:this={svgElement}
+  width={size}
+  height={size}
+  viewBox="0 0 24 24"
+  aria-hidden={shouldHide}
+  aria-label={ariaLabel || undefined}
+  role={title || ariaLabel ? 'img' : undefined}
+  {...$$restProps}
+  class={mergedClass}
+>
+  {#if title}
+    <title>{title}</title>
+  {/if}
+</svg>

package/dist/templates/svelte/icon.ts.svelte.hbs

@@ -0,0 +1,124 @@
+<script lang="ts">
+  import { onMount } from 'svelte'
+  import type { IconNode } from 'vectify'
+
+  export let iconNode: IconNode[]
+  export let size: number | string = 24
+  export let color: string = 'currentColor'
+  export let strokeWidth: number | string = 2
+  export let className: string = ''
+  export let title: string = ''
+  export let ariaLabel: string = ''
+  export let ariaHidden: boolean | 'true' | 'false' | undefined = undefined
+  export let keepColors: boolean = false
+
+  let svgElement: SVGSVGElement
+
+  // Merge className with default class
+  $: mergedClass = className ? `vectify-icon ${className}` : 'vectify-icon'
+
+  // Determine if icon should be hidden from screen readers
+  $: shouldHide = ariaHidden !== undefined ? ariaHidden : (!title && !ariaLabel)
+
+  // Clean icon node to apply color
+  $: cleanedIconNode = keepColors ? iconNode : cleanIconNodes(iconNode, color, strokeWidth)
+
+  function cleanIconNodes(nodes: IconNode[], color: string, strokeWidth: number | string): IconNode[] {
+    return nodes.map(node => {
+      const [type, attrs, children] = node
+
+      // Keep non-color attributes and determine if we need fill or stroke
+      const cleanedAttrs: Record<string, any> = {}
+      let hasFill = false
+      let hasStroke = false
+      let originalStrokeWidth: number | string | undefined
+
+      Object.entries(attrs).forEach(([key, value]) => {
+        // Track color attributes
+        if (key === 'fill') {
+          if (value !== 'none') {
+            hasFill = true
+          }
+        }
+        if (key === 'stroke') {
+          hasStroke = true
+        }
+        if (key === 'strokeWidth' || key === 'stroke-width') {
+          originalStrokeWidth = value
+        }
+
+        // Keep non-color attributes
+        if (!['stroke', 'fill', 'strokeWidth', 'stroke-width'].includes(key)) {
+          cleanedAttrs[key] = value
+        }
+      })
+
+      // Apply color based on original attributes
+      if (hasFill) {
+        cleanedAttrs.fill = color
+      } else if (hasStroke) {
+        // Stroke-based icon: set fill to none to prevent default black fill
+        cleanedAttrs.fill = 'none'
+        cleanedAttrs.stroke = color
+        cleanedAttrs.strokeWidth = originalStrokeWidth ?? strokeWidth
+        cleanedAttrs.strokeLinecap = 'round'
+        cleanedAttrs.strokeLinejoin = 'round'
+      }
+
+      const cleanedChildren = children ? cleanIconNodes(children, color, strokeWidth) : undefined
+
+      return cleanedChildren ? [type, cleanedAttrs, cleanedChildren] : [type, cleanedAttrs]
+    }) as IconNode[]
+  }
+
+  function renderNode(node: IconNode): SVGElement {
+    const [type, attrs, children] = node
+    const element = document.createElementNS('http://www.w3.org/2000/svg', type)
+
+    // Set attributes
+    Object.entries(attrs).forEach(([key, value]) => {
+      element.setAttribute(key, String(value))
+    })
+
+    // Render children
+    if (children && children.length > 0) {
+      children.forEach(child => {
+        element.appendChild(renderNode(child))
+      })
+    }
+
+    return element
+  }
+
+  onMount(() => {
+    // Clear existing content (except title if present)
+    while (svgElement.firstChild) {
+      if (svgElement.firstChild.nodeName !== 'title') {
+        svgElement.removeChild(svgElement.firstChild)
+      } else {
+        break
+      }
+    }
+
+    // Render icon nodes after title
+    cleanedIconNode.forEach(node => {
+      svgElement.appendChild(renderNode(node))
+    })
+  })
+</script>
+
+<svg
+  bind:this={svgElement}
+  width={size}
+  height={size}
+  viewBox="0 0 24 24"
+  aria-hidden={shouldHide}
+  aria-label={ariaLabel || undefined}
+  role={title || ariaLabel ? 'img' : undefined}
+  {...$$restProps}
+  class={mergedClass}
+>
+  {#if title}
+    <title>{title}</title>
+  {/if}
+</svg>