Icon Component/Generator

~~Stolen from~~ Inspired by Jacob Paris' blog and GitHub repo I now use this in most of my projects so I thought I'd make a package to make it easier than copy/pasting it from project to project.

There are two uses for this project.

1. Build an SVG sprite
2. Use a component to render the SVG sprite

Build SVG Sprite

First you need to create the sprite. You can add something along the lines of this to your package.json file:

{
  "scripts": {
    "build:icons": "icon --svgs=path/to/individual/svgs --out=path/to/svg/sprite/folder"
  }
}

--svgs is the input path (defaults to cwd + svgs) and --out is the output path (defaults to cwd + components/icons). And yes, I'm not using an established arg parser so you have to include the =.

Use the Icon Component

You can use the component as a standalone icon or an icon with text.

Standalone icon:

<Icon
  name="icon-name"
  size="font", // font, xs, sm, md, lg, xl
  className, // anything you want and it'll be merged with the default classes
  "aria-label"="ariaLabel",
  "aria-hidden"="ariaHidden",
  href="importedHref" // Looks something like this: import href from "./icons/sprite.svg?no-inline";
/>

Icon with text:

<Icon title="HTML Title" {...theSamePropsFromStandaloneIcon}>
  This is some cool text
</Icon>

And that's about it.