Add <title> to <svg> in Preact (#1157)

* Add <title> to <svg> in Preact

Needs to be tested.

* Uncomment title attribute

---------

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

packages/icons-preact/src/createPreactComponent.ts

@@ -12,6 +12,7 @@ const createPreactComponent = (
     color = 'currentColor',
     size = 24,
     stroke = 2,
+    title,
     children,
     className = '',
     style,
@@ -35,7 +36,10 @@ const createPreactComponent = (
         style,
         ...[rest],
       },
-      [...iconNode.map(([tag, attrs]) => h(tag, attrs)), ...toChildArray(children)],
+      [
+        title && h('title', {}, title),
+        ...iconNode.map(([tag, attrs]) => h(tag, attrs)),
+        ...toChildArray(children)],
     );
 
   Component.displayName = `${iconNamePascal}`;

packages/icons-preact/src/types.ts

@@ -7,6 +7,7 @@ export interface IconProps
   color?: string;
   size?: string | number;
   stroke?: string | number;
+  title?: string;
 }
 
 export type Icon = FunctionComponent<IconProps>;

packages/icons-preact/test.spec.tsx

@@ -51,6 +51,15 @@ describe("Preact Icon component", () => {
     expect(svg).toHaveStyle('color: rgb(255, 0, 0)')
   })
 
+  it('should add a title element to the svg', () => {
+    const { container } = render(<IconAccessible title="Accessible Icon"/>)
+    const svg = container.getElementsByTagName("svg")[0]
+    const title = container.getElementsByTagName("title")[0]
+
+    expect(svg.getAttribute("title")).toBe("Accessible Icon");
+    expect(title).toHaveTextContent("Accessible Icon");
+  })
+
   it("should match snapshot", () => {
     const { container } = render(<IconAccessible/>)
     expect(container.innerHTML).toMatchInlineSnapshot(`