mirror_html/tabler-icons
1
0
Fork 0
mirror of https://github.com/tabler/tabler-icons.git synced 2025-01-17 04:38:28 +01:00
Code Issues Releases Wiki Activity

Unit tests update (#1036)

Browse Source
This commit is contained in:
Paweł Kuna 2024-03-11 20:34:58 +01:00 committed by GitHub
parent acd82d64f6
commit d7467343a2
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
14 changed files with 199 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
packages/icons-preact/src/createPreactComponent.ts
View File

@ -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}`;

48
packages/icons-preact/test.spec.jsx
View File

@ -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("stroke-width")).toBe("4")
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 +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>
<path d="M10 12l3 0">
</path>
<path d="M17 16v-6a2 2 0 0 1 4 0v6">
</path>
<path d="M17 13l4 0">
<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>
`)
})

1
packages/icons-react-native/package.json
View File

@ -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": {

10
packages/icons-react/src/createReactComponent.ts
View File

@ -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,
},
[

44
packages/icons-react/test.spec.jsx
View File

@ -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>
<path d="M10 12l3 0">
</path>
<path d="M17 16v-6a2 2 0 0 1 4 0v6">
</path>
<path d="M17 13l4 0">
<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>
`)
})

12
packages/icons-solidjs/src/createSolidComponent.ts
View File

@ -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),
'stroke-width': () =>
localProps.stroke != null ? localProps.stroke : attributes['stroke-width'],
...(type === 'filled'
? {
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 : ''}`,
};

42
packages/icons-solidjs/test.spec.jsx
View File

@ -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>
<path d="M10 12l3 0">
</path>
<path d="M17 16v-6a2 2 0 0 1 4 0v6">
</path>
<path d="M17 13l4 0">
<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>
`)
})

22
packages/icons-svelte/src/Icon.svelte
View File

@ -1,12 +1,12 @@
<script lang="ts">
import defaultAttributes from "./defaultAttributes";
import type { IconNode } from "./types";
import defaultAttributes from './defaultAttributes';
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}
stroke-width={strokeWidth}
class={`tabler-icon tabler-icon-${name} ${$$props.class ?? ""}`}
class={`tabler-icon tabler-icon-${name} ${$$props.class ?? ''}`}
{...type === 'filled'
? {
fill: color,
}
: {
'stroke-width': stroke,
stroke: color,
}}
>
{#each iconNode as [tag, attrs]}
<svelte:element this={tag} {...attrs} />

3
packages/icons-svelte/src/defaultAttributes.ts
View File

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

2
packages/icons-svelte/src/types.ts
View File

@ -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;
}

49
packages/icons-svelte/test.spec.js
View File

@ -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>
<path d="M10 12l3 0">
</path>
<path d="M17 16v-6a2 2 0 0 1 4 0v6">
</path>
<path d="M17 13l4 0">
<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>
</div>
`);

24
packages/icons-vue/src/createVueComponent.ts
View File

@ -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 }) => {
const attributes = defaultAttributes[type];
({ size, color, class: classes, stroke, ...rest }, { attrs, slots }) => {
return h(
'svg',
{
...attributes,
width: size || attributes.width,
height: size || attributes.height,
stroke: color || attributes.stroke,
'stroke-width': strokeWidth || attributes['stroke-width'],
...defaultAttributes[type],
width: size,
height: size,
...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()] : [])],
);

1
packages/icons-vue/src/defaultAttributes.ts
View File

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

39
packages/icons-vue/test.spec.js
View File

@ -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);
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>"`)
const { container } = render(IconAccessible);
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>"`)
})
})