[Feature] Add MoreHorizIcon

Signed-off-by: thechillbasu <basusarthakmain@gmail.com>

Author: thechillbasu

src/__testing__/MoreHorizIcon.test.tsx

@@ -0,0 +1,35 @@
+import { render } from '@testing-library/react';
+import { MoreHorizIcon } from '../icons';
+
+describe('MoreHorizIcon', () => {
+  it('renders without errors', () => {
+    render(<MoreHorizIcon />);
+  });
+
+  it('uses default width and height', () => {
+    const { getByTestId } = render(<MoreHorizIcon />);
+    const svgElement = getByTestId('more-horiz-icon-svg');
+    expect(svgElement.getAttribute('width')).toBe('24');
+    expect(svgElement.getAttribute('height')).toBe('24');
+  });
+
+  it('applies custom width and height', () => {
+    const { getByTestId } = render(<MoreHorizIcon width={32} height={32} />);
+    const svgElement = getByTestId('more-horiz-icon-svg');
+    expect(svgElement.getAttribute('width')).toBe('32');
+    expect(svgElement.getAttribute('height')).toBe('32');
+  });
+
+  it('renders with a title for accessibility', () => {
+    const { container } = render(<MoreHorizIcon title="More options" />);
+    const titleElement = container.querySelector('title');
+    expect(titleElement).not.toBeNull();
+    expect(titleElement?.textContent).toBe('More options');
+  });
+
+  it('does not render a title when not provided', () => {
+    const { container } = render(<MoreHorizIcon />);
+    const titleElement = container.querySelector('title');
+    expect(titleElement).toBeNull();
+  });
+});

src/icons/MoreHoriz/MoreHorizIcon.tsx

@@ -0,0 +1,29 @@
+import { DEFAULT_HEIGHT, DEFAULT_WIDTH, DEFAULT_FILL_NONE } from '../../constants/constants';
+import { IconProps } from '../types';
+
+const MoreHorizIcon = ({
+  width = DEFAULT_WIDTH,
+  height = DEFAULT_HEIGHT,
+  fill = DEFAULT_FILL_NONE,
+  title,
+  ...props
+}: IconProps): JSX.Element => {
+  return (
+    <svg
+      width={width}
+      height={height}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      data-testid="more-horiz-icon-svg"
+      {...props}
+    >
+      {title && <title>{title}</title>}
+      <path
+        d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
+        fill={fill}
+      />
+    </svg>
+  );
+};
+
+export default MoreHorizIcon;

src/icons/MoreHoriz/index.ts

@@ -0,0 +1 @@
+export { default as MoreHorizIcon } from './MoreHorizIcon';

src/icons/index.ts

@@ -116,6 +116,7 @@ export * from './MesheryFilter';
 export * from './MesheryOperator';
 export * from './Mesh';
 export { default as ModifiedApplicationFileIcon } from './ModifiedApplicationFileIcon';
+export * from './MoreHoriz';
 export * from './MoreVert';
 export * from './MoveFile';
 export * from './Open';