Building icons from Figma

[dbanksdesign]

Issue #, if available:

Description of changes: To get ready for launch and to make sure our icons match what is in Figma exactly, I pulled the SVG source from Figma into our own SVG files. Doing so brings our number of icons from ~1800 to ~1500.

As discussed, in the future we will probably remove all these icons down the road, but at least at this point we can be sure the icon name and design match what is shown in Figma.

• Updated icon primitive docs
• Added icon SVGs in the ui package and generated the JSX code from those

Because Github chokes with this huge PR, here are the relevant files:

• https://github.com/aws-amplify/amplify-ui/blob/icon-update/docs/src/pages/components/icon
• https://github.com/aws-amplify/amplify-ui/blob/icon-update/packages/react/scripts/generateIcons.js
• https://github.com/aws-amplify/amplify-ui/tree/icon-update/packages/ui/src/icons
• https://github.com/aws-amplify/amplify-ui/tree/icon-update/packages/react/src/primitives/Icon/icons
• https://github.com/aws-amplify/amplify-ui/tree/icon-update/docs/src/pages/components/icon

CleanShot.2021-11-15.at.13.55.11.mp4

TODO

• Update Icons docs

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.

[changeset-bot]

🦋 Changeset detected

Latest commit: 3a6d559

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 4 packages

Name	Type
@aws-amplify/ui	Patch
@aws-amplify/ui-react	Patch
@aws-amplify/ui-vue	Patch
@aws-amplify/ui-angular	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[ericclemmons]

This removes all the icons except ~30 for our own use-cases in other primitives and components.

GitHub is struggling to let me comment on the files tab, so I'll add this here.

The only question I have about icons is whether the ones we need become a public API or not.

In the interest of reducing our exported API, we have a couple options here:

1. Keep the images as SVGs and import them as a data URL for use in <Icon> or <Image>:

   https://esbuild.github.io/content-types/#data-url

2. Transform/build SVGs into React components (e.g. https://github.com/gregberge/svgr), but only reference with relative paths vs. being a named export.

3. As you or @hvergara has suggested before, have a separate @aws-amplify/ui-icons repo. But, we have this listed as a devDependencies so that it's bundled vs. being a published, external dependency:

   https://tsup.egoist.sh/#excluding-packages

[dbanksdesign]

@ericclemmons I updated the description to include links to relevant files on the branch. I actually started to use svgr, but it didn't do quite what I wanted like using some of our internal files and other dependencies so it would work like our generic Icon component. Here is what a icon react component looks like:

https://github.com/aws-amplify/amplify-ui/blob/icon-update/packages/react/src/primitives/Icon/icons/IconAdd.tsx

import classNames from 'classnames';

import { ComponentClassNames } from '../../shared';
import { View } from '../../View';

export const IconAdd = (props) => {
  const { className, ...rest } = props;
  return (
    <View
      as="span"
      width="1em"
      height="1em"
      className={classNames(ComponentClassNames.Icon, className)}
      {...rest}
    >
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
        <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" fill="currentColor" />
      </svg>
    </View>
  );
};

We could remove these icons from the exports, but then we wouldn't be able to have any pre-built icons in our Figma file and wouldn't be able to use the icons in our docs site. I think ~30 exported icons would not be too big of a deal and would give customers at least something to use to get started. But I'm open to removing them as exports if everyone agrees.

[dbanksdesign]

Updated the PR to add the icons from the Figma file in an icons folder in the UI package to act as the source of our icons.