vectify 2.0.5 → 2.1.0

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

@@ -1,6 +1,6 @@
 import { createElement } from 'preact'
 
-export function createIcon(name, iconNode, keepColors = false) {
+export function createIcon(name, iconNode, keepColors = false, defaultViewBox = '0 0 24 24') {
   const Icon = ({
     size = 24,
     color = 'currentColor',
@@ -8,6 +8,7 @@ export function createIcon(name, iconNode, keepColors = false) {
     class: classAttr,
     className,
     title,
+    viewBox = defaultViewBox,
     'aria-label': ariaLabel,
     'aria-hidden': ariaHidden,
     ref,
@@ -24,7 +25,7 @@ export function createIcon(name, iconNode, keepColors = false) {
         ref={ref}
         width={size}
         height={size}
-        viewBox="0 0 24 24"
+        viewBox={viewBox}
         aria-hidden={shouldHide}
         aria-label={ariaLabel}
         role={title || ariaLabel ? 'img' : undefined}
@@ -48,7 +49,15 @@ function renderIconNode(nodes, keepColors, color, strokeWidth) {
     let cleanedAttrs
 
     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

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

@@ -9,13 +9,14 @@ export interface CreateIconProps extends IconProps {
   class?: string
   className?: string
   title?: string
+  viewBox?: string
   'aria-label'?: string
   'aria-hidden'?: boolean | 'true' | 'false'
   ref?: any
   [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') {
   const Icon = ({
     size = 24,
     color = 'currentColor',
@@ -23,6 +24,7 @@ export function createIcon(name: string, iconNode: IconNode[], keepColors = fals
     class: classAttr,
     className,
     title,
+    viewBox = defaultViewBox,
     'aria-label': ariaLabel,
     'aria-hidden': ariaHidden,
     ref,
@@ -39,7 +41,7 @@ export function createIcon(name: string, iconNode: IconNode[], keepColors = fals
         ref={ref}
         width={size}
         height={size}
-        viewBox="0 0 24 24"
+        viewBox={viewBox}
         aria-hidden={shouldHide}
         aria-label={ariaLabel}
         role={title || ariaLabel ? 'img' : undefined}
@@ -68,7 +70,15 @@ function renderIconNode(
     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

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

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

package/dist/templates/qwik/component.tsx.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/qwik/createIcon.jsx.hbs

@@ -1,12 +1,13 @@
 import { component$ } from '@builder.io/qwik'
 
-export function createIcon(name, iconNode, keepColors = false) {
+export function createIcon(name, iconNode, keepColors = false, defaultViewBox = '0 0 24 24') {
   return component$(({
     size = 24,
     color = 'currentColor',
     strokeWidth = 2,
     class: className,
     title,
+    viewBox = defaultViewBox,
     'aria-label': ariaLabel,
     'aria-hidden': ariaHidden,
     ...props
@@ -20,7 +21,7 @@ export function createIcon(name, iconNode, keepColors = false) {
       <svg
         width={size}
         height={size}
-        viewBox="0 0 24 24"
+        viewBox={viewBox}
         aria-hidden={shouldHide}
         aria-label={ariaLabel}
         role={title || ariaLabel ? 'img' : undefined}
@@ -46,7 +47,15 @@ function renderIconNode(
     let cleanedAttrs
 
     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

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

@@ -7,17 +7,19 @@ export interface CreateIconProps extends IconProps, Omit<QwikIntrinsicElements['
   strokeWidth?: number | string
   class?: string
   title?: string
+  viewBox?: string
   'aria-label'?: string
   'aria-hidden'?: boolean | 'true' | 'false'
 }
 
-export function createIcon(name: string, iconNode: IconNode[], keepColors = false) {
+export function createIcon(name: string, iconNode: IconNode[], keepColors = false, defaultViewBox = '0 0 24 24') {
   return component$<CreateIconProps>(({
     size = 24,
     color = 'currentColor',
     strokeWidth = 2,
     class: className,
     title,
+    viewBox = defaultViewBox,
     'aria-label': ariaLabel,
     'aria-hidden': ariaHidden,
     ...props
@@ -31,7 +33,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={ariaLabel}
         role={title || ariaLabel ? 'img' : undefined}
@@ -57,7 +59,15 @@ function renderIconNode(
     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

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

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

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

@@ -9,5 +9,5 @@ export const iconNode{{#if typescript}}: IconNode[]{{/if}} = [
 {{{formattedNodes}}},
 ]
 
-const {{componentName}} = createIcon('{{componentName}}', iconNode, {{keepColors}})
+const {{componentName}} = createIcon('{{componentName}}', iconNode, {{keepColors}}, '{{viewBox}}')
 export default {{componentName}}

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

@@ -2,13 +2,14 @@
 
 import { createElement, forwardRef } from 'react'
 
-export function createIcon(name, iconNode, keepColors = false) {
+export function createIcon(name, iconNode, keepColors = false, defaultViewBox = '0 0 24 24') {
   const Icon = forwardRef(({
     size = 24,
     color = 'currentColor',
     strokeWidth = 2,
     className,
     title,
+    viewBox = defaultViewBox,
     'aria-label': ariaLabel,
     'aria-hidden': ariaHidden,
     ...props
@@ -25,7 +26,7 @@ export function createIcon(name, iconNode, keepColors = false) {
         ref={ref}
         width={size}
         height={size}
-        viewBox="0 0 24 24"
+        viewBox={viewBox}
         aria-hidden={shouldHide}
         aria-label={ariaLabel}
         role={title || ariaLabel ? 'img' : undefined}
@@ -49,7 +50,15 @@ function renderIconNode(nodes, keepColors, color, strokeWidth) {
     let cleanedAttrs
 
     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

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

@@ -10,17 +10,19 @@ export interface CreateIconProps extends IconProps, Omit<SVGProps<SVGSVGElement>
   'strokeWidth'?: number | string
   'className'?: string
   'title'?: string
+  'viewBox'?: string
   'aria-label'?: string
   'aria-hidden'?: boolean | 'true' | 'false'
 }
 
-export function createIcon(name: string, iconNode: IconNode[], keepColors = false): ForwardRefExoticComponent<CreateIconProps & RefAttributes<SVGSVGElement>> {
+export function createIcon(name: string, iconNode: IconNode[], keepColors = false, defaultViewBox = '0 0 24 24'): ForwardRefExoticComponent<CreateIconProps & RefAttributes<SVGSVGElement>> {
   const Icon = forwardRef<SVGSVGElement, CreateIconProps>(({
     size = 24,
     color = 'currentColor',
     strokeWidth = 2,
     className,
     title,
+    viewBox = defaultViewBox,
     'aria-label': ariaLabel,
     'aria-hidden': ariaHidden,
     ...props
@@ -37,7 +39,7 @@ export function createIcon(name: string, iconNode: IconNode[], keepColors = fals
         ref={ref}
         width={size}
         height={size}
-        viewBox="0 0 24 24"
+        viewBox={viewBox}
         aria-hidden={shouldHide}
         aria-label={ariaLabel}
         role={title || ariaLabel ? 'img' : undefined}
@@ -66,7 +68,15 @@ function renderIconNode(
     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

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

@@ -7,4 +7,4 @@ export const iconNode{{#if typescript}}: IconNode[]{{/if}} = [
 {{{formattedNodes}}}
 ]
 
-export const {{componentName}} = createIcon('{{componentName}}', iconNode, {{keepColors}})
+export const {{componentName}} = createIcon('{{componentName}}', iconNode, {{keepColors}}, '{{viewBox}}')

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

@@ -1,6 +1,6 @@
 import { splitProps } from 'solid-js'
 
-export function createIcon(name, iconNode, keepColors = false) {
+export function createIcon(name, iconNode, keepColors = false, defaultViewBox = '0 0 24 24') {
   return (props) => {
     const [local, others] = splitProps(props, [
       'size',
@@ -8,6 +8,7 @@ export function createIcon(name, iconNode, keepColors = false) {
       'strokeWidth',
       'class',
       'title',
+      'viewBox',
       'aria-label',
       'aria-hidden'
     ])
@@ -15,6 +16,7 @@ export function createIcon(name, iconNode, keepColors = false) {
     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
@@ -29,7 +31,15 @@ export function createIcon(name, iconNode, keepColors = false) {
       let cleanedAttrs
 
       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
@@ -112,7 +122,7 @@ export function createIcon(name, iconNode, keepColors = false) {
       <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/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>