Add title to icon's <svg> as child tag in React, Vue.js and React Native (#1147)

* Add title as child tag of <svg> in icons-react

* Add title as child tag of <svg> in icons-vue package

* Add title as child tag of <svg> in icons-react-native package

* Test <title> element in React

* Prevent adding <!----> to <svg> if no title prop passed

+ Test <title> child element.

* Fix tests for Vue

Stroke attribute added to expected SVG code.

---------

Co-authored-by: Bartłomiej Gawęda <bgaweda@abis.krakow.pl>

packages/icons-react-native/src/createReactNativeComponent.ts

@@ -10,7 +10,7 @@ const createReactNativeComponent = (
   iconNode: IconNode,
 ): Icon => {
   const Component = forwardRef<SVGSVGElement, IconProps>(
-    ({ color = 'currentColor', size = 24, strokeWidth = 2, children, ...rest }: IconProps, ref) => {
+    ({ color = 'currentColor', size = 24, strokeWidth = 2, title, children, ...rest }: IconProps, ref) => {
       const customAttrs = {
         stroke: color,
         strokeWidth,
@@ -37,7 +37,10 @@ const createReactNativeComponent = (
               { ...childDefaultAttributes[type], ...customAttrs, ...attrs } as IconProps,
             );
           }),
-          ...((Array.isArray(children) ? children : [children]) || []),
+          [
+            title && createElement('title', { key: 'svg-title' }, title),
+            ...((Array.isArray(children) ? children : [children]) || [])
+          ],
         ],
       );
     },

packages/icons-react-native/src/types.ts

@@ -10,6 +10,7 @@ export type SVGAttributes = Partial<SVGProps<SVGSVGElement>>;
 export interface IconProps extends SvgProps {
   size?: string | number;
   strokeWidth?: string | number;
+  title?: string;
 }
 
 export type Icon = ForwardRefExoticComponent<IconProps>;

packages/icons-react/src/createReactComponent.ts

@@ -10,7 +10,7 @@ const createReactComponent = (
 ) => {
   const Component = forwardRef<Icon, IconProps>(
     (
-      { color = 'currentColor', size = 24, stroke = 2, className, children, ...rest }: IconProps,
+      { color = 'currentColor', size = 24, stroke = 2, title, className, children, ...rest }: IconProps,
       ref,
     ) =>
       createElement(
@@ -32,6 +32,7 @@ const createReactComponent = (
           ...rest,
         },
         [
+          title && createElement('title', { key: 'svg-title' }, title),
           ...iconNode.map(([tag, attrs]) => createElement(tag, attrs)),
           ...(Array.isArray(children) ? children : [children]),
         ],

packages/icons-react/src/types.ts

@@ -7,6 +7,7 @@ export type IconNode = [elementName: keyof ReactSVG, attrs: Record<string, strin
 export interface IconProps extends Partial<Omit<React.ComponentPropsWithoutRef<'svg'>, 'stroke'>> {
   size?: string | number;
   stroke?: string | number;
+  title?: string;
 }
 
 export type Icon = FunctionComponent<IconProps>;

packages/icons-react/test.spec.tsx

@@ -1,8 +1,6 @@
-import { describe, it, expect, afterEach, assertType, expectTypeOf } from 'vitest';
+import { describe, it, expect, afterEach, expectTypeOf } from 'vitest';
 import { render, cleanup } from '@testing-library/react'
 import { IconAccessible, IconAccessibleFilled, createReactComponent } from "./src/tabler-icons-react"
-import type { IconNode } from './src/tabler-icons-react';
-import { ReactNode } from 'react';
 
 describe("React Icon component", () => {
   afterEach(() => {
@@ -58,6 +56,14 @@ describe("React Icon component", () => {
     expectTypeOf(IconAccessible).toEqualTypeOf(createReactComponent('outline', 'accessible', 'Accessible', []));
   });
 
+  it('should add title child element to svg when title prop is passed', () => {
+    const { container } = render(<IconAccessible title="Accessible Icon"/>);
+    const svg = container.getElementsByTagName("svg")[0];
+    const title = svg.getElementsByTagName("title")[0];
+
+    expect(title).toHaveTextContent("Accessible Icon");
+  })
+
   it("should match snapshot", () => {
     const { container } = render(<IconAccessible/>)
     expect(container.innerHTML).toMatchInlineSnapshot(`

packages/icons-vue/src/createVueComponent.ts

@@ -9,7 +9,9 @@ const createVueComponent =
     iconNamePascal: string,
     iconNode: IconNode,
   ): Icon =>
-  ({ size, color = 'currentColor', class: classes, stroke, ...rest }: IconProps, { attrs, slots }) => {
+  ({ color = 'currentColor', size, stroke, title, class: classes, ...rest }: IconProps, { attrs, slots }) => {
+    let children = [...iconNode.map((child) => h(...child)), ...(slots.default ? [slots.default()] : [])];
+    if (title) children = [h('title', title), ...children];
     return h(
       'svg',
       {
@@ -28,7 +30,7 @@ const createVueComponent =
             }),
         ...rest,
       },
-      [...iconNode.map((child) => h(...child)), ...(slots.default ? [slots.default()] : [])],
+      children,
     );
   };
 

packages/icons-vue/src/types.ts

@@ -11,4 +11,5 @@ export type Icon = FunctionalComponent<SVGProps>;
 export interface IconProps extends Partial<Omit<SVGProps, 'stroke'>> {
   size?: string | number;
   stroke?: string | number;
+  title?: string;
 }

packages/icons-vue/test.spec.js

@@ -67,6 +67,20 @@ describe("Vue Icon component", () => {
     expect(svg.getAttribute("stroke-width")).toBe(null)
   })
 
+  it('should add title child element to svg when title prop is passed', () => {
+    const { container } = render(IconAccessible, {
+      props: {
+        title: 'Test Title',
+      }
+    })
+
+    const svg = container.getElementsByTagName("svg")[0]
+    const title = container.getElementsByTagName("title")[0]
+
+    expect(title).toHaveTextContent('Test Title')
+    expect(svg).toContainElement(title)
+  })
+
   it('should call the onClick event', async () => {
     const onClick = vi.fn()
     const { container } = render(IconAccessible, {
@@ -97,11 +111,11 @@ describe("Vue Icon component", () => {
     const textElement = getByText(testText)
 
     expect(textElement).toBeInTheDocument()
-    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>"`);
+    expect(container.innerHTML).toMatchInlineSnapshot(`"<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" 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(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>"`)
+    expect(container.innerHTML).toMatchInlineSnapshot(`"<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" 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>"`)
   })
 })