feat(icons): adding IconPasskey (#612)

### **PR Type** enhancement ___ ### **Description** - Introduced a new `IconPasskey` component in the `ui-icons` package. - Added SVG paths and customization options for the `IconPasskey`. - Updated the component index to include and export the `IconPasskey`. - Configured the `IconPasskey` in the icons configuration file with properties like `name`, `title`, and `monotone`. ___ ### **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>IconPasskey.tsx</strong><dd><code>Add new IconPasskey component with SVG paths</code>                          </dd></summary> <hr> packages/ui-icons/src/components/Icons/IconPasskey.tsx <li>Added a new <code>IconPasskey</code> component.<br> <li> Implemented SVG paths for the icon.<br> <li> Included properties for customization such as <code>className</code>, <code>viewBox</code>, and <br><code>title</code>.<br> </details> </td> <td><a href="https://github.com/versini-org/ui-components/pull/612/files#diff-a473746d16853699dc87f16fbbdba39cfe674568b8cdf21648391e7055352dc3">+49/-0</a>    </td> </tr> <tr> <td> <details> <summary><strong>index.ts</strong><dd><code>Export new IconPasskey component</code>                                                  </dd></summary> <hr> packages/ui-icons/src/components/index.ts <li>Imported the new <code>IconPasskey</code> component.<br> <li> Exported the <code>IconPasskey</code> for external use.<br> </details> </td> <td><a href="https://github.com/versini-org/ui-components/pull/612/files#diff-4f3e22845cbac8896595cfd9a6abe7f59dc5d277327b6ec19a3aeff101a6cade">+2/-0</a>      </td> </tr> </table></td></tr><tr><td><strong>Configuration changes</strong></td><td><table> <tr> <td> <details> <summary><strong>config.json</strong><dd><code>Add IconPasskey configuration</code>                                                        </dd></summary> <hr> packages/ui-icons/lib/icons/config.json <li>Added configuration for the new <code>IconPasskey</code>.<br> <li> Set properties such as <code>name</code>, <code>title</code>, and <code>monotone</code>.<br> </details> </td> <td><a href="https://github.com/versini-org/ui-components/pull/612/files#diff-4bb5c7987be35a4dbd7c6be920e2d67f9aba415836f6fe1b2d9ec544715915bd">+5/-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 "Passkey" icon to the icon library, enhancing the available icon set. - Added a reusable `IconPasskey` component for SVG representation of the passkey icon. - Updated the icon index to include the new `IconPasskey` for easy access within the application. - **Tests** - Enhanced test coverage by adding tests for the new `IconPasskey` component.
versini-org · Aug 31, 2024 · 4de4c61 · 4de4c61
1 parent 0efa39d
commit 4de4c61
Show file tree

Hide file tree

Showing 5 changed files with 73 additions and 0 deletions.
diff --git a/packages/ui-icons/lib/icons/config.json b/packages/ui-icons/lib/icons/config.json
@@ -134,5 +134,10 @@
 		"name": "IconKey",
 		"title": "Key",
 		"monotone": true
+	},
+	"passkey": {
+		"name": "IconPasskey",
+		"title": "Passkey",
+		"monotone": true
 	}
 }
diff --git a/packages/ui-icons/lib/icons/svg/passkey.svg b/packages/ui-icons/lib/icons/svg/passkey.svg
diff --git a/packages/ui-icons/src/components/Icons/IconPasskey.tsx b/packages/ui-icons/src/components/Icons/IconPasskey.tsx
@@ -0,0 +1,49 @@
+/**
+ * This file was automatically generated.
+ * Please do not edit manually.
+ *
+ * To update this file, run `yarn build:icons`.
+ *
+ * Original name: passkey.svg
+ *
+ *  Generator: Adobe Illustrator 28.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)
+ *
+ */
+
+import { SvgIcon } from "@versini/ui-private";
+
+import type { IconsProps } from "./IconsTypes";
+
+export const IconPasskey = ({
+	className,
+	viewBox,
+	spacing,
+	title,
+	monotone,
+	...rest
+}: IconsProps) => {
+	/* v8 ignore next 1 */
+	const opacity = monotone ? "1" : "0.4";
+	return (
+		<SvgIcon
+			defaultViewBox="0 0 216 216"
+			defaultClassName="size-5"
+			viewBox={viewBox}
+			className={className}
+			spacing={spacing}
+			title={title || "Passkey"}
+			{...rest}
+		>
+			<path
+				opacity={opacity}
+				d="M172.32,96.79c0,13.78-8.48,25.5-20.29,29.78l7.14,11.83l-10.57,13l10.57,12.71l-17.04,22.87l-12.01-12.82 v-25.9v-22.56c-10.68-4.85-18.15-15.97-18.15-28.91c0-17.4,13.51-31.51,30.18-31.51C158.81,65.28,172.32,79.39,172.32,96.79z M142.14,101.61c4.02,0,7.28-3.4,7.28-7.6c0-4.2-3.26-7.61-7.28-7.61s-7.28,3.4-7.28,7.61 C134.85,98.21,138.12,101.61,142.14,101.61z"
+			/>
+			<path
+				opacity={opacity}
+				d="M172.41,96.88c0,13.62-8.25,25.23-19.83,29.67l6.58,11.84l-9.73,13l9.73,12.71l-17.03,23.05v-25.9v-32.77 v-26.87c4.02,0,7.28-3.41,7.28-7.6c0-4.2-3.26-7.61-7.28-7.61V65.28C158.86,65.28,172.41,79.43,172.41,96.88z"
+			/>
+			<path d="M120.24,131.43c-9.75-8-16.3-20.3-17.2-34.27H50.8c-10.96,0-19.84,9.01-19.84,20.13v25.17 c0,5.56,4.44,10.07,9.92,10.07h69.44c5.48,0,9.92-4.51,9.92-10.07V131.43z" />
+			<path d="M73.16,91.13c-2.42-0.46-4.82-0.89-7.11-1.86C57.4,85.64,52.36,78.95,50.73,69.5 c-1.12-6.47-0.59-12.87,2.03-18.92c3.72-8.6,10.39-13.26,19.15-14.84c5.24-0.94,10.46-0.73,15.5,1.15 c7.59,2.82,12.68,8.26,15.03,16.24c2.38,8.05,2.03,16.1-1.56,23.72c-3.72,7.96-10.21,12.23-18.42,13.9 c-0.68,0.14-1.37,0.27-2.05,0.41C78,91.13,75.58,91.13,73.16,91.13z" />
+		</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
@@ -20,6 +20,7 @@ import {
 	IconKey,
 	IconLocked,
 	IconNext,
+	IconPasskey,
 	IconPrevious,
 	IconProfile,
 	IconRefresh,
@@ -281,6 +282,13 @@ describe("Generic Icons prop tests", () => {
 						viewBox={viewBox}
 						spacing={spacing}
 					/>
+					<IconPasskey
+						data-testid="icon-passkey"
+						className={className}
+						fill={fill}
+						viewBox={viewBox}
+						spacing={spacing}
+					/>
 				</>,
 			);
 			[
@@ -313,6 +321,7 @@ describe("Generic Icons prop tests", () => {
 				"icon-refresh",
 				"icon-locked",
 				"icon-key",
+				"icon-passkey",
 			].forEach(async (dataTestId) => {
 				await renderExpected({
 					dataTestId,

diff --git a/packages/ui-icons/src/components/index.ts b/packages/ui-icons/src/components/index.ts
@@ -16,6 +16,7 @@ import { IconInfo } from "./Icons/IconInfo";
 import { IconKey } from "./Icons/IconKey";
 import { IconLocked } from "./Icons/IconLocked";
 import { IconNext } from "./Icons/IconNext";
+import { IconPasskey } from "./Icons/IconPasskey";
 import { IconPrevious } from "./Icons/IconPrevious";
 import { IconProfile } from "./Icons/IconProfile";
 import { IconRefresh } from "./Icons/IconRefresh";
@@ -48,6 +49,7 @@ export {
 	IconKey,
 	IconLocked,
 	IconNext,
+	IconPasskey,
 	IconPrevious,
 	IconProfile,
 	IconRefresh,