feat(IconKey): adding IconKey to library (#584)

### **PR Type** Enhancement, Tests ___ ### **Description** - Added a new `IconKey` component with SVG paths and properties. - Exported the `IconKey` component in the index file. - Added tests for the `IconKey` component in the generic icons prop tests. - Updated the configuration file to include the new `IconKey` component. ___ ### **Changes walkthrough** 📝 <table><thead><tr><th></th><th align="left">Relevant files</th></tr></thead><tbody><tr><td><strong>Enhancement</strong></td><td><table> <tr> <td> <details> <summary><strong>IconKey.tsx</strong><dd><code>Add new IconKey component with SVG paths</code>                                  </dd></summary> <hr> packages/ui-icons/src/components/Icons/IconKey.tsx <li>Added a new <code>IconKey</code> component.<br> <li> Implemented SVG paths for the key icon.<br> <li> Included properties such as <code>className</code>, <code>viewBox</code>, <code>spacing</code>, <code>title</code>, and <br><code>monotone</code>.<br> </details> </td> <td><a href="https://github.com/aversini/ui-components/pull/584/files#diff-3801125bedf6f72cebd58f63972aab4cc71bd99b92d92770d689e9016c1072ab">+48/-0</a>    </td> </tr> <tr> <td> <details> <summary><strong>index.ts</strong><dd><code>Export new IconKey component</code>                                                          </dd></summary> <hr> packages/ui-icons/src/components/index.ts - Exported the new `IconKey` component. </details> </td> <td><a href="https://github.com/aversini/ui-components/pull/584/files#diff-4f3e22845cbac8896595cfd9a6abe7f59dc5d277327b6ec19a3aeff101a6cade">+2/-0</a>      </td> </tr> <tr> <td> <details> <summary><strong>config.json</strong><dd><code>Add configuration for new IconKey component</code>                            </dd></summary> <hr> packages/ui-icons/lib/icons/config.json <li>Added configuration for the new <code>IconKey</code> component.<br> <li> Included properties such as <code>name</code>, <code>title</code>, and <code>monotone</code>.<br> </details> </td> <td><a href="https://github.com/aversini/ui-components/pull/584/files#diff-4bb5c7987be35a4dbd7c6be920e2d67f9aba415836f6fe1b2d9ec544715915bd">+5/-0</a>      </td> </tr> </table></td></tr><tr><td><strong>Tests</strong></td><td><table> <tr> <td> <details> <summary><strong>Icons.test.tsx</strong><dd><code>Add tests for new IconKey component</code>                                            </dd></summary> <hr> packages/ui-icons/src/components/Icons/__tests__/Icons.test.tsx <li>Added tests for the new <code>IconKey</code> component.<br> <li> Included <code>IconKey</code> in the generic icons prop tests.<br> </details> </td> <td><a href="https://github.com/aversini/ui-components/pull/584/files#diff-95f02b63b19d2516c8d36a259865650f808e4aa2fa31246931d9cef007d02fec">+9/-0</a>      </td> </tr> </table></td></tr></tr></tbody></table> ___ > 💡 **PR-Agent usage**: >Comment `/help` on the PR to get a list of all available PR-Agent tools and their descriptions  ## Summary by CodeRabbit - **New Features** - Introduced a new "Key" icon with a monotone style. - Added a new `IconKey` component for displaying the key icon. - **Tests** - Included tests for the new `IconKey` component.
versini-org · Jul 14, 2024 · 3589daf · 3589daf
1 parent acc0192
commit 3589daf
Show file tree

Hide file tree

Showing 5 changed files with 68 additions and 0 deletions.
diff --git a/packages/ui-icons/lib/icons/config.json b/packages/ui-icons/lib/icons/config.json
@@ -129,5 +129,10 @@
 		"name": "IconLocked",
 		"title": "Locked",
 		"monotone": true
+	},
+	"key": {
+		"name": "IconKey",
+		"title": "Key",
+		"monotone": true
 	}
 }
diff --git a/packages/ui-icons/lib/icons/svg/key.svg b/packages/ui-icons/lib/icons/svg/key.svg
diff --git a/packages/ui-icons/src/components/Icons/IconKey.tsx b/packages/ui-icons/src/components/Icons/IconKey.tsx
@@ -0,0 +1,48 @@
+/**
+ * This file was automatically generated.
+ * Please do not edit manually.
+ *
+ * To update this file, run `yarn build:icons`.
+ *
+ * Original name: key.svg
+ *
+ * !Font Awesome Pro 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.
+ *
+ */
+
+import { SvgIcon } from "@versini/ui-private";
+
+import type { IconsProps } from "./IconsTypes";
+
+export const IconKey = ({
+	className,
+	viewBox,
+	spacing,
+	title,
+	monotone,
+	...rest
+}: IconsProps) => {
+	/* v8 ignore next 1 */
+	const opacity = monotone ? "1" : "0.4";
+	return (
+		<SvgIcon
+			defaultViewBox="0 0 512 512"
+			defaultClassName="size-5"
+			viewBox={viewBox}
+			className={className}
+			spacing={spacing}
+			title={title || "Key"}
+			{...rest}
+		>
+			<path
+				className="fa-secondary"
+				opacity={opacity}
+				d="M168.3 229.7L282.3 343.7l0 0s0 0 0 0L249 377c-4.5 4.5-10.6 7-17 7H192v40c0 13.3-10.7 24-24 24H128v40c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V408c0-6.4 2.5-12.5 7-17L168.3 229.7s0 0 0 0l0 0z"
+			/>
+			<path
+				className="fa-primary"
+				d="M168.3 229.7L282.3 343.7l0 0c16.9 5.4 35 8.3 53.7 8.3c97.2 0 176-78.8 176-176S433.2 0 336 0S160 78.8 160 176c0 18.7 2.9 36.8 8.3 53.7l0 0zM336 136a40 40 0 1 1 80 0 40 40 0 1 1 -80 0z"
+			/>
+		</SvgIcon>
+	);
+};
diff --git a/packages/ui-icons/src/components/Icons/__tests__/Icons.test.tsx b/packages/ui-icons/src/components/Icons/__tests__/Icons.test.tsx
@@ -17,6 +17,7 @@ import {
 	IconHide,
 	IconHistory,
 	IconInfo,
+	IconKey,
 	IconLocked,
 	IconNext,
 	IconPrevious,
@@ -273,6 +274,13 @@ describe("Generic Icons prop tests", () => {
 						viewBox={viewBox}
 						spacing={spacing}
 					/>
+					<IconKey
+						data-testid="icon-key"
+						className={className}
+						fill={fill}
+						viewBox={viewBox}
+						spacing={spacing}
+					/>
 				</>,
 			);
 			[
@@ -304,6 +312,7 @@ describe("Generic Icons prop tests", () => {
 				"icon-sort-up",
 				"icon-refresh",
 				"icon-locked",
+				"icon-key",
 			].forEach(async (dataTestId) => {
 				await renderExpected({
 					dataTestId,

diff --git a/packages/ui-icons/src/components/index.ts b/packages/ui-icons/src/components/index.ts
@@ -13,6 +13,7 @@ import { IconGitHub } from "./Icons/IconGitHub";
 import { IconHide } from "./Icons/IconHide";
 import { IconHistory } from "./Icons/IconHistory";
 import { IconInfo } from "./Icons/IconInfo";
+import { IconKey } from "./Icons/IconKey";
 import { IconLocked } from "./Icons/IconLocked";
 import { IconNext } from "./Icons/IconNext";
 import { IconPrevious } from "./Icons/IconPrevious";
@@ -44,6 +45,7 @@ export {
 	IconHide,
 	IconHistory,
 	IconInfo,
+	IconKey,
 	IconLocked,
 	IconNext,
 	IconPrevious,