vectify 2.0.0

package/dist/index.mjs

@@ -0,0 +1,27 @@
+import {
+  findConfig,
+  frameworkRegistry,
+  generate,
+  generateIcons,
+  getFrameworkStrategy,
+  init,
+  loadConfig,
+  watch
+} from "./chunk-4BWKFV7W.mjs";
+import "./chunk-CIKTK6HI.mjs";
+
+// src/types.ts
+function defineConfig(config) {
+  return config;
+}
+export {
+  defineConfig,
+  findConfig,
+  frameworkRegistry,
+  generate,
+  generateIcons,
+  getFrameworkStrategy,
+  init,
+  loadConfig,
+  watch
+};

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

@@ -0,0 +1,121 @@
+import { Component, Input } from '@angular/core'
+import { CommonModule } from '@angular/common'
+import type { IconNode } from 'vectify'
+
+const iconNode: IconNode[] = [
+{{{formattedNodes}}}
+]
+
+@Component({
+  selector: '{{componentName}}',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <svg
+      [attr.width]="size"
+      [attr.height]="size"
+      viewBox="0 0 24 24"
+      [attr.aria-hidden]="shouldHide"
+      [attr.aria-label]="ariaLabel"
+      [attr.role]="title || ariaLabel ? 'img' : null"
+      [attr.class]="mergedClassName"
+    >
+      <title *ngIf="title">{{ title }}</title>
+      <ng-container *ngFor="let node of processedNodes">
+        <ng-container [ngSwitch]="node.type">
+          <path *ngSwitchCase="'path'" [attr.d]="node.attrs.d" [ngStyle]="node.attrs"></path>
+          <circle *ngSwitchCase="'circle'" [attr.cx]="node.attrs.cx" [attr.cy]="node.attrs.cy" [attr.r]="node.attrs.r" [ngStyle]="node.attrs"></circle>
+          <rect *ngSwitchCase="'rect'" [attr.x]="node.attrs.x" [attr.y]="node.attrs.y" [attr.width]="node.attrs.width" [attr.height]="node.attrs.height" [ngStyle]="node.attrs"></rect>
+          <line *ngSwitchCase="'line'" [attr.x1]="node.attrs.x1" [attr.y1]="node.attrs.y1" [attr.x2]="node.attrs.x2" [attr.y2]="node.attrs.y2" [ngStyle]="node.attrs"></line>
+          <polyline *ngSwitchCase="'polyline'" [attr.points]="node.attrs.points" [ngStyle]="node.attrs"></polyline>
+          <polygon *ngSwitchCase="'polygon'" [attr.points]="node.attrs.points" [ngStyle]="node.attrs"></polygon>
+          <ellipse *ngSwitchCase="'ellipse'" [attr.cx]="node.attrs.cx" [attr.cy]="node.attrs.cy" [attr.rx]="node.attrs.rx" [attr.ry]="node.attrs.ry" [ngStyle]="node.attrs"></ellipse>
+          <g *ngSwitchDefault [ngStyle]="node.attrs">
+            <ng-container *ngFor="let child of node.children">
+              <ng-container [ngSwitch]="child.type">
+                <path *ngSwitchCase="'path'" [attr.d]="child.attrs.d" [ngStyle]="child.attrs"></path>
+                <circle *ngSwitchCase="'circle'" [attr.cx]="child.attrs.cx" [attr.cy]="child.attrs.cy" [attr.r]="child.attrs.r" [ngStyle]="child.attrs"></circle>
+                <rect *ngSwitchCase="'rect'" [attr.x]="child.attrs.x" [attr.y]="child.attrs.y" [attr.width]="child.attrs.width" [attr.height]="child.attrs.height" [ngStyle]="child.attrs"></rect>
+              </ng-container>
+            </ng-container>
+          </g>
+        </ng-container>
+      </ng-container>
+    </svg>
+  `
+})
+export class {{componentName}}Component {
+  @Input() size: number | string = 24
+  @Input() color: string = 'currentColor'
+  @Input() strokeWidth: number | string = 2
+  @Input() className?: string
+  @Input() title?: string
+  @Input() ariaLabel?: string
+  @Input() ariaHidden?: boolean
+
+  private iconNode: IconNode[] = iconNode
+  private keepColors: boolean = {{keepColors}}
+
+  get shouldHide(): boolean {
+    return this.ariaHidden !== undefined ? this.ariaHidden : (!this.title && !this.ariaLabel)
+  }
+
+  get mergedClassName(): string {
+    return this.className ? `vectify-icon ${this.className}` : 'vectify-icon'
+  }
+
+  get processedNodes(): any[] {
+    return this.iconNode.map(node => this.renderNode(node))
+  }
+
+  private renderNode(node: IconNode): any {
+    const [type, attrs, children] = node
+
+    let cleanedAttrs: Record<string, any>
+
+    if (this.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 = 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'
+      }
+    }
+
+    return {
+      type,
+      attrs: cleanedAttrs,
+      children: children && children.length > 0 ? children.map(c => this.renderNode(c)) : []
+    }
+  }
+}

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

@@ -0,0 +1,116 @@
+import { Component, Input } from '@angular/core'
+import { CommonModule } from '@angular/common'
+import type { IconNode } from 'vectify'
+
+@Component({
+  selector: 'vectify-icon-base',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <svg
+      [attr.width]="size"
+      [attr.height]="size"
+      viewBox="0 0 24 24"
+      [attr.aria-hidden]="shouldHide"
+      [attr.aria-label]="ariaLabel"
+      [attr.role]="title || ariaLabel ? 'img' : null"
+      [attr.class]="mergedClassName"
+    >
+      <title *ngIf="title">{{ title }}</title>
+      <ng-container *ngFor="let node of processedNodes">
+        <ng-container [ngSwitch]="node.type">
+          <path *ngSwitchCase="'path'" [attr.d]="node.attrs.d" [ngStyle]="node.attrs"></path>
+          <circle *ngSwitchCase="'circle'" [attr.cx]="node.attrs.cx" [attr.cy]="node.attrs.cy" [attr.r]="node.attrs.r" [ngStyle]="node.attrs"></circle>
+          <rect *ngSwitchCase="'rect'" [attr.x]="node.attrs.x" [attr.y]="node.attrs.y" [attr.width]="node.attrs.width" [attr.height]="node.attrs.height" [ngStyle]="node.attrs"></rect>
+          <line *ngSwitchCase="'line'" [attr.x1]="node.attrs.x1" [attr.y1]="node.attrs.y1" [attr.x2]="node.attrs.x2" [attr.y2]="node.attrs.y2" [ngStyle]="node.attrs"></line>
+          <polyline *ngSwitchCase="'polyline'" [attr.points]="node.attrs.points" [ngStyle]="node.attrs"></polyline>
+          <polygon *ngSwitchCase="'polygon'" [attr.points]="node.attrs.points" [ngStyle]="node.attrs"></polygon>
+          <ellipse *ngSwitchCase="'ellipse'" [attr.cx]="node.attrs.cx" [attr.cy]="node.attrs.cy" [attr.rx]="node.attrs.rx" [attr.ry]="node.attrs.ry" [ngStyle]="node.attrs"></ellipse>
+          <g *ngSwitchDefault [ngStyle]="node.attrs">
+            <ng-container *ngFor="let child of node.children">
+              <ng-container [ngSwitch]="child.type">
+                <path *ngSwitchCase="'path'" [attr.d]="child.attrs.d" [ngStyle]="child.attrs"></path>
+                <circle *ngSwitchCase="'circle'" [attr.cx]="child.attrs.cx" [attr.cy]="child.attrs.cy" [attr.r]="child.attrs.r" [ngStyle]="child.attrs"></circle>
+                <rect *ngSwitchCase="'rect'" [attr.x]="child.attrs.x" [attr.y]="child.attrs.y" [attr.width]="child.attrs.width" [attr.height]="child.attrs.height" [ngStyle]="child.attrs"></rect>
+              </ng-container>
+            </ng-container>
+          </g>
+        </ng-container>
+      </ng-container>
+    </svg>
+  `
+})
+export class IconBaseComponent {
+  @Input() size: number | string = 24
+  @Input() color: string = 'currentColor'
+  @Input() strokeWidth: number | string = 2
+  @Input() className?: string
+  @Input() title?: string
+  @Input() ariaLabel?: string
+  @Input() ariaHidden?: boolean
+  @Input() iconNode: IconNode[] = []
+  @Input() keepColors: boolean = false
+
+  get shouldHide(): boolean {
+    return this.ariaHidden !== undefined ? this.ariaHidden : (!this.title && !this.ariaLabel)
+  }
+
+  get mergedClassName(): string {
+    return this.className ? `vectify-icon ${this.className}` : 'vectify-icon'
+  }
+
+  get processedNodes(): any[] {
+    return this.iconNode.map(node => this.renderNode(node))
+  }
+
+  private renderNode(node: IconNode): any {
+    const [type, attrs, children] = node
+
+    let cleanedAttrs: Record<string, any>
+
+    if (this.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 = 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'
+      }
+    }
+
+    return {
+      type,
+      attrs: cleanedAttrs,
+      children: children && children.length > 0 ? children.map(c => this.renderNode(c)) : []
+    }
+  }
+}

package/dist/templates/astro/component.astro.hbs

@@ -0,0 +1,110 @@
+---
+import type { IconNode } from 'vectify'
+
+export interface Props {
+  size?: number | string
+  color?: string
+  strokeWidth?: number | string
+  class?: string
+  title?: string
+  'aria-label'?: string
+  'aria-hidden'?: boolean | 'true' | 'false'
+}
+
+const iconNode: IconNode[] = [
+{{{formattedNodes}}}
+]
+
+const {
+  size = 24,
+  color = 'currentColor',
+  strokeWidth = 2,
+  class: className,
+  title,
+  'aria-label': ariaLabel,
+  'aria-hidden': ariaHidden,
+  ...props
+} = Astro.props
+
+const keepColors = {{keepColors}}
+
+// Determine if icon should be hidden from screen readers
+const shouldHide = ariaHidden !== undefined ? ariaHidden : (!title && !ariaLabel)
+
+const mergedClassName = className ? `vectify-icon ${className}` : 'vectify-icon'
+
+function renderNode(node: IconNode): any {
+  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['stroke-width'] = originalStrokeWidth ?? strokeWidth
+      cleanedAttrs['stroke-linecap'] = 'round'
+      cleanedAttrs['stroke-linejoin'] = 'round'
+    }
+  }
+
+  return {
+    type,
+    attrs: cleanedAttrs,
+    children: children && children.length > 0 ? children.map(renderNode) : []
+  }
+}
+
+const processedNodes = iconNode.map(renderNode)
+---
+
+<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>}
+  {processedNodes.map((node) => {
+    const Element = node.type as any
+    return <Element {...node.attrs}>
+      {node.children && node.children.length > 0 && node.children.map((child: any) => {
+        const ChildElement = child.type as any
+        return <ChildElement {...child.attrs} />
+      })}
+    </Element>
+  })}
+</svg>

package/dist/templates/astro/createIcon.astro.hbs

@@ -0,0 +1,111 @@
+---
+import type { IconNode } from 'vectify'
+
+export interface Props {
+  size?: number | string
+  color?: string
+  strokeWidth?: number | string
+  class?: string
+  title?: string
+  'aria-label'?: string
+  'aria-hidden'?: boolean | 'true' | 'false'
+}
+
+interface IconBaseProps extends Props {
+  iconNode: IconNode[]
+  keepColors?: boolean
+}
+
+const {
+  size = 24,
+  color = 'currentColor',
+  strokeWidth = 2,
+  class: className,
+  title,
+  'aria-label': ariaLabel,
+  'aria-hidden': ariaHidden,
+  iconNode,
+  keepColors = false,
+  ...props
+} = Astro.props as IconBaseProps
+
+// Determine if icon should be hidden from screen readers
+const shouldHide = ariaHidden !== undefined ? ariaHidden : (!title && !ariaLabel)
+
+const mergedClassName = className ? `vectify-icon ${className}` : 'vectify-icon'
+
+function renderNode(node: IconNode): any {
+  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['stroke-width'] = originalStrokeWidth ?? strokeWidth
+      cleanedAttrs['stroke-linecap'] = 'round'
+      cleanedAttrs['stroke-linejoin'] = 'round'
+    }
+  }
+
+  return {
+    type,
+    attrs: cleanedAttrs,
+    children: children && children.length > 0 ? children.map(renderNode) : []
+  }
+}
+
+const processedNodes = iconNode.map(renderNode)
+---
+
+<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>}
+  {processedNodes.map((node) => {
+    const Element = node.type as any
+    return <Element {...node.attrs}>
+      {node.children && node.children.length > 0 && node.children.map((child: any) => {
+        const ChildElement = child.type as any
+        return <ChildElement {...child.attrs} />
+      })}
+    </Element>
+  })}
+</svg>

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

@@ -0,0 +1,12 @@
+import { customElement } from 'lit/decorators.js'
+import { IconBase } from './createIcon'
+
+export const iconNode = [
+{{{formattedNodes}}}
+]
+
+@customElement('{{componentName}}')
+export class {{componentName}} extends IconBase {
+  iconNode = iconNode
+  keepColors = {{keepColors}}
+}

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

@@ -0,0 +1,19 @@
+import { customElement } from 'lit/decorators.js'
+import { IconBase } from './createIcon'
+import type { IconNode } from 'vectify'
+
+export const iconNode: IconNode[] = [
+{{{formattedNodes}}}
+]
+
+@customElement('{{componentName}}')
+export class {{componentName}} extends IconBase {
+  iconNode = iconNode
+  keepColors = {{keepColors}}
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    '{{componentName}}': {{componentName}}
+  }
+}

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

@@ -0,0 +1,98 @@
+import { LitElement, html, css, svg } from 'lit'
+import { property } from 'lit/decorators.js'
+
+export class IconBase extends LitElement {
+  static properties = {
+    size: { type: Number },
+    color: { type: String },
+    strokeWidth: { type: Number },
+    title: { type: String },
+    ariaLabel: { type: String },
+    ariaHidden: { type: Boolean }
+  }
+
+  constructor() {
+    super()
+    this.size = 24
+    this.color = 'currentColor'
+    this.strokeWidth = 2
+    this.title = ''
+    this.ariaLabel = ''
+    this.ariaHidden = false
+  }
+
+  static styles = css`
+    :host {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+    }
+  `
+
+  renderNode(node) {
+    const [type, attrs, children] = node
+    let cleanedAttrs
+
+    if (this.keepColors) {
+      cleanedAttrs = attrs
+    } else {
+      // Track color attributes
+      let hasFill = false
+      let hasStroke = false
+      let originalStrokeWidth
+
+      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>
+    `
+  }
+}