vectify 2.0.5 → 2.1.1

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

@@ -7,12 +7,13 @@ export interface CreateIconProps {
   strokeWidth?: number | string
   class?: string
   title?: string
+  viewBox?: string
   'aria-label'?: string
   'aria-hidden'?: boolean | 'true' | 'false'
   [key: string]: any
 }
 
-export function createIcon(name: string, iconNode: IconNode[], keepColors = false) {
+export function createIcon(name: string, iconNode: IconNode[], keepColors = false, defaultViewBox = '0 0 24 24') {
   return (props: CreateIconProps): JSX.Element => {
     const [local, others] = splitProps(props, [
       'size',
@@ -20,6 +21,7 @@ export function createIcon(name: string, iconNode: IconNode[], keepColors = fals
       'strokeWidth',
       'class',
       'title',
+      'viewBox',
       'aria-label',
       'aria-hidden'
     ])
@@ -27,6 +29,7 @@ export function createIcon(name: string, iconNode: IconNode[], keepColors = fals
     const size = () => local.size ?? 24
     const color = () => local.color ?? 'currentColor'
     const strokeWidth = () => local.strokeWidth ?? 2
+    const viewBox = () => local.viewBox ?? defaultViewBox
 
     // Determine if icon should be hidden from screen readers
     const shouldHide = () => local['aria-hidden'] !== undefined
@@ -41,7 +44,15 @@ export function createIcon(name: string, iconNode: IconNode[], keepColors = fals
       let cleanedAttrs: Record<string, any>
 
       if (keepColors) {
-        cleanedAttrs = attrs
+        // Keep original colors, but use currentColor for elements without fill/stroke
+        cleanedAttrs = { ...attrs }
+        const hasFill = 'fill' in attrs
+        const hasStroke = 'stroke' in attrs
+
+        // If element has neither fill nor stroke, apply currentColor as fill
+        if (!hasFill && !hasStroke) {
+          cleanedAttrs.fill = color()
+        }
       } else {
         // Track color attributes to determine icon type
         let hasFill = false
@@ -124,7 +135,7 @@ export function createIcon(name: string, iconNode: IconNode[], keepColors = fals
       <svg
         width={size()}
         height={size()}
-        viewBox="0 0 24 24"
+        viewBox={viewBox()}
         aria-hidden={shouldHide()}
         aria-label={local['aria-label']}
         role={local.title || local['aria-label'] ? 'img' : undefined}

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

@@ -4,6 +4,9 @@
   const iconNode = [
 {{{formattedNodes}}}
   ]
+
+  const keepColors = {{keepColors}}
+  const viewBox = '{{viewBox}}'
 </script>
 
-<Icon {iconNode} {...$$restProps} />
+<Icon {iconNode} {keepColors} {viewBox} {...$$restProps} />

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

@@ -5,6 +5,9 @@
   const iconNode: IconNode[] = [
 {{{formattedNodes}}}
   ]
+
+  const keepColors = {{keepColors}}
+  const viewBox = '{{viewBox}}'
 </script>
 
-<Icon {iconNode} {...$$restProps} />
+<Icon {iconNode} {keepColors} {viewBox} {...$$restProps} />

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

@@ -10,6 +10,7 @@
   export let ariaLabel = ''
   export let ariaHidden = undefined
   export let keepColors = false
+  export let viewBox = '0 0 24 24'
 
   let svgElement
 
@@ -20,7 +21,27 @@
   $: shouldHide = ariaHidden !== undefined ? ariaHidden : (!title && !ariaLabel)
 
   // Clean icon node to apply color
-  $: cleanedIconNode = keepColors ? iconNode : cleanIconNodes(iconNode, color, strokeWidth)
+  $: cleanedIconNode = keepColors ? cleanIconNodesKeepColors(iconNode, color) : cleanIconNodes(iconNode, color, strokeWidth)
+
+  function cleanIconNodesKeepColors(nodes, color) {
+    return nodes.map(node => {
+      const [type, attrs, children] = node
+
+      const cleanedAttrs = { ...attrs }
+
+      // For elements without fill or stroke, use currentColor
+      const hasFill = 'fill' in attrs
+      const hasStroke = 'stroke' in attrs
+
+      if (!hasFill && !hasStroke) {
+        cleanedAttrs.fill = color
+      }
+
+      const cleanedChildren = children ? cleanIconNodesKeepColors(children, color) : undefined
+
+      return cleanedChildren ? [type, cleanedAttrs, cleanedChildren] : [type, cleanedAttrs]
+    })
+  }
 
   function cleanIconNodes(nodes, color, strokeWidth) {
     return nodes.map(node => {
@@ -110,7 +131,7 @@
   bind:this={svgElement}
   width={size}
   height={size}
-  viewBox="0 0 24 24"
+  viewBox={viewBox}
   aria-hidden={shouldHide}
   aria-label={ariaLabel || undefined}
   role={title || ariaLabel ? 'img' : undefined}

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

@@ -11,6 +11,7 @@
   export let ariaLabel: string = ''
   export let ariaHidden: boolean | 'true' | 'false' | undefined = undefined
   export let keepColors: boolean = false
+  export let viewBox: string = '0 0 24 24'
 
   let svgElement: SVGSVGElement
 
@@ -21,7 +22,27 @@
   $: shouldHide = ariaHidden !== undefined ? ariaHidden : (!title && !ariaLabel)
 
   // Clean icon node to apply color
-  $: cleanedIconNode = keepColors ? iconNode : cleanIconNodes(iconNode, color, strokeWidth)
+  $: cleanedIconNode = keepColors ? cleanIconNodesKeepColors(iconNode, color) : cleanIconNodes(iconNode, color, strokeWidth)
+
+  function cleanIconNodesKeepColors(nodes: IconNode[], color: string): IconNode[] {
+    return nodes.map(node => {
+      const [type, attrs, children] = node
+
+      const cleanedAttrs: Record<string, any> = { ...attrs }
+
+      // For elements without fill or stroke, use currentColor
+      const hasFill = 'fill' in attrs
+      const hasStroke = 'stroke' in attrs
+
+      if (!hasFill && !hasStroke) {
+        cleanedAttrs.fill = color
+      }
+
+      const cleanedChildren = children ? cleanIconNodesKeepColors(children, color) : undefined
+
+      return cleanedChildren ? [type, cleanedAttrs, cleanedChildren] : [type, cleanedAttrs]
+    }) as IconNode[]
+  }
 
   function cleanIconNodes(nodes: IconNode[], color: string, strokeWidth: number | string): IconNode[] {
     return nodes.map(node => {
@@ -111,7 +132,7 @@
   bind:this={svgElement}
   width={size}
   height={size}
-  viewBox="0 0 24 24"
+  viewBox={viewBox}
   aria-hidden={shouldHide}
   aria-label={ariaLabel || undefined}
   role={title || ariaLabel ? 'img' : undefined}

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

@@ -5,4 +5,4 @@ export const iconNode: IconNode[] = [
 {{{formattedNodes}}}
 ]
 
-export const {{componentName}} = createIcon('{{componentName}}', iconNode, {{keepColors}})
+export const {{componentName}} = createIcon('{{componentName}}', iconNode, {{keepColors}}, '{{viewBox}}')

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

@@ -1,4 +1,4 @@
-export function createIcon(name, iconNode, keepColors = false) {
+export function createIcon(name, iconNode, keepColors = false, defaultViewBox = '0 0 24 24') {
   return (options = {}) => {
     const {
       size = 24,
@@ -6,6 +6,7 @@ export function createIcon(name, iconNode, keepColors = false) {
       strokeWidth = 2,
       className = '',
       title,
+      viewBox = defaultViewBox,
       ariaLabel,
       ariaHidden,
       ...attrs
@@ -14,7 +15,7 @@ export function createIcon(name, iconNode, keepColors = false) {
     const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
     svg.setAttribute('width', String(size))
     svg.setAttribute('height', String(size))
-    svg.setAttribute('viewBox', '0 0 24 24')
+    svg.setAttribute('viewBox', viewBox)
     svg.setAttribute('class', className ? `vectify-icon ${className}` : 'vectify-icon')
 
     // Accessibility
@@ -49,7 +50,15 @@ export function createIcon(name, iconNode, keepColors = false) {
       let cleanedAttrs
 
       if (keepColors) {
-        cleanedAttrs = nodeAttrs
+        // Keep original colors, but use currentColor for elements without fill/stroke
+        cleanedAttrs = { ...nodeAttrs }
+        const hasFill = 'fill' in nodeAttrs
+        const hasStroke = 'stroke' in nodeAttrs
+
+        // If element has neither fill nor stroke, apply currentColor as fill
+        if (!hasFill && !hasStroke) {
+          cleanedAttrs.fill = color
+        }
       } else {
         // Track color attributes
         let hasFill = false

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

@@ -4,6 +4,7 @@ export interface IconOptions {
   strokeWidth?: number | string
   className?: string
   title?: string
+  viewBox?: string
   ariaLabel?: string
   ariaHidden?: boolean
   [key: string]: any
@@ -11,7 +12,7 @@ export interface IconOptions {
 
 export type IconNode = [string, Record<string, any>, IconNode[]?]
 
-export function createIcon(name: string, iconNode: IconNode[], keepColors = false) {
+export function createIcon(name: string, iconNode: IconNode[], keepColors = false, defaultViewBox = '0 0 24 24') {
   return (options: IconOptions = {}): SVGSVGElement => {
     const {
       size = 24,
@@ -19,6 +20,7 @@ export function createIcon(name: string, iconNode: IconNode[], keepColors = fals
       strokeWidth = 2,
       className = '',
       title,
+      viewBox = defaultViewBox,
       ariaLabel,
       ariaHidden,
       ...attrs
@@ -27,7 +29,7 @@ export function createIcon(name: string, iconNode: IconNode[], keepColors = fals
     const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
     svg.setAttribute('width', String(size))
     svg.setAttribute('height', String(size))
-    svg.setAttribute('viewBox', '0 0 24 24')
+    svg.setAttribute('viewBox', viewBox)
     svg.setAttribute('class', className ? `vectify-icon ${className}` : 'vectify-icon')
 
     // Accessibility
@@ -62,7 +64,15 @@ export function createIcon(name: string, iconNode: IconNode[], keepColors = fals
       let cleanedAttrs: Record<string, any>
 
       if (keepColors) {
-        cleanedAttrs = nodeAttrs
+        // Keep original colors, but use currentColor for elements without fill/stroke
+        cleanedAttrs = { ...nodeAttrs }
+        const hasFill = 'fill' in nodeAttrs
+        const hasStroke = 'stroke' in nodeAttrs
+
+        // If element has neither fill nor stroke, apply currentColor as fill
+        if (!hasFill && !hasStroke) {
+          cleanedAttrs.fill = color
+        }
       } else {
         // Track color attributes
         let hasFill = false

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

@@ -1,5 +1,5 @@
 <template>
-  <Icon :iconNode="iconNode" v-bind="$attrs" />
+  <Icon :iconNode="iconNode" :keepColors="keepColors" :viewBox="viewBox" v-bind="$attrs" />
 </template>
 
 <script>
@@ -15,7 +15,10 @@ export default defineComponent({
 {{{formattedNodes}}}
     ]
 
-    return { iconNode }
+    const keepColors = {{keepColors}}
+    const viewBox = '{{viewBox}}'
+
+    return { iconNode, keepColors, viewBox }
   }
 })
 </script>

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

@@ -1,5 +1,5 @@
 <template>
-  <Icon :iconNode="iconNode" v-bind="$attrs" />
+  <Icon :iconNode="iconNode" :keepColors="keepColors" :viewBox="viewBox" v-bind="$attrs" />
 </template>
 
 <script lang="ts">
@@ -16,7 +16,10 @@ export default defineComponent({
 {{{formattedNodes}}}
     ]
 
-    return { iconNode }
+    const keepColors = {{keepColors}}
+    const viewBox = '{{viewBox}}'
+
+    return { iconNode, keepColors, viewBox }
   }
 })
 </script>

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

@@ -2,7 +2,7 @@
   <svg
     :width="size"
     :height="size"
-    viewBox="0 0 24 24"
+    :viewBox="viewBox"
     :aria-hidden="shouldHide"
     :aria-label="ariaLabel"
     :role="title || ariaLabel ? 'img' : undefined"
@@ -60,6 +60,10 @@ export default defineComponent({
     keepColors: {
       type: Boolean,
       default: false
+    },
+    viewBox: {
+      type: String,
+      default: '0 0 24 24'
     }
   },
   setup(props) {
@@ -76,12 +80,32 @@ export default defineComponent({
     // Clean icon node to apply color
     const cleanedIconNode = computed(() => {
       if (props.keepColors) {
-        return props.iconNode
+        return cleanIconNodesKeepColors(props.iconNode, props.color)
       }
 
       return cleanIconNodes(props.iconNode, props.color, props.strokeWidth)
     })
 
+    function cleanIconNodesKeepColors(nodes, color) {
+      return nodes.map(node => {
+        const [type, attrs, children] = node
+
+        const cleanedAttrs = { ...attrs }
+
+        // For elements without fill or stroke, use currentColor
+        const hasFill = 'fill' in attrs
+        const hasStroke = 'stroke' in attrs
+
+        if (!hasFill && !hasStroke) {
+          cleanedAttrs.fill = color
+        }
+
+        const cleanedChildren = children ? cleanIconNodesKeepColors(children, color) : undefined
+
+        return [type, cleanedAttrs, cleanedChildren]
+      })
+    }
+
     function cleanIconNodes(nodes, color, strokeWidth) {
       return nodes.map(node => {
         const [type, attrs, children] = node

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

@@ -2,7 +2,7 @@
   <svg
     :width="size"
     :height="size"
-    viewBox="0 0 24 24"
+    :viewBox="viewBox"
     :aria-hidden="shouldHide"
     :aria-label="ariaLabel"
     :role="title || ariaLabel ? 'img' : undefined"
@@ -62,6 +62,10 @@ export default defineComponent({
     keepColors: {
       type: Boolean,
       default: false
+    },
+    viewBox: {
+      type: String,
+      default: '0 0 24 24'
     }
   },
   setup(props) {
@@ -78,12 +82,32 @@ export default defineComponent({
     // Clean icon node to apply color
     const cleanedIconNode = computed(() => {
       if (props.keepColors) {
-        return props.iconNode
+        return cleanIconNodesKeepColors(props.iconNode, props.color)
       }
 
       return cleanIconNodes(props.iconNode, props.color, props.strokeWidth)
     })
 
+    function cleanIconNodesKeepColors(nodes: IconNode[], color: string): IconNode[] {
+      return nodes.map(node => {
+        const [type, attrs, children] = node
+
+        const cleanedAttrs: Record<string, any> = { ...attrs }
+
+        // For elements without fill or stroke, use currentColor
+        const hasFill = 'fill' in attrs
+        const hasStroke = 'stroke' in attrs
+
+        if (!hasFill && !hasStroke) {
+          cleanedAttrs.fill = color
+        }
+
+        const cleanedChildren = children ? cleanIconNodesKeepColors(children, color) : undefined
+
+        return [type, cleanedAttrs, cleanedChildren] as IconNode
+      })
+    }
+
     function cleanIconNodes(nodes: IconNode[], color: string, strokeWidth: number | string): IconNode[] {
       return nodes.map(node => {
         const [type, attrs, children] = node

package/dist/templates/vue2/component.js.vue.hbs

@@ -1,5 +1,5 @@
 <template>
-  <Icon :iconNode="iconNode" v-bind="$attrs" />
+  <Icon :iconNode="iconNode" :keepColors="keepColors" :viewBox="viewBox" v-bind="$attrs" />
 </template>
 
 <script>
@@ -13,7 +13,9 @@ export default {
     return {
       iconNode: [
 {{{formattedNodes}}}
-      ]
+      ],
+      keepColors: {{keepColors}},
+      viewBox: '{{viewBox}}'
     }
   }
 }

package/dist/templates/vue2/component.ts.vue.hbs

@@ -1,5 +1,5 @@
 <template>
-  <Icon :iconNode="iconNode" v-bind="$attrs" />
+  <Icon :iconNode="iconNode" :keepColors="keepColors" :viewBox="viewBox" v-bind="$attrs" />
 </template>
 
 <script lang="ts">
@@ -16,7 +16,10 @@ export default Vue.extend({
 {{{formattedNodes}}}
     ]
 
-    return { iconNode }
+    const keepColors = {{keepColors}}
+    const viewBox = '{{viewBox}}'
+
+    return { iconNode, keepColors, viewBox }
   }
 })
 </script>

package/dist/templates/vue2/icon.js.vue.hbs

@@ -38,6 +38,10 @@ export default {
     keepColors: {
       type: Boolean,
       default: false
+    },
+    viewBox: {
+      type: String,
+      default: '0 0 24 24'
     }
   },
   computed: {
@@ -49,12 +53,31 @@ export default {
     },
     cleanedIconNode() {
       if (this.keepColors) {
-        return this.iconNode
+        return this.cleanIconNodesKeepColors(this.iconNode, this.color)
       }
       return this.cleanIconNodes(this.iconNode, this.color, this.strokeWidth)
     }
   },
   methods: {
+    cleanIconNodesKeepColors(nodes, color) {
+      return nodes.map(node => {
+        const [type, attrs, children] = node
+
+        const cleanedAttrs = { ...attrs }
+
+        // For elements without fill or stroke, use currentColor
+        const hasFill = 'fill' in attrs
+        const hasStroke = 'stroke' in attrs
+
+        if (!hasFill && !hasStroke) {
+          cleanedAttrs.fill = color
+        }
+
+        const cleanedChildren = children ? this.cleanIconNodesKeepColors(children, color) : undefined
+
+        return [type, cleanedAttrs, cleanedChildren]
+      })
+    },
     cleanIconNodes(nodes, color, strokeWidth) {
       return nodes.map(node => {
         const [type, attrs, children] = node
@@ -126,7 +149,7 @@ export default {
       attrs: {
         width: this.size,
         height: this.size,
-        viewBox: '0 0 24 24',
+        viewBox: this.viewBox,
         'aria-hidden': this.shouldHide,
         'aria-label': this.ariaLabel,
         role: this.title || this.ariaLabel ? 'img' : undefined,

package/dist/templates/vue2/icon.ts.vue.hbs

@@ -41,6 +41,10 @@ export default Vue.extend({
     keepColors: {
       type: Boolean,
       default: false
+    },
+    viewBox: {
+      type: String,
+      default: '0 0 24 24'
     }
   },
   computed: {
@@ -52,12 +56,31 @@ export default Vue.extend({
     },
     cleanedIconNode(): IconNode[] {
       if (this.keepColors) {
-        return this.iconNode
+        return this.cleanIconNodesKeepColors(this.iconNode, this.color)
       }
       return this.cleanIconNodes(this.iconNode, this.color, this.strokeWidth)
     }
   },
   methods: {
+    cleanIconNodesKeepColors(nodes: IconNode[], color: string): IconNode[] {
+      return nodes.map(node => {
+        const [type, attrs, children] = node
+
+        const cleanedAttrs: Record<string, any> = { ...attrs }
+
+        // For elements without fill or stroke, use currentColor
+        const hasFill = 'fill' in attrs
+        const hasStroke = 'stroke' in attrs
+
+        if (!hasFill && !hasStroke) {
+          cleanedAttrs.fill = color
+        }
+
+        const cleanedChildren = children ? this.cleanIconNodesKeepColors(children, color) : undefined
+
+        return [type, cleanedAttrs, cleanedChildren] as IconNode
+      })
+    },
     cleanIconNodes(nodes: IconNode[], color: string, strokeWidth: number | string): IconNode[] {
       return nodes.map(node => {
         const [type, attrs, children] = node
@@ -129,7 +152,7 @@ export default Vue.extend({
       attrs: {
         width: this.size,
         height: this.size,
-        viewBox: '0 0 24 24',
+        viewBox: this.viewBox,
         'aria-hidden': this.shouldHide,
         'aria-label': this.ariaLabel,
         role: this.title || this.ariaLabel ? 'img' : undefined,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vectify",
-  "version": "2.0.5",
+  "version": "2.1.1",
   "packageManager": "pnpm@9.15.9",
   "description": "A powerful command-line tool to generate React, Vue, and Svelte icon components from SVG files",
   "author": "Xiaobing Zhu <hellozxb252@gmail.com>",