Unit tests update (#1036)

packages/icons-preact/src/createPreactComponent.ts

@@ -6,7 +6,7 @@ const createPreactComponent = (
   type: 'outline' | 'filled',
   iconName: string,
   iconNamePascal: string,
-  iconNode: IconNode
+  iconNode: IconNode,
 ): Icon => {
   const Component = ({
     color = 'currentColor',
@@ -23,13 +23,19 @@ const createPreactComponent = (
         ...defaultAttributes[type],
         width: String(size),
         height: size,
-        stroke: color,
-        'stroke-width': stroke,
         class: [`tabler-icon`, `tabler-icon-${iconName}`, className].join(' '),
+        ...(type === 'filled'
+          ? {
+              fill: color,
+            }
+          : {
+              'stroke-width': stroke,
+              stroke: color,
+            }),
         style,
       },
       [...iconNode.map(([tag, attrs]) => h(tag, attrs)), ...toChildArray(children)],
-      ...[rest]
+      ...[rest],
     );
 
   Component.displayName = `${iconNamePascal}`;

packages/icons-preact/test.spec.jsx

@@ -1,6 +1,6 @@
 import { describe, it, expect } from 'vitest';
 import { render, cleanup } from '@testing-library/preact'
-import { Icon2fa } from "./src/tabler-icons-preact"
+import { IconAccessible, IconAccessibleFilled } from "./src/tabler-icons-preact"
 
 describe("Preact Icon component", () => {
   afterEach(() => {
@@ -8,33 +8,45 @@ describe("Preact Icon component", () => {
   });
 
   it("should render icon component", () => {
-    const { container } = render(<Icon2fa/>)
+    const { container } = render(<IconAccessible/>)
     expect(container.getElementsByTagName("svg").length).toBeGreaterThan(0)
   })
 
   it("should update svg attributes when there are props passed to the component", () => {
-    const { container } = render(<Icon2fa size={48} color={"red"} stroke={4}/>)
+    const { container } = render(<IconAccessible size={48} color={"red"} stroke={4}/>)
+    const svg = container.getElementsByTagName("svg")[0]
 
+    console.log(svg.outerHTML)
+
+    expect(svg.getAttribute("width")).toBe("48")
+    expect(svg.getAttribute("fill")).toBe("none")
+    expect(svg.getAttribute("stroke")).toBe("red")
+    expect(svg.getAttribute("stroke-width")).toBe("4")
+  })
+
+  it("should update svg attributes when there are props passed to the filled version of component", () => {
+    const { container } = render(<IconAccessibleFilled size={48} color={"red"}/>)
     const svg = container.getElementsByTagName("svg")[0]
 
     expect(svg.getAttribute("width")).toBe("48")
-    expect(svg.getAttribute("stroke")).toBe("red")
+    expect(svg.getAttribute("fill")).toBe("red")
-    expect(svg.getAttribute("stroke-width")).toBe("4")
+    expect(svg.getAttribute("stroke")).toBe("none")
+    expect(svg.getAttribute("stroke-width")).toBe(null)
   })
 
   it('should apply all classNames to the element', () => {
     const testClass = 'test-class';
     const { container } = render(
-      <Icon2fa className={testClass} />,
+      <IconAccessible className={testClass} />,
     );
 
     expect(container.firstChild).toHaveClass(testClass);
     expect(container.firstChild).toHaveClass('tabler-icon');
-    expect(container.firstChild).toHaveClass('tabler-icon-2fa');
+    expect(container.firstChild).toHaveClass('tabler-icon-accessible');
   });
 
   it('should add a style attribute to the element', () => {
-    const { container } = render(<Icon2fa style={{ color: "red" }}/>)
+    const { container } = render(<IconAccessible style={{ color: "red" }}/>)
 
     const svg = container.getElementsByTagName("svg")[0]
 
@@ -42,7 +54,7 @@ describe("Preact Icon component", () => {
   })
 
   it("should match snapshot", () => {
-    const { container } = render(<Icon2fa/>)
+    const { container } = render(<IconAccessible/>)
     expect(container.innerHTML).toMatchInlineSnapshot(`
       <svg xmlns="http://www.w3.org/2000/svg"
            width="24"
@@ -53,18 +65,18 @@ describe("Preact Icon component", () => {
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
-           class="tabler-icon tabler-icon-2fa "
+           class="tabler-icon tabler-icon-accessible "
       >
-        <path d="M7 16h-4l3.47 -4.66a2 2 0 1 0 -3.47 -1.54">
+        <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0">
         </path>
-        <path d="M10 16v-8h4">
+        <path d="M10 16.5l2 -3l2 3m-2 -3v-2l3 -1m-6 0l3 1">
-        </path>
-        <path d="M10 12l3 0">
-        </path>
-        <path d="M17 16v-6a2 2 0 0 1 4 0v6">
-        </path>
-        <path d="M17 13l4 0">
         </path>
+        <circle cx="12"
+                cy="7.5"
+                r=".5"
+                fill="currentColor"
+        >
+        </circle>
       </svg>
     `)
   })

packages/icons-react-native/package.json

@@ -35,7 +35,6 @@
     "build:bundles": "rollup -c ./rollup.config.mjs",
     "copy:license": "cp ../../LICENSE ./LICENSE",
     "clean": "rm -rf dist && find . ! -name '.gitkeep' -path '*/src/icons/*' -exec rm -rf {} +",
-    "test": "vitest run",
     "typecheck": "tsc"
   },
   "dependencies": {

packages/icons-react/src/createReactComponent.ts

@@ -17,9 +17,15 @@ const createReactComponent = (
           ...defaultAttributes[type],
           width: size,
           height: size,
-          stroke: color,
-          strokeWidth: stroke,
           className: [`tabler-icon`, `tabler-icon-${iconName}`, className].join(' '),
+          ...(type === 'filled'
+            ? {
+                fill: color,
+              }
+            : {
+                strokeWidth: stroke,
+                stroke: color,
+              }),
           ...rest,
         },
         [

packages/icons-react/test.spec.jsx

@@ -1,6 +1,6 @@
 import { describe, it, expect } from 'vitest';
 import { render, cleanup } from '@testing-library/react'
-import { Icon2fa } from "./src/tabler-icons-react"
+import { IconAccessible, IconAccessibleFilled } from "./src/tabler-icons-react"
 
 describe("React Icon component", () => {
   afterEach(() => {
@@ -8,33 +8,43 @@ describe("React Icon component", () => {
   });
 
   it("should render icon component", () => {
-    const { container } = render(<Icon2fa/>)
+    const { container } = render(<IconAccessible/>)
     expect(container.getElementsByTagName("svg").length).toBeGreaterThan(0)
   })
 
   it("should update svg attributes when there are props passed to the component", () => {
-    const { container } = render(<Icon2fa size={48} color={"red"} strokeWidth={4}/>)
+    const { container } = render(<IconAccessible size={48} color={"red"} stroke={4}/>)
-
     const svg = container.getElementsByTagName("svg")[0]
 
     expect(svg.getAttribute("width")).toBe("48")
     expect(svg.getAttribute("stroke")).toBe("red")
     expect(svg.getAttribute("stroke-width")).toBe("4")
+    expect(svg.getAttribute("fill")).toBe("none")
+  })
+
+  it("should update svg attributes when there are props passed to the filled version of component", () => {
+    const { container } = render(<IconAccessibleFilled size={48} color={"red"}/>)
+    const svg = container.getElementsByTagName("svg")[0]
+
+    expect(svg.getAttribute("width")).toBe("48")
+    expect(svg.getAttribute("fill")).toBe("red")
+    expect(svg.getAttribute("stroke")).toBe("none")
+    expect(svg.getAttribute("stroke-width")).toBe(null)
   })
 
   it('should apply all classNames to the element', () => {
     const testClass = 'test-class';
     const { container } = render(
-      <Icon2fa className={testClass} />,
+      <IconAccessible className={testClass} />,
     );
 
     expect(container.firstChild).toHaveClass(testClass);
     expect(container.firstChild).toHaveClass('tabler-icon');
-    expect(container.firstChild).toHaveClass('tabler-icon-2fa');
+    expect(container.firstChild).toHaveClass('tabler-icon-accessible');
   });
 
   it('should add a style attribute to the element', () => {
-    const { container } = render(<Icon2fa style={{ color: "red" }}/>)
+    const { container } = render(<IconAccessible style={{ color: "red" }}/>)
 
     const svg = container.getElementsByTagName("svg")[0]
 
@@ -42,7 +52,7 @@ describe("React Icon component", () => {
   })
 
   it("should match snapshot", () => {
-    const { container } = render(<Icon2fa/>)
+    const { container } = render(<IconAccessible/>)
     expect(container.innerHTML).toMatchInlineSnapshot(`
       <svg xmlns="http://www.w3.org/2000/svg"
            width="24"
@@ -53,18 +63,18 @@ describe("React Icon component", () => {
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
-           class="tabler-icon tabler-icon-2fa "
+           class="tabler-icon tabler-icon-accessible "
       >
-        <path d="M7 16h-4l3.47 -4.66a2 2 0 1 0 -3.47 -1.54">
+        <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0">
         </path>
-        <path d="M10 16v-8h4">
+        <path d="M10 16.5l2 -3l2 3m-2 -3v-2l3 -1m-6 0l3 1">
-        </path>
-        <path d="M10 12l3 0">
-        </path>
-        <path d="M17 16v-6a2 2 0 0 1 4 0v6">
-        </path>
-        <path d="M17 13l4 0">
         </path>
+        <circle cx="12"
+                cy="7.5"
+                r=".5"
+                fill="currentColor"
+        >
+        </circle>
       </svg>
     `)
   })

packages/icons-solidjs/src/createSolidComponent.ts

@@ -12,9 +12,15 @@ const createSolidComponent = (type: 'outline' | 'filled',iconName: string, iconN
       ...attributes,
       width: () => (localProps.size != null ? localProps.size : attributes.width),
       height: () => (localProps.size != null ? localProps.size : attributes.height),
-      stroke: () => (localProps.color != null ? localProps.color : attributes.stroke),
+      ...(type === 'filled'
-      'stroke-width': () =>
+        ? {
-        localProps.stroke != null ? localProps.stroke : attributes['stroke-width'],
+            fill: () => (localProps.color != null ? localProps.color : attributes.stroke),
+          }
+        : {
+            stroke: () => (localProps.color != null ? localProps.color : attributes.stroke),
+            'stroke-width': () =>
+              localProps.stroke != null ? localProps.stroke : attributes['stroke-width'],
+          }),
       class: () =>
         `tabler-icon tabler-icon-${iconName} ${localProps.class != null ? localProps.class : ''}`,
     };

packages/icons-solidjs/test.spec.jsx

@@ -1,17 +1,17 @@
 import { describe, it, expect } from 'vitest';
 import { render, cleanup } from '@solidjs/testing-library'
-import { Icon2fa } from "./src/tabler-icons-solidjs"
+import { IconAccessible, IconAccessibleFilled } from "./src/tabler-icons-solidjs"
 
 describe("Solidjs Icon component", () => {
   afterEach(() => cleanup())
 
   test("should render icon component", () => {
-    const { container } = render(() => <Icon2fa />)
+    const { container } = render(() => <IconAccessible />)
     expect(container.getElementsByTagName("svg").length).toBeGreaterThan(0);
   })
 
   test("should update svg attributes when there are props passed to the component", () => {
-    const { container } = render(() => <Icon2fa size={48} color="red" stroke-width="4" />)
+    const { container } = render(() => <IconAccessible size={48} color="red" stroke="4" />)
 
     const svg = container.getElementsByTagName("svg")[0]
 
@@ -20,18 +20,28 @@ describe("Solidjs Icon component", () => {
     expect(svg.getAttribute("stroke-width")).toBe("4")
   })
 
+  it("should update svg attributes when there are props passed to the filled version of component", () => {
+    const { container } = render(() => <IconAccessibleFilled size={48} color="red" />)
+    const svg = container.getElementsByTagName("svg")[0]
+
+    expect(svg.getAttribute("width")).toBe("48")
+    expect(svg.getAttribute("fill")).toBe("red")
+    expect(svg.getAttribute("stroke")).toBe("none")
+    expect(svg.getAttribute("stroke-width")).toBe(null)
+  })
+
   it('should add a class to the element', () => {
-    const { container } = render(() => <Icon2fa class="test-class" />)
+    const { container } = render(() => <IconAccessible class="test-class" />)
 
     const svg = container.getElementsByTagName("svg")[0]
 
     expect(svg).toHaveClass('test-class')
     expect(svg).toHaveClass('tabler-icon')
-    expect(svg).toHaveClass('tabler-icon-2fa')
+    expect(svg).toHaveClass('tabler-icon-accessible')
   })
 
   it('should add a style attribute to the element', () => {
-    const { container } = render(() => <Icon2fa style="color: red" />)
+    const { container } = render(() => <IconAccessible style="color: red" />)
 
     const svg = container.getElementsByTagName("svg")[0]
 
@@ -39,7 +49,7 @@ describe("Solidjs Icon component", () => {
   })
 
   test("should match snapshot", () => {
-    const { container } = render(() => <Icon2fa />)
+    const { container } = render(() => <IconAccessible />)
     expect(container.innerHTML).toMatchInlineSnapshot(`
       <svg xmlns="http://www.w3.org/2000/svg"
            width="24"
@@ -50,18 +60,18 @@ describe("Solidjs Icon component", () => {
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
-           class="tabler-icon tabler-icon-2fa "
+           class="tabler-icon tabler-icon-accessible "
       >
-        <path d="M7 16h-4l3.47 -4.66a2 2 0 1 0 -3.47 -1.54">
+        <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0">
         </path>
-        <path d="M10 16v-8h4">
+        <path d="M10 16.5l2 -3l2 3m-2 -3v-2l3 -1m-6 0l3 1">
-        </path>
-        <path d="M10 12l3 0">
-        </path>
-        <path d="M17 16v-6a2 2 0 0 1 4 0v6">
-        </path>
-        <path d="M17 13l4 0">
         </path>
+        <circle cx="12"
+                cy="7.5"
+                r=".5"
+                fill="currentColor"
+        >
+        </circle>
       </svg>
     `)
   })

packages/icons-svelte/src/Icon.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
-  import defaultAttributes from "./defaultAttributes";
+  import defaultAttributes from './defaultAttributes';
-  import type { IconNode } from "./types";
+  import type { IconNode } from './types';
 
-  export let type: "outline" | "filled";
+  export let type: 'outline' | 'filled';
   export let name: string;
-  export let color: string = "currentColor";
+  export let color: string = 'currentColor';
   export let size: number | string = 24;
-  export let strokeWidth: number | string = 2;
+  export let stroke: number | string = 2;
   export let iconNode: IconNode;
 </script>
 
@@ -15,9 +15,15 @@
   {...$$restProps}
   width={size}
   height={size}
-  stroke={color}
+  class={`tabler-icon tabler-icon-${name} ${$$props.class ?? ''}`}
-  stroke-width={strokeWidth}
+  {...type === 'filled'
-  class={`tabler-icon tabler-icon-${name} ${$$props.class ?? ""}`}
+    ? {
+        fill: color,
+      }
+    : {
+        'stroke-width': stroke,
+        stroke: color,
+      }}
 >
   {#each iconNode as [tag, attrs]}
     <svelte:element this={tag} {...attrs} />

packages/icons-svelte/src/defaultAttributes.ts

@@ -18,8 +18,7 @@ const defaultAttributes: Record<"outline" | "filled", Attrs> = {
     height: 24,
     viewBox: '0 0 24 24',
     fill: 'currentColor',
-    stroke: 'none',
+    stroke: 'none'
-    'stroke-width': 0,
   },
 };
 

packages/icons-svelte/src/types.ts

@@ -8,7 +8,7 @@ export type IconNode = [elementName: keyof SvelteHTMLElements, attrs: Attrs][];
 export interface IconProps extends Attrs {
   color?: string;
   size?: number | string;
-  strokeWidth?: number | string;
+  stroke?: number | string;
   class?: string;
 }
 

packages/icons-svelte/test.spec.js

@@ -1,17 +1,17 @@
 import { describe, it, expect, afterEach } from 'vitest';
 import { render, cleanup } from "@testing-library/svelte";
-import { Icon2fa } from "./src/tabler-icons-svelte";
+import { IconAccessible, IconAccessibleFilled } from "./src/tabler-icons-svelte";
 
 describe("Svelte Icon component", () => {
   afterEach(() => cleanup())
 
   it("should render icon component", () => {
-    const { container } = render(Icon2fa);
+    const { container } = render(IconAccessible);
     expect(container.getElementsByTagName("svg").length).toBeGreaterThan(0);
   });
 
   it('should add a class to the element', () => {
-    const { container } = render(Icon2fa, {
+    const { container } = render(IconAccessible, {
       props: {
         class: 'test-class',
       },
@@ -21,11 +21,11 @@ describe("Svelte Icon component", () => {
 
     expect(svg).toHaveClass('test-class')
     expect(svg).toHaveClass('tabler-icon')
-    expect(svg).toHaveClass('tabler-icon-2fa')
+    expect(svg).toHaveClass('tabler-icon-accessible')
   })
 
   it('should add a style attribute to the element', () => {
-    const { container } = render(Icon2fa, {
+    const { container } = render(IconAccessible, {
       props: {
         style: 'color: red',
       },
@@ -37,10 +37,10 @@ describe("Svelte Icon component", () => {
   })
 
   it("should update svg attributes when there are props passed to the component", () => {
-    const { container } = render(Icon2fa, {
+    const { container } = render(IconAccessible, {
       size: 48,
       color: "red",
-      strokeWidth: 4,
+      stroke: 4,
     });
 
     const svg = container.getElementsByTagName("svg")[0];
@@ -50,8 +50,23 @@ describe("Svelte Icon component", () => {
     expect(svg.getAttribute("stroke-width")).toBe("4");
   });
 
+  it("should update svg attributes when there are props passed to the filled version of component", () => {
+    const { container } = render(IconAccessibleFilled, {
+      props: {
+        size: 48,
+        color: "red"
+      },
+    })
+    const svg = container.getElementsByTagName("svg")[0]
+
+    expect(svg.getAttribute("width")).toBe("48")
+    expect(svg.getAttribute("fill")).toBe("red")
+    expect(svg.getAttribute("stroke")).toBe("none")
+    expect(svg.getAttribute("stroke-width")).toBe(null)
+  })
+
   it("should match snapshot", () => {
-    const { container } = render(Icon2fa);
+    const { container } = render(IconAccessible);
     expect(container.innerHTML).toMatchInlineSnapshot(`
       <div>
         <svg xmlns="http://www.w3.org/2000/svg"
@@ -63,18 +78,18 @@ describe("Svelte Icon component", () => {
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
-             class="tabler-icon tabler-icon-2fa "
+             class="tabler-icon tabler-icon-accessible "
         >
-          <path d="M7 16h-4l3.47 -4.66a2 2 0 1 0 -3.47 -1.54">
+          <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0">
           </path>
-          <path d="M10 16v-8h4">
+          <path d="M10 16.5l2 -3l2 3m-2 -3v-2l3 -1m-6 0l3 1">
-          </path>
-          <path d="M10 12l3 0">
-          </path>
-          <path d="M17 16v-6a2 2 0 0 1 4 0v6">
-          </path>
-          <path d="M17 13l4 0">
           </path>
+          <circle cx="12"
+                  cy="7.5"
+                  r=".5"
+                  fill="currentColor"
+          >
+          </circle>
         </svg>
       </div>
     `);

packages/icons-vue/src/createVueComponent.ts

@@ -1,6 +1,6 @@
 import { h } from 'vue';
 import defaultAttributes from './defaultAttributes';
-import { Icon, IconNode } from './types';
+import type { Icon, IconNode } from './types';
 
 const createVueComponent =
   (
@@ -9,20 +9,24 @@ const createVueComponent =
     iconNamePascal: string,
     iconNode: IconNode,
   ): Icon =>
-  ({ size, color, class: classes, strokeWidth, ...props }, { attrs, slots }) => {
+  ({ size, color, class: classes, stroke, ...rest }, { attrs, slots }) => {
-    const attributes = defaultAttributes[type];
-
     return h(
       'svg',
       {
-        ...attributes,
+        ...defaultAttributes[type],
-        width: size || attributes.width,
+        width: size,
-        height: size || attributes.height,
+        height: size,
-        stroke: color || attributes.stroke,
-        'stroke-width': strokeWidth || attributes['stroke-width'],
         ...attrs,
         class: ['tabler-icon', `tabler-icon-${iconName}`],
-        ...props,
+        ...(type === 'filled'
+          ? {
+              fill: color,
+            }
+          : {
+              'stroke-width': stroke,
+              stroke: color,
+            }),
+        ...rest,
       },
       [...iconNode.map((child) => h(...child)), ...(slots.default ? [slots.default()] : [])],
     );

packages/icons-vue/src/defaultAttributes.ts

@@ -17,6 +17,5 @@ export default {
     viewBox: '0 0 24 24',
     fill: 'currentColor',
     stroke: 'none',
-    'stroke-width': 0,
   },
 };

packages/icons-vue/test.spec.js

@@ -1,17 +1,17 @@
 import { describe, it, expect, vi, afterEach } from 'vitest';
 import { render, fireEvent, cleanup } from "@testing-library/vue"
-import { Icon2fa } from "./src/tabler-icons-vue.ts"
+import { IconAccessible, IconAccessibleFilled } from "./src/tabler-icons-vue.ts"
 
 describe("Vue Icon component", () => {
   afterEach(() => cleanup())
 
   it("should render icon component", () => {
-    const { container } = render(Icon2fa)
+    const { container } = render(IconAccessible)
     expect(container.getElementsByTagName("svg").length).toBeGreaterThan(0);
   })
 
   it('should add a class to the element', () => {
-    const { container } = render(Icon2fa, {
+    const { container } = render(IconAccessible, {
       props: {
         class: 'test-class',
       },
@@ -21,11 +21,11 @@ describe("Vue Icon component", () => {
 
     expect(svg).toHaveClass('test-class')
     expect(svg).toHaveClass('tabler-icon')
-    expect(svg).toHaveClass('tabler-icon-2fa')
+    expect(svg).toHaveClass('tabler-icon-accessible')
   })
 
   it('should add a style attribute to the element', () => {
-    const { container } = render(Icon2fa, {
+    const { container } = render(IconAccessible, {
       props: {
         style: 'color: red',
       },
@@ -37,11 +37,11 @@ describe("Vue Icon component", () => {
   })
 
   it("should update svg attributes when there are props passed to the component", () => {
-    const { container } = render(Icon2fa, {
+    const { container } = render(IconAccessible, {
       props: {
         size: 48,
         color: "red",
-        "stroke-width": 4,
+        "stroke": 4,
       },
     })
 
@@ -52,9 +52,24 @@ describe("Vue Icon component", () => {
     expect(svg.getAttribute("stroke-width")).toBe("4")
   })
 
+  it("should update svg attributes when there are props passed to the filled version of component", () => {
+    const { container } = render(IconAccessibleFilled, {
+      props: {
+        size: 48,
+        color: "red"
+      },
+    })
+    const svg = container.getElementsByTagName("svg")[0]
+
+    expect(svg.getAttribute("width")).toBe("48")
+    expect(svg.getAttribute("fill")).toBe("red")
+    expect(svg.getAttribute("stroke")).toBe("none")
+    expect(svg.getAttribute("stroke-width")).toBe(null)
+  })
+
   it('should call the onClick event', async () => {
     const onClick = vi.fn()
-    const { container } = render(Icon2fa, {
+    const { container } = render(IconAccessible, {
       attrs: {
         onClick,
       }
@@ -73,7 +88,7 @@ describe("Vue Icon component", () => {
       name: 'Stub',
       template: `<text>${testText}</text>`
     }
-    const { getByText, container } = render(Icon2fa, {
+    const { getByText, container } = render(IconAccessible, {
       slots: {
         default: template
       }
@@ -82,11 +97,11 @@ describe("Vue Icon component", () => {
     const textElement = getByText(testText)
 
     expect(textElement).toBeInTheDocument()
-    expect(container.innerHTML).toMatchInlineSnapshot(`"<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-2fa"><path d="M7 16h-4l3.47 -4.66a2 2 0 1 0 -3.47 -1.54"></path><path d="M10 16v-8h4"></path><path d="M10 12l3 0"></path><path d="M17 16v-6a2 2 0 0 1 4 0v6"></path><path d="M17 13l4 0"></path><text>Hello World</text></svg>"`);
+    expect(container.innerHTML).toMatchInlineSnapshot(`"<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-accessible"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M10 16.5l2 -3l2 3m-2 -3v-2l3 -1m-6 0l3 1"></path><circle cx="12" cy="7.5" r=".5" fill="currentColor"></circle><text>Hello World</text></svg>"`);
   });
 
   it("should match snapshot", () => {
-    const { container } = render(Icon2fa);
+    const { container } = render(IconAccessible);
-    expect(container.innerHTML).toMatchInlineSnapshot(`"<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-2fa"><path d="M7 16h-4l3.47 -4.66a2 2 0 1 0 -3.47 -1.54"></path><path d="M10 16v-8h4"></path><path d="M10 12l3 0"></path><path d="M17 16v-6a2 2 0 0 1 4 0v6"></path><path d="M17 13l4 0"></path></svg>"`)
+    expect(container.innerHTML).toMatchInlineSnapshot(`"<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-accessible"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M10 16.5l2 -3l2 3m-2 -3v-2l3 -1m-6 0l3 1"></path><circle cx="12" cy="7.5" r=".5" fill="currentColor"></circle></svg>"`)
   })
 })