SVG Icons

[kentcdodds]

I know how I like to do this now (using SVG sprites). I need to set up a nice way to do this (maybe using @kiliman's rmx-cli?) so it's easy to add SVGs, but I'm posting this here so folks know I'm thinking about it!

[kiliman]

Cool. The CLI will let you add as few or as many SVG icons as you want in a folder. It also supports many folders to add different icon sets or styles. It fully supports class names, so you can use CSS to style the icon.

It automates most of the hassle of setting up SVG sprites.

[kentcdodds]

I'm not at all concerned about the array issue you mentioned. I don't expect that to be a common problem and if it is, you could simply pass the icon name instead of the icon element itself 🤷‍♂️

Fixing the className would be great 👍

Having an option for the generator would be great. I definitely prefer the single component with typed icon prop (don't use id because sometimes I may need to pass an id to the svg element).

[kiliman]

Ok, this is what I've come up with:

import { type SVGProps } from "react";
import href from "./sprite.svg";
export { href };

export default function Icon({ icon, ...props}: SVGProps<SVGSVGElement> & { icon: IconName }) {
  return (
    <svg {...props}>
      <use href={`${href}#${icon}`} />
    </svg>
  );
}

type IconName =
  | "bookmark"
  | "envelope-open"

Then if you add the --components flag to the generator, it will also created named components for each icon:

export function BookmarkIcon(props: SVGProps<SVGSVGElement>) {
  return <Icon icon="bookmark" {...props} />;
}

export function EnvelopeOpenIcon(props: SVGProps<SVGSVGElement>) {
  return <Icon icon="envelope-open" {...props} />;
}

You'd use it like this:

import {
  default as RadixIcon,
  href as radixIcons,
} from "~/components/radixicons";

<RadixIcon icon="bookmark" className="text-red-500 h-6 w-6" />
<RadixIcon icon="envelope-open" className="text-green-500 h-6 w-6" />

[kentcdodds]

Yup, that's great 👍 Is that working currently? I'm happy to follow your instructions to make it built-in if so 👍

[kiliman]

Simplified to use arrow functions

export const BookmarkIcon = (props: SVGProps<SVGSVGElement>) => <Icon icon="bookmark" {...props} />;
export const EnvelopeOpenIcon = (props: SVGProps<SVGSVGElement>) => <Icon icon="envelope-open" {...props} />;

[kiliman]

I've updated both the CLI and the example repo. Let me know if you have any questions.

[kentcdodds]

This has been implemented #229