Add ShieldCheckIcon and ShieldAlertIcon

projects/js-packages/components/components/scan-report/shield-alert.tsx

@@ -0,0 +1,48 @@
+import { type JSX } from 'react';
+
+/**
+ * Shield and Alert SVG Icon
+ *
+ * @param {object} props                   - Component props.
+ * @param {string} [props.className]       - The class name to add to the SVG Icon.
+ * @param {string} [props.width="80"]      - The width of the SVG Icon.
+ * @param {string} [props.height="96"]     - The height of the SVG Icon.
+ * @param {string} [props.color="#069E08"] - The color of the SVG Icon.
+ *
+ * @return {JSX.Element} Shield and Alert SVG Icon
+ */
+export default function ShieldAlertIcon( {
+	className,
+	width = '80',
+	height = '96',
+	color = '#069E08',
+}: {
+	className?: string;
+	width?: string;
+	height?: string;
+	color?: string;
+} ): JSX.Element {
+	return (
+		<svg
+			className={ className }
+			width={ width }
+			height={ height }
+			viewBox="0 0 80 96"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<path
+				fillRule="evenodd"
+				clipRule="evenodd"
+				d="M40 0.00634766L80 17.7891V44.2985C80 66.8965 65.1605 88.2927 44.2352 95.0425C41.4856 95.9295 38.5144 95.9295 35.7648 95.0425C14.8395 88.2927 0 66.8965 0 44.2985V17.7891L40 0.00634766Z"
+				fill={ color }
+			/>
+			<path
+				fillRule="evenodd"
+				clipRule="evenodd"
+				d="M60.9 33.6909L35.375 67.9124L19.2047 55.9263L22.7848 51.1264L34.1403 59.5436L56.0851 30.122L60.9 33.6909Z"
+				fill="white"
+			/>
+		</svg>
+	);
+}

projects/js-packages/components/components/scan-report/shield-check.tsx

@@ -0,0 +1,48 @@
+import { type JSX } from 'react';
+
+/**
+ * Shield and Checkmark SVG Icon
+ *
+ * @param {object} props                   - Component props.
+ * @param {string} [props.className]       - The class name to add to the SVG Icon.
+ * @param {string} [props.width="80"]      - The width of the SVG Icon.
+ * @param {string} [props.height="96"]     - The height of the SVG Icon.
+ * @param {string} [props.color="#069E08"] - The color of the SVG Icon.
+ *
+ * @return {JSX.Element} Shield and Checkmark SVG Icon
+ */
+export default function ShieldCheckIcon( {
+	className,
+	width = '80',
+	height = '96',
+	color = '#069E08',
+}: {
+	className?: string;
+	width?: string;
+	height?: string;
+	color?: string;
+} ): JSX.Element {
+	return (
+		<svg
+			className={ className }
+			width={ width }
+			height={ height }
+			viewBox="0 0 80 96"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<path
+				fillRule="evenodd"
+				clipRule="evenodd"
+				d="M40 0.00634766L80 17.7891V44.2985C80 66.8965 65.1605 88.2927 44.2352 95.0425C41.4856 95.9295 38.5144 95.9295 35.7648 95.0425C14.8395 88.2927 0 66.8965 0 44.2985V17.7891L40 0.00634766Z"
+				fill={ color }
+			/>
+			<path
+				fillRule="evenodd"
+				clipRule="evenodd"
+				d="M60.9 33.6909L35.375 67.9124L19.2047 55.9263L22.7848 51.1264L34.1403 59.5436L56.0851 30.122L60.9 33.6909Z"
+				fill="white"
+			/>
+		</svg>
+	);
+}