feat(components): use smaller icons (#604)

* resize icons to 16px in sumup-oss/icons@fc3d721

* update to @sumup-oss/icons v1 🚀

* update sizes and spacings to accommodate the new icon dimensions

.storybook/components/Icons.js

@@ -73,10 +73,11 @@ const Size = styled.p`
   font-style: italic;
 `;
 
-const iconStyles = color => theme => css`
+const iconStyles = (color, size) => theme => css`
   height: 3rem;
   width: auto;
   max-width: 6rem;
+  padding: ${size === 'small' ? '0.5rem' : '0'};
   color: ${theme.colors[color]};
   background-color: ${color === 'white'
     ? theme.colors.n900
@@ -170,7 +171,11 @@ const Icons = () => {
                 const Icon = iconComponents[componentName];
                 return (
                   <Wrapper key={id}>
-                    <Icon id={id} size={icon.size} css={iconStyles(color)} />
+                    <Icon
+                      id={id}
+                      size={icon.size}
+                      css={iconStyles(color, icon.size)}
+                    />
                     <Label htmlFor="id">
                       {icon.name}
                       {size === 'all' && <Size>{icon.size}</Size>}

docs/advanced/icons.story.mdx

@@ -6,9 +6,10 @@ import { Meta, Icons } from '../../.storybook/components';
 
 The icons used throughout Circuit UI come from [SumUp's icon library](https://github.com/sumup-oss/icons). The [`@sumup/icons`](https://www.npmjs.com/package/@sumup/icons) package is a required peer dependency of [`@sumup/circuit-ui`](https://www.npmjs.com/package/@sumup/circuit-ui). You can install the package by running the following command in your project:
 
-```bash
+```sh
+# With yarn:
 yarn add @sumup/icons
-# Or if you prefer npm:
+# With npm:
 npm install @sumup/icons
 ```
 

docs/introduction/getting-started.story.mdx

@@ -47,9 +47,9 @@ Circuit UI relies on some mandatory peer dependencies, namely [@sumup/icons](htt
 
 ```bash
 # With yarn:
-yarn add @sumup/icons react react-dom @emotion/core @emotion/styled emotion-theming
+yarn add @sumup/design-tokens @sumup/icons react react-dom @emotion/core @emotion/styled emotion-theming
 # With npm:
-npm install @sumup/icons react react-dom @emotion/core @emotion/styled emotion-theming
+npm install @sumup/design-tokens @sumup/icons react react-dom @emotion/core @emotion/styled emotion-theming
 ```
 
 ### Configuring the theme

package.json

@@ -96,7 +96,7 @@
     "@storybook/source-loader": "^5.2.4",
     "@sumup/design-tokens": "^1.0.0-alpha.2",
     "@sumup/foundry": "^2.1.0",
-    "@sumup/icons": "^1.0.0-canary.7",
+    "@sumup/icons": "^1.0.0",
     "@sumup/intl": "^1.0.0",
     "@svgr/webpack": "^4.3.3",
     "@testing-library/dom": "^6.5.0",