Add icons (#189)

* Add icons

* Bump version

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mycrypto/ui",
-  "version": "1.11.1",
+  "version": "1.11.2",
   "description": "The shared UI component library used across all MyCrypto products.",
   "repository": "MyCryptoHQ/ui",
   "keywords": [

src/atoms/Icon.stories.mdx

@@ -67,6 +67,14 @@ import { Icon } from './Icon';
   </Story>
 </Canvas>
 
+## Delete
+
+<Canvas>
+  <Story name="Delete" args={{ width: 25, type: 'delete' }}>
+    {(props) => <Icon {...props} />}
+  </Story>
+</Canvas>
+
 ## External
 
 <Canvas>
@@ -205,6 +213,14 @@ import { Icon } from './Icon';
 
 # Social icons
 
+## Apple
+
+<Canvas>
+  <Story name="Apple" args={{ width: 25, type: 'apple' }}>
+    {(props) => <Icon {...props} />}
+  </Story>
+</Canvas>
+
 ## Facebook
 
 <Canvas>
@@ -221,6 +237,14 @@ import { Icon } from './Icon';
   </Story>
 </Canvas>
 
+## Linux
+
+<Canvas>
+  <Story name="Linux" args={{ width: 25, type: 'linux' }}>
+    {(props) => <Icon {...props} />}
+  </Story>
+</Canvas>
+
 ## Twitter
 
 <Canvas>
@@ -229,6 +253,14 @@ import { Icon } from './Icon';
   </Story>
 </Canvas>
 
+## Windows
+
+<Canvas>
+  <Story name="Windows" args={{ width: 25, type: 'windows' }}>
+    {(props) => <Icon {...props} />}
+  </Story>
+</Canvas>
+
 ## Fill
 
 <Canvas>

src/atoms/Icon.tsx

@@ -12,6 +12,7 @@ import blog from '../assets/icons/blog.svg';
 import caret from '../assets/icons/caret.svg';
 import checkmark from '../assets/icons/checkmark.svg';
 import copy from '../assets/icons/copy.svg';
+import deleteIcon from '../assets/icons/delete.svg';
 import external from '../assets/icons/external.svg';
 import help from '../assets/icons/help.svg';
 import home from '../assets/icons/home.svg';
@@ -29,16 +30,19 @@ import team from '../assets/icons/team.svg';
 import tool from '../assets/icons/tool.svg';
 import waiting from '../assets/icons/waiting.svg';
 import warning from '../assets/icons/warning.svg';
+import apple from '../assets/logos/apple.svg';
 import bitcoin from '../assets/logos/bitcoin.svg';
 import discord from '../assets/logos/discord.svg';
 import ether from '../assets/logos/ether.svg';
 import facebook from '../assets/logos/facebook.svg';
 import github from '../assets/logos/github.svg';
 import linkedin from '../assets/logos/linkedin.svg';
+import linux from '../assets/logos/linux.svg';
 import medium from '../assets/logos/medium.svg';
 import reddit from '../assets/logos/reddit.svg';
 import telegram from '../assets/logos/telegram.svg';
 import twitter from '../assets/logos/twitter.svg';
+import windows from '../assets/logos/windows.svg';
 
 export const icons = {
   alert,
@@ -47,6 +51,7 @@ export const icons = {
   caret,
   checkmark,
   copy,
+  delete: deleteIcon,
   external,
   help,
   home,
@@ -65,16 +70,19 @@ export const icons = {
   waiting,
   warning,
 
+  apple,
   bitcoin,
   discord,
   ether,
   facebook,
   github,
   linkedin,
+  linux,
   medium,
   reddit,
   telegram,
-  twitter
+  twitter,
+  windows
 };
 
 export type IconType = keyof typeof icons;