feat(Icon): add new icons (#1058)

issue -  #582

Co-authored-by: gizeasy <gizeasy@gmail.com>

builder/templates/Icons.stories.tsx.template

@@ -36,11 +36,15 @@ export function Playground() {
 }
 
 export default createMetadata({
-  title: 'Компоненты|/Icons',
+  title: 'Компоненты|/Графика/Icons',
   id: 'components/Icons',
   parameters: {
     docs: {
       page: mdx,
     },
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/SLc0YGhuDotve6MTCBHlGxDU/Consta-Graphics?node-id=0%3A1',
+    },
   },
 });

src/icons/Icon/__stories__/Icons.stories.tsx

@@ -23,6 +23,7 @@ import { IconBag } from '../../IconBag/IconBag';
 import { IconBarrier } from '../../IconBarrier/IconBarrier';
 import { IconBento } from '../../IconBento/IconBento';
 import { IconBold } from '../../IconBold/IconBold';
+import { IconBook } from '../../IconBook/IconBook';
 import { IconBookmarkFilled } from '../../IconBookmarkFilled/IconBookmarkFilled';
 import { IconBookmarkStroked } from '../../IconBookmarkStroked/IconBookmarkStroked';
 import { IconCalculator } from '../../IconCalculator/IconCalculator';
@@ -42,6 +43,7 @@ import { IconConnection } from '../../IconConnection/IconConnection';
 import { IconCopy } from '../../IconCopy/IconCopy';
 import { IconCrown } from '../../IconCrown/IconCrown';
 import { IconCursorMouse } from '../../IconCursorMouse/IconCursorMouse';
+import { IconDataNull } from '../../IconDataNull/IconDataNull';
 import { IconDiamond } from '../../IconDiamond/IconDiamond';
 import { IconDinosaur } from '../../IconDinosaur/IconDinosaur';
 import { IconDisconnection } from '../../IconDisconnection/IconDisconnection';
@@ -205,6 +207,7 @@ const icons = {
   IconBarrier,
   IconBento,
   IconBold,
+  IconBook,
   IconBookmarkFilled,
   IconBookmarkStroked,
   IconCalculator,
@@ -224,6 +227,7 @@ const icons = {
   IconCopy,
   IconCrown,
   IconCursorMouse,
+  IconDataNull,
   IconDiamond,
   IconDinosaur,
   IconDisconnection,
@@ -267,6 +271,7 @@ const icons = {
   IconLayers,
   IconLeaf,
   IconLightningBolt,
+  IconLineAndBarChart,
   IconLink,
   IconList,
   IconListNumbered,
@@ -351,7 +356,6 @@ const icons = {
   IconWatch,
   IconWideScreen,
   IconWorld,
-  IconLineAndBarChart,
 } as const;
 
 type Name = keyof typeof icons;
@@ -375,5 +379,9 @@ export default createMetadata({
     docs: {
       page: mdx,
     },
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/SLc0YGhuDotve6MTCBHlGxDU/Consta-Graphics?node-id=0%3A1',
+    },
   },
 });

src/icons/IconBook/IconBook.tsx

@@ -0,0 +1,12 @@
+import { createIcon } from '../createIcon/createIcon';
+
+import IconBookSizeM from './IconBook_size_m';
+import IconBookSizeS from './IconBook_size_s';
+import IconBookSizeXs from './IconBook_size_xs';
+
+export const IconBook = createIcon({
+  m: IconBookSizeM,
+  s: IconBookSizeS,
+  xs: IconBookSizeXs,
+  name: 'IconBook',
+});

src/icons/IconBook/IconBook_size_m.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+
+function IconBookSizeM(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg viewBox="0 0 24 24" {...props}>
+      <path d="M5 4a1 1 0 011-1h1v9l2-1 2 1V3h6a1 1 0 011 1v12a1 1 0 01-1 1H8a1 1 0 000 2h10a2 2 0 01-2 2H7a2 2 0 01-2-2V4z" />
+    </svg>
+  );
+}
+
+export default IconBookSizeM;

src/icons/IconBook/IconBook_size_s.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+
+function IconBookSizeS(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg viewBox="0 0 16 16" {...props}>
+      <path d="M3 3a1 1 0 011-1v7l1.5-1L7 9V2h5a1 1 0 011 1v8a1 1 0 01-1 1H5a1 1 0 100 2h8a1 1 0 01-1 1H5a2 2 0 01-2-2V3z" />
+    </svg>
+  );
+}
+
+export default IconBookSizeS;

src/icons/IconBook/IconBook_size_xs.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+
+function IconBookSizeXs(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg viewBox="0 0 12 12" {...props}>
+      <path d="M2 2a1 1 0 011-1v5l1.25-.952L5.5 6V1H9a1 1 0 011 1v6a1 1 0 01-1 1H3.5a.5.5 0 000 1H10a1 1 0 01-1 1H3a1 1 0 01-1-1V2z" />
+    </svg>
+  );
+}
+
+export default IconBookSizeXs;

src/icons/IconDataNull/IconDataNull.tsx

@@ -0,0 +1,12 @@
+import { createIcon } from '../createIcon/createIcon';
+
+import IconDataNullSizeM from './IconDataNull_size_m';
+import IconDataNullSizeS from './IconDataNull_size_s';
+import IconDataNullSizeXs from './IconDataNull_size_xs';
+
+export const IconDataNull = createIcon({
+  m: IconDataNullSizeM,
+  s: IconDataNullSizeS,
+  xs: IconDataNullSizeXs,
+  name: 'IconDataNull',
+});

src/icons/IconDataNull/IconDataNull_size_m.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+
+function IconDataNullSizeM(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg viewBox="0 0 24 24" {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M4.703 4.445A1 1 0 015.535 4h12.93a1 1 0 01.832.445l3.535 5.303a1 1 0 01.168.555V19a1 1 0 01-1 1H2a1 1 0 01-1-1v-8.697a1 1 0 01.168-.555l3.535-5.303zM6 6h12l2.5 4H18a1 1 0 00-1 1v2a1 1 0 01-1 1H8a1 1 0 01-1-1v-2a1 1 0 00-1-1H3.5L6 6z"
+      />
+    </svg>
+  );
+}
+
+export default IconDataNullSizeM;

src/icons/IconDataNull/IconDataNull_size_s.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+
+function IconDataNullSizeS(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg viewBox="0 0 16 16" {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M3.566 2a1 1 0 00-.857.486L.143 6.761A1 1 0 000 7.277V13a1 1 0 001 1h14a1 1 0 001-1V7.277a1 1 0 00-.143-.515l-2.566-4.276A1 1 0 0012.434 2H3.566zM13.5 7L12 4H4L2.5 7H4a1 1 0 011 1v1a1 1 0 001 1h4a1 1 0 001-1V8a1 1 0 011-1h1.5z"
+      />
+    </svg>
+  );
+}
+
+export default IconDataNullSizeS;

src/icons/IconDataNull/IconDataNull_size_xs.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+
+function IconDataNullSizeXs(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg viewBox="0 0 12 12" {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M1.724 2.553A1 1 0 012.618 2h6.764a1 1 0 01.894.553l1.618 3.236a1 1 0 01.106.447V10a1 1 0 01-1 1H1a1 1 0 01-1-1V6.236a1 1 0 01.106-.447l1.618-3.236zM3 3h6l1.5 3H9a1 1 0 00-1 1 1 1 0 01-1 1H5a1 1 0 01-1-1 1 1 0 00-1-1H1.5L3 3z"
+      />
+    </svg>
+  );
+}
+
+export default IconDataNullSizeXs;

src/icons/IconLineAndBarChart/IconLineAndBarChart_size_m.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 function IconLineAndBarChartSizeM(props: React.SVGProps<SVGSVGElement>) {
   return (
     <svg viewBox="0 0 24 24" {...props}>
-      <path d="M20.7071 6.29296L15.9171 1.50293L11.8246 6.61852L7.82459 3.61852L3.21912 9.37537L4.78085 10.6248L8.17538 6.38161L12.1754 9.3816L16.0829 4.49719L19.2929 7.70717L20.7071 6.29296ZM15 10V21H17V10H15ZM7 11V21H9V11H7ZM3 14V21H5V14H3ZM11 12V21H13V12H11ZM19 14V21H21V14H19Z" />
+      <path d="M20.707 6.293l-4.79-4.79-4.092 5.116-4-3-4.606 5.756 1.562 1.25 3.394-4.243 4 3 3.908-4.885 3.21 3.21 1.414-1.414zM15 10v11h2V10h-2zm-8 1v10h2V11H7zm-4 3v7h2v-7H3zm8-2v9h2v-9h-2zm8 2v7h2v-7h-2z" />
     </svg>
   );
 }

src/icons/IconLineAndBarChart/IconLineAndBarChart_size_s.tsx

@@ -1,11 +1,11 @@
 import * as React from 'react';
 
-function IconAddSizeS(props: React.SVGProps<SVGSVGElement>) {
+function IconLineAndBarChartSizeS(props: React.SVGProps<SVGSVGElement>) {
   return (
     <svg viewBox="0 0 16 16" {...props}>
-      <path d="M7.87265 3.71315L4.87265 1.71315L1.29296 5.29284L2.70718 6.70705L5.12749 4.28674L8.12749 6.28674L10.8919 3.52235L13.2001 6.59995L14.8001 5.39995L11.1083 0.477539L7.87265 3.71315ZM4 8V15H6V8H4ZM1 11V15H3V11H1ZM7 10V15H9V10H7ZM10 8V15H12V8H10ZM13 11V15H15V11H13Z" />
+      <path d="M7.873 3.713l-3-2-3.58 3.58 1.414 1.414 2.42-2.42 3 2 2.765-2.765L13.2 6.6l1.6-1.2L11.108.478 7.873 3.713zM4 8v7h2V8H4zm-3 3v4h2v-4H1zm6-1v5h2v-5H7zm3-2v7h2V8h-2zm3 3v4h2v-4h-2z" />
     </svg>
   );
 }
 
-export default IconAddSizeS;
+export default IconLineAndBarChartSizeS;