Added icon support to KBar

[PranavRayudu]

Added icon support to KBar. Works with strings, inline svgs, and imported icons and with all optional fields.

[changeset-bot]

🦋 Changeset detected

Latest commit: e9bcff8

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

This PR includes changesets to release 1 package

Name	Type
pliny	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

[PranavRayudu]

Fixes #136

[timlrx]

Thanks, can you align the spacing? Might need to fix the icon size

[PranavRayudu]

The alignment issue came up because I was using FontAwesome for the first icon, embedded HeroIcons svg for the second, and FontAwesome again for the third. Had I stayed consistent with the libraries, they would have been lined up properly. I attached a picture of my site to show what just using FontAwesome would look like with smaller icons.

And sample code for the socials section

const socials: Action[] = [
    {
      id: siteMetadata.email,
      name: 'Email',
      section: socialSection,
      perform: () => {},
      icon: <FontAwesomeIcon icon={faEnvelope} fixedWidth className={'text-xs'} />,
    },
    {
      id: siteMetadata.github,
      name: 'Github',
      section: socialSection,
      perform: () => window.open(siteMetadata.github, '_blank'),
      icon: <FontAwesomeIcon icon={faGithub} fixedWidth className={'text-xs'} />,
    },
    {
      id: siteMetadata.linkedin,
      name: 'LinkedIn',
      section: socialSection,
      perform: () => window.open(siteMetadata.linkedin, '_blank'),
      icon: <FontAwesomeIcon icon={faLinkedin} fixedWidth className={'text-xs'} />,
    },
]

The other instance I think there might be spacing issues is with plain text or emojis but I think it is up to the users to enforce proper spacing and sizing.

[timlrx]

Thanks for the explanation and LGTM!