@kiwicom/orbit-components/src/Icon/IconList.js

<div align="center"> <a href="https://orbit.kiwi" target="_blank"> <img alt="orbit-components" src="https://orbit.kiwi/wp-content/uploads/2018/08/orbit-components.png" srcset="https://orbit.kiwi/wp-content/uploads/2018/08/orbit-components@2x.png 2x"

// @flow
import * as React from "react";
import styled from "styled-components";
import { defaultTokens } from "@kiwicom/orbit-design-tokens";

import * as Icons from "../icons";

const List = styled.div`
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  border-radius: ${defaultTokens.borderRadiusLarge};
`;

const Container = styled.div`
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  align-content: center;
  width: 100%;
  min-height: 80px;
  background-color: white;
  margin-bottom: ${defaultTokens.spaceLarge};
  border-radius: ${defaultTokens.borderRadiusLarge};
  border: ${defaultTokens.borderWidthCard} ${defaultTokens.borderStyleCard}
    ${defaultTokens.paletteCloudNormal};
  padding-right: ${defaultTokens.spaceLarge};
`;

const IconImport = styled.div`
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
  font-size: 12px;
  line-height: ${defaultTokens.lineHeightText};
  color: ${defaultTokens.paletteInkDark};
  background-color: ${defaultTokens.paletteCloudLight};
  border: ${defaultTokens.borderWidthCard} ${defaultTokens.borderStyleCard}
    ${defaultTokens.paletteCloudNormal};
  padding: ${defaultTokens.spaceXXSmall} ${defaultTokens.spaceXSmall};
`;

const IconList = () => (
  <List>
    {Object.keys(Icons).map(icon => {
      const Icon = styled(Icons[icon])`
        padding: 0 ${defaultTokens.spaceLarge};
        flex-shrink: 0;
      `;
      const iconName = `${icon}`;
      return (
        <Container key={icon}>
          <Icon size="large" color="primary" />
          <IconImport>
            {`import ${iconName} from "@kiwicom/orbit-components/lib/icons/${iconName}"`}
          </IconImport>
        </Container>
      );
    })}
  </List>
);

export default IconList;