[Icon] updating source prop to accept a react node

[dleroux]

fixes: #449

WHY are these changes introduced?

In create-react-app 2, svg are loaded as components. This break our Icon component.

WHAT is this pull request doing?

Allows to use a React Component at the source of the icon.

How to 🎩

Copy-paste this code in playground/Playground.tsx:

import * as React from 'react';
import {Page, Icon} from '@shopify/polaris';

interface State {}

export default class Playground extends React.Component<never, State> {
  render() {
    const svg = {
      body:
        "<path d='M17 9h-6V3a1 1 0 1 0-2 0v6H3a1 1 0 1 0 0 2h6v6a1 1 0 1 0 2 0v-6h6a1 1 0 1 0 0-2'  fill-rule='evenodd'/>",
      viewBox: '0 0 20 20',
    };
    return (
      <Page title="Playground">
        <Icon source="placeholder" />
        <Icon source="add" />
        <Icon source={<Icon source="delete" />} />
        <Icon source={svg} />
      </Page>
    );
  }
}

🎩 checklist

• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility
• Updated UNRELEASED.md

[AndrewMusgrave]

I don't think we should release this without adding onto the docs. We only support 20 by 20 icons and allowing a react node for source gives a lot of freedom. When should outline what we accept in our documentation

[dleroux]

@AndrewMusgrave brings up a good point... since react node take anything really we should document the size.

[dleroux]

I update the docs around the prop. I wonder if that is sufficient. What do you think @AndrewMusgrave?

[danrosenthal]

I update the docs around the prop. I wonder if that is sufficient.

LGTM!

[AndrewMusgrave]

Prop comment LGTM 👍

[AndrewMusgrave]

Did you 🎩 on a cra? @dleroux

[dleroux]

Did you 🎩 on a cra? @dleroux

Yes I did @AndrewMusgrave. It works well.