Add icons for cards

Author: maltenzo

src/icons/UIKitIcon/icons/CommentCircleOutline.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+import type { SVGIconProps } from './types';
+
+const CommentCircleOutline = ( { color, ...props }: SVGIconProps ) => (
+	<Svg viewBox="0 0 25 25" fill="none" {...props}>
+		<Path d="M19.5696 5.43002C17.9288 3.77852 15.7633 2.75124 13.4463 2.52526C11.1292 2.29929 8.80598 2.8888 6.87702 4.19215C4.94805 5.49551 3.53427 7.43103 2.87939 9.66503C2.22452 11.899 2.36961 14.2915 3.28963 16.43C3.38552 16.6288 3.41698 16.8525 3.37963 17.07L2.49963 21.3C2.46573 21.4622 2.47265 21.6303 2.51978 21.7891C2.56691 21.9479 2.65276 22.0926 2.76963 22.21C2.86543 22.3051 2.9795 22.3799 3.10496 22.4297C3.23042 22.4795 3.36468 22.5035 3.49963 22.5H3.69963L7.97963 21.64C8.19716 21.6139 8.41775 21.6449 8.61963 21.73C10.7581 22.65 13.1506 22.7951 15.3846 22.1403C17.6186 21.4854 19.5541 20.0716 20.8575 18.1426C22.1609 16.2137 22.7504 13.8904 22.5244 11.5734C22.2984 9.25638 21.2711 7.09081 19.6196 5.45002L19.5696 5.43002ZM20.3996 13.79C20.2041 14.984 19.7403 16.1181 19.0432 17.1069C18.346 18.0958 17.4337 18.9136 16.3748 19.4989C15.3159 20.0842 14.138 20.4216 12.9299 20.4859C11.7217 20.5502 10.5147 20.3396 9.39963 19.87C9.00417 19.7018 8.57936 19.6135 8.14963 19.61C7.96191 19.6113 7.77461 19.6281 7.58963 19.66L4.76963 20.23L5.33963 17.41C5.45316 16.7993 5.37997 16.1685 5.12963 15.6C4.66002 14.485 4.44944 13.278 4.51372 12.0698C4.57801 10.8616 4.91549 9.68377 5.50077 8.62487C6.08605 7.56598 6.90389 6.65362 7.89273 5.95647C8.88156 5.25932 10.0156 4.79554 11.2096 4.60002C12.4629 4.39434 13.7471 4.49 14.9561 4.87908C16.1651 5.26817 17.264 5.93951 18.1621 6.83756C19.0601 7.73561 19.7315 8.83457 20.1206 10.0435C20.5097 11.2525 20.6053 12.5367 20.3996 13.79Z" fill={color} />
+	</Svg>
+);
+
+export default CommentCircleOutline;

src/icons/UIKitIcon/icons/HeartOutline.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+import type { SVGIconProps } from './types';
+
+const HeartOutline = ( { color, ...props }: SVGIconProps ) => (
+	<Svg viewBox="0 0 25 25" fill="none" {...props}>
+		<Path d="M12.5004 21.5C12.3688 21.5008 12.2383 21.4756 12.1165 21.4258C11.9946 21.376 11.8838 21.3027 11.7904 21.21L4.02036 13.43C3.04572 12.4452 2.49902 11.1156 2.49902 9.73002C2.49902 8.34445 3.04572 7.01484 4.02036 6.03002C5.00262 5.05053 6.33319 4.50049 7.72036 4.50049C9.10753 4.50049 10.4381 5.05053 11.4204 6.03002L12.5004 7.11002L13.5804 6.03002C14.5626 5.05053 15.8932 4.50049 17.2804 4.50049C18.6675 4.50049 19.9981 5.05053 20.9804 6.03002C21.955 7.01484 22.5017 8.34445 22.5017 9.73002C22.5017 11.1156 21.955 12.4452 20.9804 13.43L13.2104 21.21C13.1169 21.3027 13.0061 21.376 12.8843 21.4258C12.7624 21.4756 12.632 21.5008 12.5004 21.5ZM7.72036 6.50002C7.29704 6.4981 6.87754 6.5802 6.48617 6.74155C6.0948 6.90291 5.73933 7.14031 5.44036 7.44002C4.83642 8.04714 4.4974 8.86866 4.4974 9.72502C4.4974 10.5814 4.83642 11.4029 5.44036 12.01L12.5004 19.08L19.5604 12.01C20.1643 11.4029 20.5033 10.5814 20.5033 9.72502C20.5033 8.86866 20.1643 8.04714 19.5604 7.44002C18.944 6.85773 18.1283 6.53331 17.2804 6.53331C16.4325 6.53331 15.6167 6.85773 15.0004 7.44002L13.2104 9.24002C13.1174 9.33374 13.0068 9.40814 12.8849 9.45891C12.7631 9.50968 12.6324 9.53581 12.5004 9.53581C12.3683 9.53581 12.2376 9.50968 12.1158 9.45891C11.9939 9.40814 11.8833 9.33374 11.7904 9.24002L10.0004 7.44002C9.70139 7.14031 9.34592 6.90291 8.95455 6.74155C8.56318 6.5802 8.14368 6.4981 7.72036 6.50002V6.50002Z" fill={color} />
+	</Svg>
+
+);
+
+export default HeartOutline;

src/icons/UIKitIcon/icons/MoreVerticalOutline.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+import type { SVGIconProps } from './types';
+
+const MoreVerticalOutline = ( { color, ...rest }: SVGIconProps ) => (
+	<Svg viewBox="0 0 24 24" fill="none" {...rest} >
+		<Path d="M12 14C13.1046 14 14 13.1046 14 12C14 10.8954 13.1046 10 12 10C10.8954 10 10 10.8954 10 12C10 13.1046 10.8954 14 12 14Z" fill={color} />
+		<Path d="M12 7C13.1046 7 14 6.10457 14 5C14 3.89543 13.1046 3 12 3C10.8954 3 10 3.89543 10 5C10 6.10457 10.8954 7 12 7Z" fill={color} />
+		<Path d="M12 21C13.1046 21 14 20.1046 14 19C14 17.8954 13.1046 17 12 17C10.8954 17 10 17.8954 10 19C10 20.1046 10.8954 21 12 21Z" fill={color} />
+	</Svg>
+);
+
+export default MoreVerticalOutline;

src/icons/UIKitIcon/icons/index.ts

@@ -6,7 +6,10 @@ export { default as BoxUnchecked } from './BoxUnchecked';
 export { default as CheckmarkOutlined } from './CheckmarkOutlined';
 export { default as CircleOutlined } from './CircleOutlined';
 export { default as CircleFilled } from './CircleFilled';
-export { default as Eye } from './Eye';
 export { default as CloseOutlined } from './CloseOutlined';
+export { default as CommentCircleOutline } from './CommentCircleOutline';
+export { default as Eye } from './Eye';
+export { default as HeartOutline } from './HeartOutline';
+export { default as MoreVerticalOutline } from './MoreVerticalOutline';
 export { default as QuestionCircleOutlined } from './QuestionCircleOutlined';
 export { default as EyeOffOutlined } from './EyeOffOutlined';

src/icons/UIKitIcon/index.tsx

@@ -11,7 +11,10 @@ import {
 	QuestionCircleOutlined,
 	CheckmarkOutlined,
 	CloseOutlined,
-	CircleOutlined
+	CircleOutlined,
+	MoreVerticalOutline,
+	CommentCircleOutline,
+	HeartOutline
 } from './icons';
 import type { AsComponentProps } from '../../components/main/Icon/types';
 import IconNotFoundError from './IconNotFoundError';
@@ -30,9 +33,12 @@ const PACKAGE_ICONS = Object.freeze( {
 	'circle': CircleOutlined,
 	'circle-filled': CircleFilled,
 	'close-outlined': CloseOutlined,
+	'comment-circle-outline': CommentCircleOutline,
 	'eye': Eye,
-	'question-circle': QuestionCircleOutlined,
-	'eye-off-outlined': EyeOffOutlined
+	'eye-off-outlined': EyeOffOutlined,
+	'heart-outline': HeartOutline,
+	'more-vertical-outline': MoreVerticalOutline,
+	'question-circle': QuestionCircleOutlined
 } ) as IconsMap;
 
 const UIKitIcon = ( {