@os-design/icons 1.0.47 → 1.0.49

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@os-design/icons",
-  "version": "1.0.47",
+  "version": "1.0.49",
   "license": "UNLICENSED",
   "repository": "git@gitlab.com:os-team/libs/os-design.git",
   "main": "dist/cjs/index.js",
@@ -14,7 +14,14 @@
     "./package.json": "./package.json"
   },
   "files": [
-    "dist"
+    "dist",
+    "src",
+    "!**/*.test.ts",
+    "!**/*.test.tsx",
+    "!**/__tests__",
+    "!**/*.stories.tsx",
+    "!**/*.stories.mdx",
+    "!**/*.example.tsx"
   ],
   "sideEffects": false,
   "scripts": {
@@ -31,8 +38,8 @@
   "devDependencies": {
     "@emotion/react": ">=11",
     "@emotion/styled": ">=11",
-    "@os-design/styles": "^1.0.44",
-    "@os-design/theming": "^1.0.42",
+    "@os-design/styles": "^1.0.46",
+    "@os-design/theming": "^1.0.44",
     "copy-to-clipboard": "^3.3.3"
   },
   "peerDependencies": {
@@ -40,5 +47,5 @@
     "@emotion/styled": ">=11",
     "react": ">=18"
   },
-  "gitHead": "0e88d3afc41e36cee61222a039ef1aa4d08115b5"
+  "gitHead": "e5d8409760608145d2c738aa5789d0465ae5416f"
 }

package/src/Icon.tsx

@@ -0,0 +1,28 @@
+import styled from '@emotion/styled';
+
+import React, { forwardRef } from 'react';
+
+export type IconProps = Omit<JSX.IntrinsicElements['svg'], 'ref'>;
+
+const Svg = styled.svg`
+  transform: rotate(0); // Fixes moves on hover
+
+  & > *:not([fill]) {
+    fill: currentColor;
+  }
+`;
+
+const Icon = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
+  <Svg
+    viewBox='0 0 1024 1024'
+    width='1em'
+    height='1em'
+    role='img'
+    {...props}
+    ref={ref}
+  />
+));
+
+Icon.displayName = 'Icon';
+
+export default Icon;

package/src/icons/Add.tsx

@@ -0,0 +1,13 @@
+import React, { forwardRef } from 'react';
+import Icon, { IconProps } from '../Icon';
+
+const Add = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
+  <Icon {...props} ref={ref}>
+    <path d='M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z' />
+    <path d='M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z' />
+  </Icon>
+));
+
+Add.displayName = 'Add';
+
+export default Add;

package/src/icons/Blog.tsx

@@ -0,0 +1,12 @@
+import React, { forwardRef } from 'react';
+import Icon, { IconProps } from '../Icon';
+
+const Blog = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
+  <Icon {...props} ref={ref}>
+    <path d='M832 64H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V96c0-17.7-14.3-32-32-32zM668 345.9L621.5 312L572 347.4V124h96v221.9z' />
+  </Icon>
+));
+
+Blog.displayName = 'Blog';
+
+export default Blog;

package/src/icons/Bold.tsx

@@ -0,0 +1,12 @@
+import React, { forwardRef } from 'react';
+import Icon, { IconProps } from '../Icon';
+
+const Bold = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
+  <Icon {...props} ref={ref}>
+    <path d='M697.8 481.4c33.6-35 54.2-82.3 54.2-134.3v-10.2C752 229.3 663.9 142 555.3 142H259.4c-15.1 0-27.4 12.3-27.4 27.4v679.1c0 16.3 13.2 29.5 29.5 29.5h318.7c117 0 211.8-94.2 211.8-210.5v-11c0-73-37.4-137.3-94.2-175.1zM328 238h224.7c57.1 0 103.3 44.4 103.3 99.3v9.5c0 54.8-46.3 99.3-103.3 99.3H328V238zm366.6 429.4c0 62.9-51.7 113.9-115.5 113.9H328V542.7h251.1c63.8 0 115.5 51 115.5 113.9v10.8z' />
+  </Icon>
+));
+
+Bold.displayName = 'Bold';
+
+export default Bold;

package/src/icons/Check.tsx

@@ -0,0 +1,12 @@
+import React, { forwardRef } from 'react';
+import Icon, { IconProps } from '../Icon';
+
+const Check = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
+  <Icon {...props} ref={ref}>
+    <path d='M751.44 253.44C763.38 241.6 779.5 234.94 796.32 234.89C813.13 234.85 829.29 241.42 841.3 253.19C853.31 264.96 860.2 280.99 860.49 297.8C860.77 314.62 854.43 330.87 842.83 343.04L502.18 768.85C496.33 775.16 489.26 780.22 481.41 783.73C473.55 787.25 465.07 789.14 456.46 789.3C447.86 789.46 439.31 787.88 431.33 784.66C423.35 781.44 416.11 776.64 410.02 770.56L184.31 544.77C171.61 532.93 164.26 516.44 163.95 499.07C163.65 481.71 170.41 464.97 182.69 452.69C194.97 440.41 211.71 433.65 229.07 433.95C246.44 434.26 262.93 441.61 274.77 454.31L453.46 632.92L749.82 255.32C749.95 255.15 750.09 254.99 750.22 254.83C750.36 254.67 750.5 254.51 750.64 254.35C750.78 254.2 750.93 254.04 751.08 253.89C751.22 253.74 751.37 253.59 751.53 253.44L751.44 253.44Z' />
+  </Icon>
+));
+
+Check.displayName = 'Check';
+
+export default Check;

package/src/icons/CheckCircle.tsx

@@ -0,0 +1,12 @@
+import React, { forwardRef } from 'react';
+import Icon, { IconProps } from '../Icon';
+
+const CheckCircle = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
+  <Icon {...props} ref={ref}>
+    <path d='M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448s448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 0 1-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8l157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z' />
+  </Icon>
+));
+
+CheckCircle.displayName = 'CheckCircle';
+
+export default CheckCircle;

package/src/icons/Close.tsx

@@ -0,0 +1,12 @@
+import React, { forwardRef } from 'react';
+import Icon, { IconProps } from '../Icon';
+
+const Close = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
+  <Icon {...props} ref={ref}>
+    <path d='M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8L295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512L196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1l216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z' />
+  </Icon>
+));
+
+Close.displayName = 'Close';
+
+export default Close;

package/src/icons/CloseCircle.tsx

@@ -0,0 +1,12 @@
+import React, { forwardRef } from 'react';
+import Icon, { IconProps } from '../Icon';
+
+const CloseCircle = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
+  <Icon {...props} ref={ref}>
+    <path d='M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448s448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4l-66.1.3c-4.4 0-8-3.5-8-8c0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 0 1-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4l66-.3c4.4 0 8 3.5 8 8c0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2c0 4.4-3.6 8-8 8z' />
+  </Icon>
+));
+
+CloseCircle.displayName = 'CloseCircle';
+
+export default CloseCircle;

package/src/icons/Contacts.tsx

@@ -0,0 +1,12 @@
+import React, { forwardRef } from 'react';
+import Icon, { IconProps } from '../Icon';
+
+const Contacts = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
+  <Icon {...props} ref={ref}>
+    <path d='M373 411c-28.5 0-51.7 23.3-51.7 52s23.2 52 51.7 52s51.7-23.3 51.7-52s-23.2-52-51.7-52zm555-251H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zM608 420c0-4.4 1-8 2.3-8h123.4c1.3 0 2.3 3.6 2.3 8v48c0 4.4-1 8-2.3 8H610.3c-1.3 0-2.3-3.6-2.3-8v-48zm-86 253h-43.9c-4.2 0-7.6-3.3-7.9-7.5c-3.8-50.5-46-90.5-97.2-90.5s-93.4 40-97.2 90.5c-.3 4.2-3.7 7.5-7.9 7.5H224a8 8 0 0 1-8-8.4c2.8-53.3 32-99.7 74.6-126.1a111.8 111.8 0 0 1-29.1-75.5c0-61.9 49.9-112 111.4-112s111.4 50.1 111.4 112c0 29.1-11 55.5-29.1 75.5c42.7 26.5 71.8 72.8 74.6 126.1c.4 4.6-3.2 8.4-7.8 8.4zm278.9-53H615.1c-3.9 0-7.1-3.6-7.1-8v-48c0-4.4 3.2-8 7.1-8h185.7c3.9 0 7.1 3.6 7.1 8v48h.1c0 4.4-3.2 8-7.1 8z' />
+  </Icon>
+));
+
+Contacts.displayName = 'Contacts';
+
+export default Contacts;

package/src/icons/Delete.tsx

@@ -0,0 +1,12 @@
+import React, { forwardRef } from 'react';
+import Icon, { IconProps } from '../Icon';
+
+const Delete = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
+  <Icon {...props} ref={ref}>
+    <path d='M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z' />
+  </Icon>
+));
+
+Delete.displayName = 'Delete';
+
+export default Delete;

package/src/icons/Down.tsx

@@ -0,0 +1,12 @@
+import React, { forwardRef } from 'react';
+import Icon, { IconProps } from '../Icon';
+
+const Down = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
+  <Icon {...props} ref={ref}>
+    <path d='M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2L227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z' />
+  </Icon>
+));
+
+Down.displayName = 'Down';
+
+export default Down;

package/src/icons/Edit.tsx

@@ -0,0 +1,12 @@
+import React, { forwardRef } from 'react';
+import Icon, { IconProps } from '../Icon';
+
+const Edit = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
+  <Icon {...props} ref={ref}>
+    <path d='M257.7 752c2 0 4-.2 6-.5L431.9 722c2-.4 3.9-1.3 5.3-2.8l423.9-423.9a9.96 9.96 0 0 0 0-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2a33.5 33.5 0 0 0 9.4 29.8c6.6 6.4 14.9 9.9 23.8 9.9zm67.4-174.4L687.8 215l73.3 73.3l-362.7 362.6l-88.9 15.7l15.6-89zM880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32z' />
+  </Icon>
+));
+
+Edit.displayName = 'Edit';
+
+export default Edit;

package/src/icons/Empty.tsx

@@ -0,0 +1,12 @@
+import React, { forwardRef } from 'react';
+import Icon, { IconProps } from '../Icon';
+
+const Empty = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
+  <Icon {...props} ref={ref}>
+    <path d='M885.2 446.3l-.2-.8l-112.2-285.1c-5-16.1-19.9-27.2-36.8-27.2H281.2c-17 0-32.1 11.3-36.9 27.6L139.4 443l-.3.7l-.2.8c-1.3 4.9-1.7 9.9-1 14.8c-.1 1.6-.2 3.2-.2 4.8V830a60.9 60.9 0 0 0 60.8 60.8h627.2c33.5 0 60.8-27.3 60.9-60.8V464.1c0-1.3 0-2.6-.1-3.7c.4-4.9 0-9.6-1.3-14.1zm-295.8-43l-.3 15.7c-.8 44.9-31.8 75.1-77.1 75.1c-22.1 0-41.1-7.1-54.8-20.6S436 441.2 435.6 419l-.3-15.7H229.5L309 210h399.2l81.7 193.3H589.4zm-375 76.8h157.3c24.3 57.1 76 90.8 140.4 90.8c33.7 0 65-9.4 90.3-27.2c22.2-15.6 39.5-37.4 50.7-63.6h156.5V814H214.4V480.1z' />
+  </Icon>
+));
+
+Empty.displayName = 'Empty';
+
+export default Empty;

package/src/icons/Enter.tsx

@@ -0,0 +1,12 @@
+import React, { forwardRef } from 'react';
+import Icon, { IconProps } from '../Icon';
+
+const Enter = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
+  <Icon {...props} ref={ref}>
+    <path d='M864 170h-60c-4.4 0-8 3.6-8 8v518H310v-73c0-6.7-7.8-10.5-13-6.3l-141.9 112a8 8 0 0 0 0 12.6l141.9 112c5.3 4.2 13 .4 13-6.3v-75h498c35.3 0 64-28.7 64-64V178c0-4.4-3.6-8-8-8z' />
+  </Icon>
+));
+
+Enter.displayName = 'Enter';
+
+export default Enter;

package/src/icons/Eye.tsx

@@ -0,0 +1,12 @@
+import React, { forwardRef } from 'react';
+import Icon, { IconProps } from '../Icon';
+
+const Eye = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
+  <Icon {...props} ref={ref}>
+    <path d='M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 0 0 0 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3c7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176s176-78.8 176-176s-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112s112 50.1 112 112s-50.1 112-112 112z' />
+  </Icon>
+));
+
+Eye.displayName = 'Eye';
+
+export default Eye;

package/src/icons/EyeFilled.tsx

@@ -0,0 +1,12 @@
+import React, { forwardRef } from 'react';
+import Icon, { IconProps } from '../Icon';
+
+const EyeFilled = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
+  <Icon {...props} ref={ref}>
+    <path d='M396 512a112 112 0 1 0 224 0a112 112 0 1 0-224 0zm546.2-25.8C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 0 0 0 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3c7.7-16.2 7.7-35 0-51.5zM508 688c-97.2 0-176-78.8-176-176s78.8-176 176-176s176 78.8 176 176s-78.8 176-176 176z' />
+  </Icon>
+));
+
+EyeFilled.displayName = 'EyeFilled';
+
+export default EyeFilled;

package/src/icons/EyeInvisible.tsx

@@ -0,0 +1,13 @@
+import React, { forwardRef } from 'react';
+import Icon, { IconProps } from '../Icon';
+
+const EyeInvisible = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
+  <Icon {...props} ref={ref}>
+    <path d='M942.2 486.2Q889.47 375.11 816.7 305l-50.88 50.88C807.31 395.53 843.45 447.4 874.7 512C791.5 684.2 673.4 766 512 766q-72.67 0-133.87-22.38L323 798.75Q408 838 512 838q288.3 0 430.2-300.3a60.29 60.29 0 0 0 0-51.5zm-63.57-320.64L836 122.88a8 8 0 0 0-11.32 0L715.31 232.2Q624.86 186 512 186q-288.3 0-430.2 300.3a60.3 60.3 0 0 0 0 51.5q56.69 119.4 136.5 191.41L112.48 835a8 8 0 0 0 0 11.31L155.17 889a8 8 0 0 0 11.31 0l712.15-712.12a8 8 0 0 0 0-11.32zM149.3 512C232.6 339.8 350.7 258 512 258c54.54 0 104.13 9.36 149.12 28.39l-70.3 70.3a176 176 0 0 0-238.13 238.13l-83.42 83.42C223.1 637.49 183.3 582.28 149.3 512zm246.7 0a112.11 112.11 0 0 1 146.2-106.69L401.31 546.2A112 112 0 0 1 396 512z' />
+    <path d='M508 624c-3.46 0-6.87-.16-10.25-.47l-52.82 52.82a176.09 176.09 0 0 0 227.42-227.42l-52.82 52.82c.31 3.38.47 6.79.47 10.25a111.94 111.94 0 0 1-112 112z' />
+  </Icon>
+));
+
+EyeInvisible.displayName = 'EyeInvisible';
+
+export default EyeInvisible;

package/src/icons/FontSize.tsx

@@ -0,0 +1,12 @@
+import React, { forwardRef } from 'react';
+import Icon, { IconProps } from '../Icon';
+
+const FontSize = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
+  <Icon {...props} ref={ref}>
+    <path d='M920 416H616c-4.4 0-8 3.6-8 8v112c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-56h60v320h-46c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h164c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8h-46V480h60v56c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V424c0-4.4-3.6-8-8-8zM656 296V168c0-4.4-3.6-8-8-8H104c-4.4 0-8 3.6-8 8v128c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-64h168v560h-92c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h264c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8h-92V232h168v64c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8z' />
+  </Icon>
+));
+
+FontSize.displayName = 'FontSize';
+
+export default FontSize;

package/src/icons/Home.tsx

@@ -0,0 +1,12 @@
+import React, { forwardRef } from 'react';
+import Icon, { IconProps } from '../Icon';
+
+const Home = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
+  <Icon {...props} ref={ref}>
+    <path d='M946.5 505L534.6 93.4a31.93 31.93 0 0 0-45.2 0L77.5 505c-12 12-18.8 28.3-18.8 45.3c0 35.3 28.7 64 64 64h43.4V908c0 17.7 14.3 32 32 32H448V716h112v224h265.9c17.7 0 32-14.3 32-32V614.3h43.4c17 0 33.3-6.7 45.3-18.8c24.9-25 24.9-65.5-.1-90.5z' />
+  </Icon>
+));
+
+Home.displayName = 'Home';
+
+export default Home;

package/src/icons/InfoCircle.tsx

@@ -0,0 +1,12 @@
+import React, { forwardRef } from 'react';
+import Icon, { IconProps } from '../Icon';
+
+const InfoCircle = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
+  <Icon {...props} ref={ref}>
+    <path d='M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448s448-200.6 448-448S759.4 64 512 64zm32 664c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V456c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272zm-32-344a48.01 48.01 0 0 1 0-96a48.01 48.01 0 0 1 0 96z' />
+  </Icon>
+));
+
+InfoCircle.displayName = 'InfoCircle';
+
+export default InfoCircle;

package/src/icons/Left.tsx

@@ -0,0 +1,12 @@
+import React, { forwardRef } from 'react';
+import Icon, { IconProps } from '../Icon';
+
+const Left = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
+  <Icon {...props} ref={ref}>
+    <path d='M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 0 0 0 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281l360-281.1c3.8-3 6.1-7.7 6.1-12.6z' />
+  </Icon>
+));
+
+Left.displayName = 'Left';
+
+export default Left;

package/src/icons/Link.tsx

@@ -0,0 +1,12 @@
+import React, { forwardRef } from 'react';
+import Icon, { IconProps } from '../Icon';
+
+const Link = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
+  <Icon {...props} ref={ref}>
+    <path d='M574 665.4a8.03 8.03 0 0 0-11.3 0L446.5 781.6c-53.8 53.8-144.6 59.5-204 0c-59.5-59.5-53.8-150.2 0-204l116.2-116.2c3.1-3.1 3.1-8.2 0-11.3l-39.8-39.8a8.03 8.03 0 0 0-11.3 0L191.4 526.5c-84.6 84.6-84.6 221.5 0 306s221.5 84.6 306 0l116.2-116.2c3.1-3.1 3.1-8.2 0-11.3L574 665.4zm258.6-474c-84.6-84.6-221.5-84.6-306 0L410.3 307.6a8.03 8.03 0 0 0 0 11.3l39.7 39.7c3.1 3.1 8.2 3.1 11.3 0l116.2-116.2c53.8-53.8 144.6-59.5 204 0c59.5 59.5 53.8 150.2 0 204L665.3 562.6a8.03 8.03 0 0 0 0 11.3l39.8 39.8c3.1 3.1 8.2 3.1 11.3 0l116.2-116.2c84.5-84.6 84.5-221.5 0-306.1zM610.1 372.3a8.03 8.03 0 0 0-11.3 0L372.3 598.7a8.03 8.03 0 0 0 0 11.3l39.6 39.6c3.1 3.1 8.2 3.1 11.3 0l226.4-226.4c3.1-3.1 3.1-8.2 0-11.3l-39.5-39.6z' />
+  </Icon>
+));
+
+Link.displayName = 'Link';
+
+export default Link;

package/src/icons/Loading.tsx

@@ -0,0 +1,24 @@
+import { keyframes } from '@emotion/react';
+import styled from '@emotion/styled';
+import React, { forwardRef } from 'react';
+
+import BaseIcon, { IconProps } from '../Icon';
+
+const circleAnimation = keyframes`
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+`;
+
+const Icon = styled(BaseIcon)`
+  animation: ${circleAnimation} 0.8s infinite linear;
+`;
+
+const Loading = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
+  <Icon {...props} ref={ref}>
+    <path d='M988 548c-19.9 0-36-16.1-36-36c0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 0 0-94.3-139.9a437.71 437.71 0 0 0-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7c26.7 63.1 40.2 130.2 40.2 199.3c.1 19.9-16 36-35.9 36z' />
+  </Icon>
+));
+
+Loading.displayName = 'Loading';
+
+export default Loading;

package/src/icons/Moon.tsx

@@ -0,0 +1,12 @@
+import React, { forwardRef } from 'react';
+import Icon, { IconProps } from '../Icon';
+
+const Moon = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
+  <Icon viewBox='0 0 24 24' {...props} ref={ref}>
+    <path d='M16.253 2.335A10.086 10.086 0 0 0 12.768 10c0 4.632 3.068 8.528 7.232 9.665A9.555 9.555 0 0 1 13.742 22C8.362 22 4 17.523 4 12S8.362 2 13.742 2c.868 0 1.71.117 2.511.335z' />
+  </Icon>
+));
+
+Moon.displayName = 'Moon';
+
+export default Moon;

package/src/icons/OrderedList.tsx

@@ -0,0 +1,12 @@
+import React, { forwardRef } from 'react';
+import Icon, { IconProps } from '../Icon';
+
+const OrderedList = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
+  <Icon {...props} ref={ref}>
+    <path d='M920 760H336c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h584c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0-568H336c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h584c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 284H336c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h584c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM216 712H100c-2.2 0-4 1.8-4 4v34c0 2.2 1.8 4 4 4h72.4v20.5h-35.7c-2.2 0-4 1.8-4 4v34c0 2.2 1.8 4 4 4h35.7V838H100c-2.2 0-4 1.8-4 4v34c0 2.2 1.8 4 4 4h116c2.2 0 4-1.8 4-4V716c0-2.2-1.8-4-4-4zM100 188h38v120c0 2.2 1.8 4 4 4h40c2.2 0 4-1.8 4-4V152c0-4.4-3.6-8-8-8h-78c-2.2 0-4 1.8-4 4v36c0 2.2 1.8 4 4 4zm116 240H100c-2.2 0-4 1.8-4 4v36c0 2.2 1.8 4 4 4h68.4l-70.3 77.7a8.3 8.3 0 0 0-2.1 5.4V592c0 2.2 1.8 4 4 4h116c2.2 0 4-1.8 4-4v-36c0-2.2-1.8-4-4-4h-68.4l70.3-77.7a8.3 8.3 0 0 0 2.1-5.4V432c0-2.2-1.8-4-4-4z' />
+  </Icon>
+));
+
+OrderedList.displayName = 'OrderedList';
+
+export default OrderedList;

package/src/icons/Picture.tsx

@@ -0,0 +1,12 @@
+import React, { forwardRef } from 'react';
+import Icon, { IconProps } from '../Icon';
+
+const Picture = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
+  <Icon {...props} ref={ref}>
+    <path d='M553.1 509.1l-77.8 99.2l-41.1-52.4a8 8 0 0 0-12.6 0l-99.8 127.2a7.98 7.98 0 0 0 6.3 12.9H696c6.7 0 10.4-7.7 6.3-12.9l-136.5-174a8.1 8.1 0 0 0-12.7 0zM360 442a40 40 0 1 0 80 0a40 40 0 1 0-80 0zm494.6-153.4L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7zM790.2 326H602V137.8L790.2 326zm1.8 562H232V136h302v216a42 42 0 0 0 42 42h216v494z' />
+  </Icon>
+));
+
+Picture.displayName = 'Picture';
+
+export default Picture;

package/src/icons/Reload.tsx

@@ -0,0 +1,12 @@
+import React, { forwardRef } from 'react';
+import Icon, { IconProps } from '../Icon';
+
+const Reload = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
+  <Icon {...props} ref={ref}>
+    <path d='M909.1 209.3l-56.4 44.1C775.8 155.1 656.2 92 521.9 92C290 92 102.3 279.5 102 511.5C101.7 743.7 289.8 932 521.9 932c181.3 0 335.8-115 394.6-276.1c1.5-4.2-.7-8.9-4.9-10.3l-56.7-19.5a8 8 0 0 0-10.1 4.8c-1.8 5-3.8 10-5.9 14.9c-17.3 41-42.1 77.8-73.7 109.4A344.77 344.77 0 0 1 655.9 829c-42.3 17.9-87.4 27-133.8 27c-46.5 0-91.5-9.1-133.8-27A341.5 341.5 0 0 1 279 755.2a342.16 342.16 0 0 1-73.7-109.4c-17.9-42.4-27-87.4-27-133.9s9.1-91.5 27-133.9c17.3-41 42.1-77.8 73.7-109.4c31.6-31.6 68.4-56.4 109.3-73.8c42.3-17.9 87.4-27 133.8-27c46.5 0 91.5 9.1 133.8 27a341.5 341.5 0 0 1 109.3 73.8c9.9 9.9 19.2 20.4 27.8 31.4l-60.2 47a8 8 0 0 0 3 14.1l175.6 43c5 1.2 9.9-2.6 9.9-7.7l.8-180.9c-.1-6.6-7.8-10.3-13-6.2z' />
+  </Icon>
+));
+
+Reload.displayName = 'Reload';
+
+export default Reload;

package/src/icons/Right.tsx

@@ -0,0 +1,12 @@
+import React, { forwardRef } from 'react';
+import Icon, { IconProps } from '../Icon';
+
+const Right = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
+  <Icon {...props} ref={ref}>
+    <path d='M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1l-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z' />
+  </Icon>
+));
+
+Right.displayName = 'Right';
+
+export default Right;

package/src/icons/Search.tsx

@@ -0,0 +1,12 @@
+import React, { forwardRef } from 'react';
+import Icon, { IconProps } from '../Icon';
+
+const Search = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
+  <Icon {...props} ref={ref}>
+    <path d='M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1c-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z' />
+  </Icon>
+));
+
+Search.displayName = 'Search';
+
+export default Search;

package/src/icons/SignOut.tsx

@@ -0,0 +1,12 @@
+import React, { forwardRef } from 'react';
+import Icon, { IconProps } from '../Icon';
+
+const SignOut = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
+  <Icon {...props} ref={ref}>
+    <path d='M868 732h-70.3c-4.8 0-9.3 2.1-12.3 5.8c-7 8.5-14.5 16.7-22.4 24.5a353.84 353.84 0 0 1-112.7 75.9A352.8 352.8 0 0 1 512.4 866c-47.9 0-94.3-9.4-137.9-27.8a353.84 353.84 0 0 1-112.7-75.9a353.28 353.28 0 0 1-76-112.5C167.3 606.2 158 559.9 158 512s9.4-94.2 27.8-137.8c17.8-42.1 43.4-80 76-112.5s70.5-58.1 112.7-75.9c43.6-18.4 90-27.8 137.9-27.8c47.9 0 94.3 9.3 137.9 27.8c42.2 17.8 80.1 43.4 112.7 75.9c7.9 7.9 15.3 16.1 22.4 24.5c3 3.7 7.6 5.8 12.3 5.8H868c6.3 0 10.2-7 6.7-12.3C798 160.5 663.8 81.6 511.3 82C271.7 82.6 79.6 277.1 82 516.4C84.4 751.9 276.2 942 512.4 942c152.1 0 285.7-78.8 362.3-197.7c3.4-5.3-.4-12.3-6.7-12.3zm88.9-226.3L815 393.7c-5.3-4.2-13-.4-13 6.3v76H488c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h314v76c0 6.7 7.8 10.5 13 6.3l141.9-112a8 8 0 0 0 0-12.6z' />
+  </Icon>
+));
+
+SignOut.displayName = 'SignOut';
+
+export default SignOut;

package/src/icons/Sun.tsx

@@ -0,0 +1,12 @@
+import React, { forwardRef } from 'react';
+import Icon, { IconProps } from '../Icon';
+
+const Sun = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
+  <Icon viewBox='0 0 24 24' {...props} ref={ref}>
+    <path d='M12 17.065a5 5 0 1 1 0-10a5 5 0 0 1 0 10zm0-15a1 1 0 0 1 1 1v2a1 1 0 0 1-2 0v-2a1 1 0 0 1 1-1zm0 16a1 1 0 0 1 1 1v2a1 1 0 0 1-2 0v-2a1 1 0 0 1 1-1zm-9-7h2a1 1 0 1 1 0 2H3a1 1 0 0 1 0-2zm16 0h2a1 1 0 0 1 0 2h-2a1 1 0 0 1 0-2zm.071-6.071a1 1 0 0 1 0 1.414l-1.414 1.414a1 1 0 1 1-1.414-1.414l1.414-1.414a1 1 0 0 1 1.414 0zM7.757 16.308a1 1 0 0 1 0 1.414l-1.414 1.414a1 1 0 1 1-1.414-1.414l1.414-1.414a1 1 0 0 1 1.414 0zM6.343 4.994l1.414 1.414a1 1 0 0 1-1.414 1.414L4.93 6.408a1 1 0 0 1 1.414-1.414zm11.314 11.314l1.414 1.414a1 1 0 0 1-1.414 1.414l-1.414-1.414a1 1 0 1 1 1.414-1.414z' />
+  </Icon>
+));
+
+Sun.displayName = 'Sun';
+
+export default Sun;

package/src/icons/UnorderedList.tsx

@@ -0,0 +1,12 @@
+import React, { forwardRef } from 'react';
+import Icon, { IconProps } from '../Icon';
+
+const UnorderedList = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
+  <Icon {...props} ref={ref}>
+    <path d='M912 192H328c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h584c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 284H328c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h584c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 284H328c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h584c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM104 228a56 56 0 1 0 112 0a56 56 0 1 0-112 0zm0 284a56 56 0 1 0 112 0a56 56 0 1 0-112 0zm0 284a56 56 0 1 0 112 0a56 56 0 1 0-112 0z' />
+  </Icon>
+));
+
+UnorderedList.displayName = 'UnorderedList';
+
+export default UnorderedList;

package/src/icons/Up.tsx

@@ -0,0 +1,12 @@
+import React, { forwardRef } from 'react';
+import Icon, { IconProps } from '../Icon';
+
+const Up = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
+  <Icon {...props} ref={ref}>
+    <path d='M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 0 0 140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z' />
+  </Icon>
+));
+
+Up.displayName = 'Up';
+
+export default Up;

package/src/icons/User.tsx

@@ -0,0 +1,12 @@
+import React, { forwardRef } from 'react';
+import Icon, { IconProps } from '../Icon';
+
+const User = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
+  <Icon {...props} ref={ref}>
+    <path d='M858.5 763.6a374 374 0 0 0-80.6-119.5a375.63 375.63 0 0 0-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1c-.4.2-.8.3-1.2.5c-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 0 0-80.6 119.5A371.7 371.7 0 0 0 136 901.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8c2-77.2 33-149.5 87.8-204.3c56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 0 0 8-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z' />
+  </Icon>
+));
+
+User.displayName = 'User';
+
+export default User;

package/src/icons/Video.tsx

@@ -0,0 +1,12 @@
+import React, { forwardRef } from 'react';
+import Icon, { IconProps } from '../Icon';
+
+const Video = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
+  <Icon {...props} ref={ref}>
+    <path d='M912 302.3L784 376V224c0-35.3-28.7-64-64-64H128c-35.3 0-64 28.7-64 64v576c0 35.3 28.7 64 64 64h592c35.3 0 64-28.7 64-64V648l128 73.7c21.3 12.3 48-3.1 48-27.6V330c0-24.6-26.7-40-48-27.7zM712 792H136V232h576v560zm176-167l-104-59.8V458.9L888 399v226zM208 360h112c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8H208c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8z' />
+  </Icon>
+));
+
+Video.displayName = 'Video';
+
+export default Video;

package/src/index.ts

@@ -0,0 +1,37 @@
+export { default as Icon } from './Icon';
+export * from './Icon';
+
+export { default as Add } from './icons/Add';
+export { default as Blog } from './icons/Blog';
+export { default as Bold } from './icons/Bold';
+export { default as Check } from './icons/Check';
+export { default as CheckCircle } from './icons/CheckCircle';
+export { default as Close } from './icons/Close';
+export { default as CloseCircle } from './icons/CloseCircle';
+export { default as Contacts } from './icons/Contacts';
+export { default as Delete } from './icons/Delete';
+export { default as Down } from './icons/Down';
+export { default as Edit } from './icons/Edit';
+export { default as Empty } from './icons/Empty';
+export { default as Enter } from './icons/Enter';
+export { default as Eye } from './icons/Eye';
+export { default as EyeFilled } from './icons/EyeFilled';
+export { default as EyeInvisible } from './icons/EyeInvisible';
+export { default as FontSize } from './icons/FontSize';
+export { default as Home } from './icons/Home';
+export { default as InfoCircle } from './icons/InfoCircle';
+export { default as Left } from './icons/Left';
+export { default as Link } from './icons/Link';
+export { default as Loading } from './icons/Loading';
+export { default as Moon } from './icons/Moon';
+export { default as OrderedList } from './icons/OrderedList';
+export { default as Picture } from './icons/Picture';
+export { default as Reload } from './icons/Reload';
+export { default as Right } from './icons/Right';
+export { default as Search } from './icons/Search';
+export { default as SignOut } from './icons/SignOut';
+export { default as Sun } from './icons/Sun';
+export { default as UnorderedList } from './icons/UnorderedList';
+export { default as Up } from './icons/Up';
+export { default as User } from './icons/User';
+export { default as Video } from './icons/Video';