vectify 2.0.5 → 2.1.1

package/dist/index.mjs

@@ -7,8 +7,8 @@ import {
   init,
   loadConfig,
   watch
-} from "./chunk-GY4VNET5.mjs";
-import "./chunk-CIKTK6HI.mjs";
+} from "./chunk-QYE23M3E.mjs";
+import "./chunk-FS34P27H.mjs";
 
 // src/types.ts
 function defineConfig(config) {

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

@@ -14,7 +14,7 @@ const iconNode: IconNode[] = [
     <svg
       [attr.width]="size"
       [attr.height]="size"
-      viewBox="0 0 24 24"
+      [attr.viewBox]="viewBox"
       [attr.aria-hidden]="shouldHide"
       [attr.aria-label]="ariaLabel"
       [attr.role]="title || ariaLabel ? 'img' : null"
@@ -55,6 +55,7 @@ export class {{componentName}}Component {
 
   private iconNode: IconNode[] = iconNode
   private keepColors: boolean = {{keepColors}}
+  private viewBox: string = '{{viewBox}}'
 
   get shouldHide(): boolean {
     return this.ariaHidden !== undefined ? this.ariaHidden : (!this.title && !this.ariaLabel)
@@ -74,7 +75,15 @@ export class {{componentName}}Component {
     let cleanedAttrs: Record<string, any>
 
     if (this.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 = this.color
+      }
     } else {
       // Track color attributes to determine icon type
       let hasFill = false

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

@@ -10,7 +10,7 @@ import type { IconNode } from 'vectify'
     <svg
       [attr.width]="size"
       [attr.height]="size"
-      viewBox="0 0 24 24"
+      [attr.viewBox]="viewBox"
       [attr.aria-hidden]="shouldHide"
       [attr.aria-label]="ariaLabel"
       [attr.role]="title || ariaLabel ? 'img' : null"
@@ -50,6 +50,7 @@ export class IconBaseComponent {
   @Input() ariaHidden?: boolean
   @Input() iconNode: IconNode[] = []
   @Input() keepColors: boolean = false
+  @Input() viewBox: string = '0 0 24 24'
 
   get shouldHide(): boolean {
     return this.ariaHidden !== undefined ? this.ariaHidden : (!this.title && !this.ariaLabel)
@@ -69,7 +70,15 @@ export class IconBaseComponent {
     let cleanedAttrs: Record<string, any>
 
     if (this.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 = this.color
+      }
     } else {
       // Track color attributes to determine icon type
       let hasFill = false

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

@@ -7,6 +7,7 @@ export interface Props {
   strokeWidth?: number | string
   class?: string
   title?: string
+  viewBox?: string
   'aria-label'?: string
   'aria-hidden'?: boolean | 'true' | 'false'
 }
@@ -21,6 +22,7 @@ const {
   strokeWidth = 2,
   class: className,
   title,
+  viewBox = '{{viewBox}}',
   'aria-label': ariaLabel,
   'aria-hidden': ariaHidden,
   ...props
@@ -39,7 +41,15 @@ function renderNode(node: IconNode): any {
   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
@@ -90,7 +100,7 @@ const processedNodes = iconNode.map(renderNode)
 <svg
   width={size}
   height={size}
-  viewBox="0 0 24 24"
+  viewBox={viewBox}
   aria-hidden={shouldHide}
   aria-label={ariaLabel}
   role={title || ariaLabel ? 'img' : undefined}

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

@@ -7,6 +7,7 @@ export interface Props {
   strokeWidth?: number | string
   class?: string
   title?: string
+  viewBox?: string
   'aria-label'?: string
   'aria-hidden'?: boolean | 'true' | 'false'
 }
@@ -22,6 +23,7 @@ const {
   strokeWidth = 2,
   class: className,
   title,
+  viewBox = '0 0 24 24',
   'aria-label': ariaLabel,
   'aria-hidden': ariaHidden,
   iconNode,
@@ -40,7 +42,15 @@ function renderNode(node: IconNode): any {
   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
@@ -91,7 +101,7 @@ const processedNodes = iconNode.map(renderNode)
 <svg
   width={size}
   height={size}
-  viewBox="0 0 24 24"
+  viewBox={viewBox}
   aria-hidden={shouldHide}
   aria-label={ariaLabel}
   role={title || ariaLabel ? 'img' : undefined}

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

@@ -9,4 +9,5 @@ export const iconNode = [
 export class {{componentName}} extends IconBase {
   iconNode = iconNode
   keepColors = {{keepColors}}
+  viewBox = '{{viewBox}}'
 }

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

@@ -10,6 +10,7 @@ export const iconNode: IconNode[] = [
 export class {{componentName}} extends IconBase {
   iconNode = iconNode
   keepColors = {{keepColors}}
+  viewBox = '{{viewBox}}'
 }
 
 declare global {

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

@@ -7,6 +7,7 @@ export class IconBase extends LitElement {
     color: { type: String },
     strokeWidth: { type: Number },
     title: { type: String },
+    viewBox: { type: String },
     ariaLabel: { type: String },
     ariaHidden: { type: Boolean }
   }
@@ -17,6 +18,7 @@ export class IconBase extends LitElement {
     this.color = 'currentColor'
     this.strokeWidth = 2
     this.title = ''
+    this.viewBox = '0 0 24 24'
     this.ariaLabel = ''
     this.ariaHidden = false
   }
@@ -34,7 +36,15 @@ export class IconBase extends LitElement {
     let cleanedAttrs
 
     if (this.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 = this.color
+      }
     } else {
       // Track color attributes
       let hasFill = false
@@ -84,7 +94,7 @@ export class IconBase extends LitElement {
       <svg
         width="${this.size}"
         height="${this.size}"
-        viewBox="0 0 24 24"
+        viewBox="${this.viewBox}"
         class="vectify-icon"
         aria-hidden="${shouldHide}"
         aria-label="${this.ariaLabel || undefined}"

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

@@ -7,6 +7,7 @@ export interface IconOptions {
   color?: string
   strokeWidth?: number | string
   title?: string
+  viewBox?: string
   ariaLabel?: string
   ariaHidden?: boolean
 }
@@ -16,6 +17,7 @@ export abstract class IconBase extends LitElement {
   @property({ type: String }) color = 'currentColor'
   @property({ type: Number }) strokeWidth = 2
   @property({ type: String }) title = ''
+  @property({ type: String }) viewBox = '0 0 24 24'
   @property({ type: String }) ariaLabel = ''
   @property({ type: Boolean }) ariaHidden = false
 
@@ -35,7 +37,15 @@ export abstract class IconBase extends LitElement {
     let cleanedAttrs: Record<string, any>
 
     if (this.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 = this.color
+      }
     } else {
       // Track color attributes
       let hasFill = false
@@ -85,7 +95,7 @@ export abstract class IconBase extends LitElement {
       <svg
         width="${this.size}"
         height="${this.size}"
-        viewBox="0 0 24 24"
+        viewBox="${this.viewBox}"
         class="vectify-icon"
         aria-hidden="${shouldHide}"
         aria-label="${this.ariaLabel || undefined}"

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

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

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

@@ -7,5 +7,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/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}