Merge pull request #233 from abhinavkrin/fix/new-icon-components

Fix/new icon components
RocketChat · Sep 25, 2023 · 71d0d87 · 71d0d87
2 parents 10439f0 + 08ecb32
commit 71d0d87
Show file tree

Hide file tree

Showing 59 changed files with 846 additions and 3,101 deletions.
diff --git a/packages/htmlembed/dist/embeddedchat.js b/packages/htmlembed/dist/embeddedchat.js
diff --git a/packages/htmlembed/dist/rocketchat-icons.css b/packages/htmlembed/dist/rocketchat-icons.css
diff --git a/packages/htmlembed/dist/rocketchat.eot b/packages/htmlembed/dist/rocketchat.eot
diff --git a/packages/htmlembed/dist/rocketchat.svg b/packages/htmlembed/dist/rocketchat.svg
diff --git a/packages/htmlembed/dist/rocketchat.ttf b/packages/htmlembed/dist/rocketchat.ttf
diff --git a/packages/htmlembed/dist/rocketchat.woff b/packages/htmlembed/dist/rocketchat.woff
diff --git a/packages/htmlembed/dist/rocketchat.woff2 b/packages/htmlembed/dist/rocketchat.woff2
diff --git a/packages/htmlembed/package.json b/packages/htmlembed/package.json
@@ -9,7 +9,7 @@
 		"preview": "npm run build && vite preview --port=4001"
 	},
 	"dependencies": {
-		"@embeddedchat/react": "./packages/react",
+		"@embeddedchat/react": "1.0.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0"
 	},

diff --git a/packages/htmlembed/public/index.html b/packages/htmlembed/public/index.html
@@ -9,7 +9,6 @@
   <body>
     <div>
       <div id="embeddedchat"></div>
-			<link rel="stylesheet" href="http://127.0.0.1:4001/rocketchat-icon.css">
       <script src="http://127.0.0.1:4001/embeddedchat.js"></script>
       <script>
 				// all props for the EmbeddedChat of @embeddedchat/react will go here

diff --git a/packages/htmlembed/public/rocketchat-icons.css b/packages/htmlembed/public/rocketchat-icons.css
diff --git a/packages/htmlembed/public/rocketchat.eot b/packages/htmlembed/public/rocketchat.eot
diff --git a/packages/htmlembed/public/rocketchat.svg b/packages/htmlembed/public/rocketchat.svg
diff --git a/packages/htmlembed/public/rocketchat.ttf b/packages/htmlembed/public/rocketchat.ttf
diff --git a/packages/htmlembed/public/rocketchat.woff b/packages/htmlembed/public/rocketchat.woff
diff --git a/packages/htmlembed/public/rocketchat.woff2 b/packages/htmlembed/public/rocketchat.woff2
diff --git a/packages/react/package.json b/packages/react/package.json
@@ -21,7 +21,8 @@
     "format": "prettier --write 'src/' --loglevel=silent",
     "lint:fix": "eslint 'src/**/*.js' --fix",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "build-storybook": "storybook build",
+    "build-icons": "node tools/icons-generator.js"
   },
   "peerDependencies": {
     "react": "^17.0.2 || ^18",

diff --git a/packages/react/src/components/Icon/Icon.js b/packages/react/src/components/Icon/Icon.js
@@ -1,56 +1,40 @@
-import React from 'react';
-import { css } from '@emotion/react';
+import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
-import icons from '@rocket.chat/icons';
+import svgIcons from './icons';
 import useComponentOverrides from '../../theme/useComponentOverrides';
-import './rocketchat.css';
 
-const Icon = ({
-  size = 'inherit',
-  name,
-  className = '',
-  style = {},
-  ...props
-}) => {
-  const { classNames, styleOverrides } = useComponentOverrides('Button');
-  const iconCss = css`
-    margin: 0;
-    padding: 0;
-    border-width: 0;
-    border-style: solid;
-    border-color: currentColor;
-    outline: none;
-    box-sizing: border-box;
-    display: inline-block;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    user-select: none;
-    vertical-align: middle;
-    letter-spacing: 0;
-    font-family: 'RocketChat';
-    font-size: ${size};
-    font-weight: 400;
-    font-style: normal;
-    font-variant: normal;
-    line-height: 1;
-    text-rendering: auto;
-  `;
+const Icon = ({ size = 24, name, className = '', style = {}, ...props }) => {
+  const { classNames, styleOverrides } = useComponentOverrides(
+    'Button',
+    className,
+    style
+  );
+
+  const IconComponent = useMemo(() => svgIcons[name], [name]);
+  if (!name) {
+    return null;
+  }
+  if (!IconComponent) {
+    console.log(`No icon found for ${name}`);
+    return null;
+  }
   return (
-    <i
-      aria-hidden="true"
-      css={iconCss}
-      className={`ec-icon ${className} ${`ec-icon--name-${name}`} ${classNames}`}
-      style={{ ...styleOverrides, ...style }}
+    <IconComponent
+      x="0"
+      y="0"
+      width={size}
+      height={size}
+      color="inherit"
+      className={`ec-icon ${classNames}`}
+      style={styleOverrides}
       {...props}
-    >
-      {icons[name]}
-    </i>
+    />
   );
 };
 
 Icon.propTypes = {
   name: PropTypes.string,
-  size: PropTypes.string,
+  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   className: PropTypes.string,
   style: PropTypes.object,
 };

diff --git a/packages/react/src/components/Icon/icons/ArrowBack.js b/packages/react/src/components/Icon/icons/ArrowBack.js
@@ -0,0 +1,15 @@
+import React from 'react';
+
+const ArrowBack = (props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 32 32"
+    className="rcx-svg--directional"
+    fill="currentColor"
+    {...props}
+  >
+    <path d="M11.7071 9.29289C11.3166 8.90237 10.6834 8.90237 10.2929 9.29289L4.29289 15.2929C3.90237 15.6834 3.90237 16.3166 4.29289 16.7071L10.2929 22.7071C10.6834 23.0976 11.3166 23.0976 11.7071 22.7071C12.0976 22.3166 12.0976 21.6834 11.7071 21.2929L7.41421 17H25.5V21C25.5 21.5523 25.9477 22 26.5 22C27.0523 22 27.5 21.5523 27.5 21V16C27.5 15.4477 27.0523 15 26.5 15H7.41421L11.7071 10.7071C12.0976 10.3166 12.0976 9.68342 11.7071 9.29289Z" />
+  </svg>
+);
+
+export default ArrowBack;
diff --git a/packages/react/src/components/Icon/icons/Back.js b/packages/react/src/components/Icon/icons/Back.js
@@ -0,0 +1,15 @@
+import React from 'react';
+
+const Back = (props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 32 32"
+    className="rcx-svg--directional"
+    fill="currentColor"
+    {...props}
+  >
+    <path d="M11.7071 9.29289C11.3166 8.90237 10.6834 8.90237 10.2929 9.29289L4.29289 15.2929C3.90237 15.6834 3.90237 16.3166 4.29289 16.7071L10.2929 22.7071C10.6834 23.0976 11.3166 23.0976 11.7071 22.7071C12.0976 22.3166 12.0976 21.6834 11.7071 21.2929L7.41421 17H25.5V21C25.5 21.5523 25.9477 22 26.5 22C27.0523 22 27.5 21.5523 27.5 21V16C27.5 15.4477 27.0523 15 26.5 15H7.41421L11.7071 10.7071C12.0976 10.3166 12.0976 9.68342 11.7071 9.29289Z" />
+  </svg>
+);
+
+export default Back;
diff --git a/packages/react/src/components/Icon/icons/Bold.js b/packages/react/src/components/Icon/icons/Bold.js
@@ -0,0 +1,14 @@
+import React from 'react';
+
+const Bold = (props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 32 32"
+    fill="currentColor"
+    {...props}
+  >
+    <path d="M7.29243 5.29263C7.47998 5.10509 7.73435 4.99974 7.99958 4.99976L17.5002 5.00037C17.5003 5.00037 17.5002 5.00037 17.5002 5.00037C18.9589 5.00038 20.3579 5.57984 21.3893 6.61128C22.4208 7.64273 23.0002 9.04167 23.0002 10.5004C23.0002 11.9591 22.4208 13.358 21.3893 14.3895C21.3642 14.4146 21.3388 14.4395 21.3132 14.4641C22.0278 14.7626 22.6847 15.1995 23.2429 15.7577C24.3681 16.8829 25.0002 18.4091 25.0002 20.0004C25.0002 21.5917 24.3681 23.1178 23.2429 24.243C22.1177 25.3682 20.5915 26.0004 19.0002 26.0004L7.99946 25.9998C7.44719 25.9997 6.99951 25.552 6.99951 24.9998V5.99976C6.99951 5.73453 7.10488 5.48016 7.29243 5.29263ZM17.5002 14.0004C18.4285 14.0004 19.3187 13.6316 19.9751 12.9752C20.6315 12.3189 21.0002 11.4286 21.0002 10.5004C21.0002 9.57211 20.6315 8.68187 19.9751 8.02549C19.3187 7.36911 18.4285 7.00037 17.5002 7.00037L8.99951 6.99982V14.0004H17.5002ZM8.99951 16.0004V23.9998L19.0002 24.0004C19.0003 24.0004 19.0002 24.0004 19.0002 24.0004C20.0611 24.0004 21.0785 23.5789 21.8287 22.8288C22.5788 22.0786 23.0002 21.0612 23.0002 20.0004C23.0002 18.9395 22.5788 17.9221 21.8287 17.1719C21.0785 16.4218 20.0611 16.0004 19.0002 16.0004H8.99951Z" />
+  </svg>
+);
+
+export default Bold;
diff --git a/packages/react/src/components/Icon/icons/CircleCheck.js b/packages/react/src/components/Icon/icons/CircleCheck.js
@@ -0,0 +1,14 @@
+import React from 'react';
+
+const CircleCheck = (props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 32 32"
+    fill="currentColor"
+    {...props}
+  >
+    <path d="M16 27C22.0751 27 27 22.0751 27 16C27 14.5462 26.718 13.1584 26.2057 11.8881L27.7219 10.3719C28.541 12.0749 29 13.9838 29 16C29 23.1797 23.1797 29 16 29C8.8203 29 3 23.1797 3 16C3 8.8203 8.8203 3 16 3C18.9805 3 21.7267 4.003 23.9195 5.68988L22.491 7.11837C20.6716 5.78641 18.4276 5 16 5C9.92487 5 5 9.92487 5 16C5 22.0751 9.92487 27 16 27ZM28.2072 7.20698L16.7063 18.7119C16.5187 18.8995 16.2642 19.0049 15.9988 19.0049C15.7335 19.0048 15.479 18.8992 15.2915 18.7115L11.2924 14.7066C10.9021 14.3158 10.9026 13.6826 11.2934 13.2924C11.6842 12.9021 12.3174 12.9026 12.7076 13.2934L15.9995 16.59L26.7928 5.79302C27.1832 5.40242 27.8164 5.40231 28.207 5.79277C28.5976 6.18323 28.5977 6.81639 28.2072 7.20698Z" />
+  </svg>
+);
+
+export default CircleCheck;
diff --git a/packages/react/src/components/Icon/icons/CircleCross.js b/packages/react/src/components/Icon/icons/CircleCross.js
@@ -0,0 +1,14 @@
+import React from 'react';
+
+const CircleCross = (props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 32 32"
+    fill="currentColor"
+    {...props}
+  >
+    <path d="M16 27C22.0751 27 27 22.0751 27 16C27 9.92487 22.0751 5 16 5C9.92487 5 5 9.92487 5 16C5 22.0751 9.92487 27 16 27ZM16 29C8.8203 29 3 23.1797 3 16C3 8.8203 8.8203 3 16 3C23.1797 3 29 8.8203 29 16C29 23.1797 23.1797 29 16 29ZM20.7071 11.2929C21.0976 11.6834 21.0976 12.3166 20.7071 12.7071L17.4142 16L20.7071 19.2929C21.0976 19.6834 21.0976 20.3166 20.7071 20.7071C20.3166 21.0976 19.6834 21.0976 19.2929 20.7071L16 17.4142L12.7071 20.7071C12.3166 21.0976 11.6834 21.0976 11.2929 20.7071C10.9024 20.3166 10.9024 19.6834 11.2929 19.2929L14.5858 16L11.2929 12.7071C10.9024 12.3166 10.9024 11.6834 11.2929 11.2929C11.6834 10.9024 12.3166 10.9024 12.7071 11.2929L16 14.5858L19.2929 11.2929C19.6834 10.9024 20.3166 10.9024 20.7071 11.2929Z" />
+  </svg>
+);
+
+export default CircleCross;
diff --git a/packages/react/src/components/Icon/icons/Clock.js b/packages/react/src/components/Icon/icons/Clock.js
@@ -0,0 +1,14 @@
+import React from 'react';
+
+const Clock = (props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 32 32"
+    fill="currentColor"
+    {...props}
+  >
+    <path d="M27 16C27 9.92487 22.0751 5 16 5C9.92487 5 5 9.92487 5 16C5 22.0751 9.92487 27 16 27C22.0751 27 27 22.0751 27 16ZM29 16C29 23.1797 23.1797 29 16 29C8.8203 29 3 23.1797 3 16C3 8.8203 8.8203 3 16 3C23.1797 3 29 8.8203 29 16ZM17 9V15.5858L19.7071 18.2929C20.0976 18.6834 20.0976 19.3166 19.7071 19.7071C19.3166 20.0976 18.6834 20.0976 18.2929 19.7071L15.2929 16.7071C15.1054 16.5196 15 16.2652 15 16V9C15 8.44772 15.4477 8 16 8C16.5523 8 17 8.44772 17 9Z" />
+  </svg>
+);
+
+export default Clock;
diff --git a/packages/react/src/components/Icon/icons/Code.js b/packages/react/src/components/Icon/icons/Code.js
@@ -0,0 +1,14 @@
+import React from 'react';
+
+const Code = (props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 32 32"
+    fill="currentColor"
+    {...props}
+  >
+    <path d="M19.6923 6.39999C20.2078 6.59825 20.4649 7.17684 20.2667 7.69232L13.6 25.0257C13.4018 25.5411 12.8232 25.7983 12.3077 25.6C11.7922 25.4018 11.5351 24.8232 11.7333 24.3077L18.4 6.97436C18.5982 6.45889 19.1768 6.20173 19.6923 6.39999ZM10.0404 11.2929C10.431 11.6834 10.431 12.3166 10.0404 12.7071L6.74755 16L10.0404 19.2929C10.431 19.6834 10.431 20.3166 10.0404 20.7071C9.64992 21.0976 9.01675 21.0976 8.62623 20.7071L4.62623 16.7071C4.2357 16.3166 4.2357 15.6834 4.62623 15.2929L8.62623 11.2929C9.01675 10.9024 9.64992 10.9024 10.0404 11.2929ZM21.9596 11.2929C22.3501 10.9024 22.9832 10.9024 23.3738 11.2929L27.3738 15.2929C27.7643 15.6834 27.7643 16.3166 27.3738 16.7071L23.3738 20.7071C22.9832 21.0976 22.3501 21.0976 21.9596 20.7071C21.569 20.3166 21.569 19.6834 21.9596 19.2929L25.2525 16L21.9596 12.7071C21.569 12.3166 21.569 11.6834 21.9596 11.2929Z" />
+  </svg>
+);
+
+export default Code;
diff --git a/packages/react/src/components/Icon/icons/Computer.js b/packages/react/src/components/Icon/icons/Computer.js
@@ -0,0 +1,14 @@
+import React from 'react';
+
+const Computer = (props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 32 32"
+    fill="currentColor"
+    {...props}
+  >
+    <path d="M10.6667 24.3335H21.3334C21.8856 24.3335 22.3334 24.7812 22.3334 25.3335C22.3334 25.8858 21.8856 26.3335 21.3334 26.3335H10.6667C10.1144 26.3335 9.66669 25.8858 9.66669 25.3335C9.66669 24.7812 10.1144 24.3335 10.6667 24.3335Z M2.66669 9.3335C2.66669 7.12436 4.45755 5.3335 6.66669 5.3335H25.3334C27.5425 5.3335 29.3334 7.12436 29.3334 9.3335V18.6668C29.3334 20.876 27.5425 22.6668 25.3334 22.6668H6.66668C4.45754 22.6668 2.66669 20.876 2.66669 18.6668V9.3335ZM6.66669 7.3335C5.56212 7.3335 4.66669 8.22893 4.66669 9.3335V18.6668C4.66669 19.7714 5.56212 20.6668 6.66668 20.6668H25.3334C26.4379 20.6668 27.3334 19.7714 27.3334 18.6668V9.3335C27.3334 8.22892 26.4379 7.3335 25.3334 7.3335H6.66669Z" />
+  </svg>
+);
+
+export default Computer;
diff --git a/packages/react/src/components/Icon/icons/Cross.js b/packages/react/src/components/Icon/icons/Cross.js
@@ -0,0 +1,14 @@
+import React from 'react';
+
+const Cross = (props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 32 32"
+    fill="currentColor"
+    {...props}
+  >
+    <path d="M25.2071 8.20711C25.5976 7.81658 25.5976 7.18342 25.2071 6.79289C24.8166 6.40237 24.1834 6.40237 23.7929 6.79289L16 14.5858L8.20711 6.79289C7.81658 6.40237 7.18342 6.40237 6.79289 6.79289C6.40237 7.18342 6.40237 7.81658 6.79289 8.20711L14.5858 16L6.79289 23.7929C6.40237 24.1834 6.40237 24.8166 6.79289 25.2071C7.18342 25.5976 7.81658 25.5976 8.20711 25.2071L16 17.4142L23.7929 25.2071C24.1834 25.5976 24.8166 25.5976 25.2071 25.2071C25.5976 24.8166 25.5976 24.1834 25.2071 23.7929L17.4142 16L25.2071 8.20711Z" />
+  </svg>
+);
+
+export default Cross;
diff --git a/packages/react/src/components/Icon/icons/Edit.js b/packages/react/src/components/Icon/icons/Edit.js
@@ -0,0 +1,15 @@
+import React from 'react';
+
+const Edit = (props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 32 32"
+    className="rcx-svg--directional"
+    fill="currentColor"
+    {...props}
+  >
+    <path d="M24.841 4.0706L28.0554 7.47976C28.8023 8.2719 28.7783 9.51592 28.0016 10.2788L11.1961 26.7825C10.8868 27.0862 10.4872 27.2812 10.0576 27.3382L6.56885 27.8007C5.18073 27.9847 4.03809 26.7221 4.35934 25.3592L5.27696 21.4663C5.3607 21.111 5.54005 20.7854 5.79559 20.5248L21.9578 4.04235C22.7527 3.23172 24.0622 3.24455 24.841 4.0706ZM20.1534 8.73912L23.4045 11.9902L26.6002 8.85179L23.3859 5.44263L20.1534 8.73912ZM18.7531 10.1672L7.22361 21.9251L6.306 25.818L9.79471 25.3555L21.9774 13.3916L18.7531 10.1672Z" />
+  </svg>
+);
+
+export default Edit;
diff --git a/packages/react/src/components/Icon/icons/Emoji.js b/packages/react/src/components/Icon/icons/Emoji.js
@@ -0,0 +1,14 @@
+import React from 'react';
+
+const Emoji = (props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 32 32"
+    fill="currentColor"
+    {...props}
+  >
+    <path d="M27 16C27 22.0751 22.0751 27 16 27C9.92487 27 5 22.0751 5 16C5 9.92487 9.92487 5 16 5C22.0751 5 27 9.92487 27 16ZM29 16C29 8.8203 23.1797 3 16 3C8.8203 3 3 8.8203 3 16C3 23.1797 8.8203 29 16 29C23.1797 29 29 23.1797 29 16ZM10.3148 20.1527C11.1833 20.9427 12.0721 21.517 12.9718 21.9006C14.5285 22.5643 16.0559 22.63 17.4557 22.3258C19.0723 21.9745 20.506 21.1355 21.6595 20.1748C22.3851 19.5705 21.9039 18.5 20.9596 18.5C20.6905 18.5 20.4321 18.599 20.2219 18.767C19.3016 19.5024 18.207 20.1159 17.031 20.3714C16.0001 20.5954 14.8988 20.548 13.7562 20.0608C13.1293 19.7936 12.4719 19.3861 11.7968 18.7949C11.586 18.6103 11.3184 18.5 11.0383 18.5C10.127 18.5 9.64069 19.5396 10.3148 20.1527ZM12.5052 15C13.6098 15 14.5052 14.1046 14.5052 13C14.5052 11.8954 13.6098 11 12.5052 11C11.4007 11 10.5052 11.8954 10.5052 13C10.5052 14.1046 11.4007 15 12.5052 15ZM19.5052 15C20.6098 15 21.5052 14.1046 21.5052 13C21.5052 11.8954 20.6098 11 19.5052 11C18.4007 11 17.5052 11.8954 17.5052 13C17.5052 14.1046 18.4007 15 19.5052 15Z" />
+  </svg>
+);
+
+export default Emoji;
diff --git a/packages/react/src/components/Icon/icons/File.js b/packages/react/src/components/Icon/icons/File.js
@@ -0,0 +1,15 @@
+import React from 'react';
+
+const File = (props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 32 32"
+    className="rcx-svg--directional"
+    fill="currentColor"
+    {...props}
+  >
+    <path d="M11.6667 14C11.6667 13.4477 12.1144 13 12.6667 13H19.3333C19.8856 13 20.3333 13.4477 20.3333 14C20.3333 14.5523 19.8856 15 19.3333 15H12.6667C12.1144 15 11.6667 14.5523 11.6667 14Z M12.6667 17H19.3333C19.8856 17 20.3333 17.4477 20.3333 18C20.3333 18.5523 19.8856 19 19.3333 19H12.6667C12.1144 19 11.6667 18.5523 11.6667 18C11.6667 17.4477 12.1144 17 12.6667 17Z M8 4H19.4854C19.8083 4 20.1114 4.15597 20.2991 4.41876L24.8137 10.7392C24.9349 10.9088 25 11.112 25 11.3205V27C25 27.5523 24.5523 28 24 28H8C7.44772 28 7 27.5523 7 27V5C7 4.44772 7.44772 4 8 4ZM23 11.6409L18.9708 6H9V26H23V11.6409Z" />
+  </svg>
+);
+
+export default File;
diff --git a/packages/react/src/components/Icon/icons/Google.js b/packages/react/src/components/Icon/icons/Google.js
@@ -0,0 +1,14 @@
+import React from 'react';
+
+const Google = (props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 20 20"
+    fill="currentColor"
+    {...props}
+  >
+    <path d="M18,10.1866641 C18,14.751996 14.8225871,17.999995 10.1310019,17.999995 C7.97379233,18.0023573 5.9042462,17.1602614 4.37886773,15.6594585 C2.85348926,14.1586555 1.99760413,12.1224521 2.00000504,9.99999752 C2.00000504,5.57422112 5.63275375,2 10.1310019,2 C12.3209504,2 14.1639764,2.79111087 15.583287,4.09333268 L13.369849,6.18666537 C10.4752141,3.43999955 5.09159074,5.50311003 5.09159074,9.99999752 C5.09159074,12.7911078 7.35742853,15.0515515 10.1310019,15.0515515 C13.3508767,15.0515515 14.557878,12.7804411 14.7476012,11.6026637 L10.1310019,11.6026637 L10.1310019,8.85244232 L17.8717109,8.85244232 C17.9476002,9.26221997 18,9.65599763 18,10.187553 L18,10.1866641 Z" />
+  </svg>
+);
+
+export default Google;
diff --git a/packages/react/src/components/Icon/icons/Hash.js b/packages/react/src/components/Icon/icons/Hash.js
@@ -0,0 +1,14 @@
+import React from 'react';
+
+const Hash = (props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 32 32"
+    fill="currentColor"
+    {...props}
+  >
+    <path d="M10.5 4C11.0523 4 11.5 4.44772 11.5 5V9.5H20.5V5C20.5 4.44772 20.9477 4 21.5 4C22.0523 4 22.5 4.44772 22.5 5V9.5H27C27.5523 9.5 28 9.94772 28 10.5C28 11.0523 27.5523 11.5 27 11.5H22.5V20.5H27C27.5523 20.5 28 20.9477 28 21.5C28 22.0523 27.5523 22.5 27 22.5H22.5V27C22.5 27.5523 22.0523 28 21.5 28C20.9477 28 20.5 27.5523 20.5 27V22.5H11.5V27C11.5 27.5523 11.0523 28 10.5 28C9.94772 28 9.5 27.5523 9.5 27V22.5H5C4.44772 22.5 4 22.0523 4 21.5C4 20.9477 4.44772 20.5 5 20.5H9.5V11.5H5C4.44772 11.5 4 11.0523 4 10.5C4 9.94772 4.44772 9.5 5 9.5H9.5V5C9.5 4.44772 9.94772 4 10.5 4ZM11.5 11.5V20.5H20.5V11.5H11.5Z" />
+  </svg>
+);
+
+export default Hash;
diff --git a/packages/react/src/components/Icon/icons/Info.js b/packages/react/src/components/Icon/icons/Info.js
@@ -0,0 +1,14 @@
+import React from 'react';
+
+const Info = (props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 32 32"
+    fill="currentColor"
+    {...props}
+  >
+    <path d="M16 27C22.0751 27 27 22.0751 27 16C27 9.92487 22.0751 5 16 5C9.92487 5 5 9.92487 5 16C5 22.0751 9.92487 27 16 27ZM16 29C8.8203 29 3 23.1797 3 16C3 8.8203 8.8203 3 16 3C23.1797 3 29 8.8203 29 16C29 23.1797 23.1797 29 16 29ZM17 11C17 11.5523 16.5523 12 16 12C15.4477 12 15 11.5523 15 11C15 10.4477 15.4477 10 16 10C16.5523 10 17 10.4477 17 11ZM16 13C16.5523 13 17 13.4477 17 14V21C17 21.5523 16.5523 22 16 22C15.4477 22 15 21.5523 15 21V14C15 13.4477 15.4477 13 16 13Z" />
+  </svg>
+);
+
+export default Info;
diff --git a/packages/react/src/components/Icon/icons/Italic.js b/packages/react/src/components/Icon/icons/Italic.js
@@ -0,0 +1,14 @@
+import React from 'react';
+
+const Italic = (props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 32 32"
+    fill="currentColor"
+    {...props}
+  >
+    <path d="M17.6122 7.99976L12.2788 23.9998H7.99939C7.44711 23.9998 6.99939 24.4475 6.99939 24.9998C6.99939 25.552 7.44711 25.9998 7.99939 25.9998H17.9994C18.5517 25.9998 18.9994 25.552 18.9994 24.9998C18.9994 24.4475 18.5517 23.9998 17.9994 23.9998H14.387L19.7204 7.99976H23.9994C24.5517 7.99976 24.9994 7.55204 24.9994 6.99976C24.9994 6.44747 24.5517 5.99976 23.9994 5.99976H19.0306C19.0098 5.9991 18.9891 5.99911 18.9684 5.99976H13.9994C13.4471 5.99976 12.9994 6.44747 12.9994 6.99976C12.9994 7.55204 13.4471 7.99976 13.9994 7.99976H17.6122Z" />
+  </svg>
+);
+
+export default Italic;
diff --git a/packages/react/src/components/Icon/icons/Kebab.js b/packages/react/src/components/Icon/icons/Kebab.js
@@ -0,0 +1,14 @@
+import React from 'react';
+
+const Kebab = (props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 32 32"
+    fill="currentColor"
+    {...props}
+  >
+    <path d="M18 8C18 9.10457 17.1046 10 16 10C14.8954 10 14 9.10457 14 8C14 6.89543 14.8954 6 16 6C17.1046 6 18 6.89543 18 8Z M18 16C18 17.1046 17.1046 18 16 18C14.8954 18 14 17.1046 14 16C14 14.8954 14.8954 14 16 14C17.1046 14 18 14.8954 18 16Z M18 24C18 25.1046 17.1046 26 16 26C14.8954 26 14 25.1046 14 24C14 22.8954 14.8954 22 16 22C17.1046 22 18 22.8954 18 24Z" />
+  </svg>
+);
+
+export default Kebab;