React icons!

[shawnbot]

This PR introduces first-class SVG icons pulled from Figma. There are a couple of moving parts here:

@sfgov/icons

This new package contains only the unstyled SVG icon assets exported from Figma in both raw .svg and .jsx component formats, as well as JSON indices that list them. These are all published to npm, as you can see on unpkg.

The Figma import logic lives entirely in .figmaexportrc.js, which is a configuration file for the figma-export tool. The files in the svg and react directories are rebuilt when you run:

npm run fetch
# which runs...
env-cmd ../../.env npx figma-export use-config

Which uses env-cmd to load environment variables from the repo root's .env file. And in order for that to work, you need to copy .env.sample and replace YOUR_FIGMA_TOKEN_HERE with your own Figma access token.

SVGIcon component

The SVGIcon component is the vehicle for our icons' styles (really just display: inline-flex). It's exported from @sfgov/react so that we can style other (custom, not-yet-released) SVG icons the same way, but probably doesn't need to be documented in its own right.

Icon<name> components

Every icon's React component is imported from @sfgov/icons/react, wrapped as Component => props => <SVGIcon {...props} as={Component} />, and re-exported with the original symbol name. I've built a table of the components in Storybook that also acts as documentation, but we'll probably want to move this to Docusaurus so that it's easier to find. The naming scheme for the icon components is Icon<name>, where <name> is the PascalCase version of the icon's name in Figma (accessibility → Accessibility; arrow up → ArrowUp, etc.). E.g.

import { IconAccessibility } from '@sfgov/react'
export default IconAccessibility

As we discussed in Slack (sorry, private), this not only makes for friendlier bundle sizes but also improves developer experience in IDEs that autocomplete import statements. In VS Code, typing Icon in your import { } from '@sfgov/react statement gives you an alphabetical list of the icon components:

If we decide to rename icons or want to create aliases, we can do that by just re-exporting them with different names:

export {
  IconAccessibility as IconA11y,
  IconArrowUp as IconUp,
  IconArrowDown as IconDown
} from './icons'

The move from a single <Icon> component with a symbol string prop (which matches the <sfgov-icon> custom element implementation) to the named export approach was done in #142.

⚠️ Hacks

The wrapping and re-exporting of the unstyled SVG icons is currently done in a kind of hacky way, using a JS script that reads @sfgov/icons/index.json and generates TSX from a tagged template literal. The script lints the resulting code with ESLint and should fail if it doesn't parse or can't be auto-fixed, so I think that's a good enough guard against generating invalid code. 😁

An outdated note on bundling and tree-shaking

Currently this bundles all of the icons in the react package, adding up to 22.8K if you import the Icon component or the iconsIndex object. This is so that we can map the string symbol names (e.g. 'accessibility') to the SVG components with a single import:

import { Icon } from '@sfgov/react'
export const A11y = () => <Icon symbol='accessibility' />
export const Toggle = ({ up }) => <Icon symbol={up ? 'chevron-up' : 'chevron-down' } />

[github-actions]

Size Change: +62.8 kB (+30%) 🚨

Total Size: 272 kB

Filename	Size	Change
packages/react/dist/index.js	65.7 kB	+31.6 kB (+92%)	🆘
packages/react/dist/index.mjs	65.3 kB	+31.2 kB (+91%)	🆘

ℹ️ View Unchanged

Filename	Size
packages/sfgov-design-system/dist/css/base.css	273 B
packages/sfgov-design-system/dist/css/components.css	878 B
packages/sfgov-design-system/dist/css/fonts.css	170 B
packages/sfgov-design-system/dist/css/icons.css	140 B
packages/sfgov-design-system/dist/css/overrides.css	104 B
packages/sfgov-design-system/dist/css/sfds.css	48.4 kB
packages/sfgov-design-system/dist/css/typography.css	557 B
packages/sfgov-design-system/dist/css/utilities.css	46.9 kB
packages/sfgov-design-system/dist/icons/alert.svg	162 B
packages/sfgov-design-system/dist/icons/arrow-down.svg	150 B
packages/sfgov-design-system/dist/icons/arrow-left.svg	151 B
packages/sfgov-design-system/dist/icons/arrow-right.svg	155 B
packages/sfgov-design-system/dist/icons/arrow-up.svg	152 B
packages/sfgov-design-system/dist/icons/building.svg	298 B
packages/sfgov-design-system/dist/icons/calendar.svg	201 B
packages/sfgov-design-system/dist/icons/check.svg	146 B
packages/sfgov-design-system/dist/icons/chevron-down.svg	147 B
packages/sfgov-design-system/dist/icons/chevron-left.svg	152 B
packages/sfgov-design-system/dist/icons/chevron-right.svg	159 B
packages/sfgov-design-system/dist/icons/chevron-up.svg	151 B
packages/sfgov-design-system/dist/icons/clipboard.svg	697 B
packages/sfgov-design-system/dist/icons/clock.svg	180 B
packages/sfgov-design-system/dist/icons/close.svg	157 B
packages/sfgov-design-system/dist/icons/code.svg	1.05 kB
packages/sfgov-design-system/dist/icons/document.svg	193 B
packages/sfgov-design-system/dist/icons/globe.svg	297 B
packages/sfgov-design-system/dist/icons/info.svg	160 B
packages/sfgov-design-system/dist/icons/location.svg	188 B
packages/sfgov-design-system/dist/icons/mail.svg	179 B
packages/sfgov-design-system/dist/icons/menu.svg	96 B
packages/sfgov-design-system/dist/icons/minus.svg	92 B
packages/sfgov-design-system/dist/icons/pencil.svg	197 B
packages/sfgov-design-system/dist/icons/phone.svg	277 B
packages/sfgov-design-system/dist/icons/plus.svg	114 B
packages/sfgov-design-system/dist/icons/search.svg	145 B
packages/sfgov-design-system/dist/js/icons.js	9.32 kB
packages/sfgov-design-system/dist/js/icons.mjs	9.17 kB
packages/sfgov-design-system/dist/js/sfds.js	9.36 kB
packages/sfgov-design-system/dist/js/sfds.mjs	9.17 kB

_{compressed-size-action}

[joni-f-g]

currently this shows up as the index of each entry, would the iconsByName export work here instead?

[joni-f-g]

this looks great!! just one small comment on the storybook portion