import Blockquote from '../../components/Blockquote';
import Link from '../../components/Link';

<Meta
  title="Documentation/Guidelines/App icons"
  subTitle="Guidelines"
  parameters={{
    componentSubtitle: 'Guidelines',
    previewTabs: {
      canvas: { hidden: true },
    },
  }}
/>

export const fileSizes = [120, 152, 160, 167, 180, 192, 300];

<Blockquote warning title="Work in progress">
  Please notice that this page is currently a draft.
</Blockquote>

All WFP apps should use a custom made icon to be distinguishable. By
using the branding colors the icon should be recognizable as an WFP app.

For Android Apps please follow the [Guidelines](https://developer.android.com/google-play/resources/icon-design-specifications)

Mobile operating systems automatically add the name of the app near the
icon, thus allowing users to distinguish different WFP apps in case more
than one is installed on a user device. [More Information](http://newgo.wfp.org/how-do-i/create-a-wfp-app-icon)

### Sizes

<img
  alt="WFP Icon"
  style={{
    border: '1px solid #E5E5E5',
    width: 100,
    height: 100,
  }}
  src={`${process.env.STORYBOOK_ASSETS}app/WFP_APP_ICON_300x300.png`}
/>

<div>
  {fileSizes.map((fileSize) => (
    <Link
      small
      style={{ marginRight: '0.5em', fontSize: '0.7em' }}
      target="_blank"
      href={`${process.env.STORYBOOK_ASSETS}app/WFP_APP_ICON_${fileSize}x${fileSize}.png`}>
      {fileSize} x {fileSize}px
    </Link>
  ))}
</div>
