RemixIcons for React Apps

[mwarnerdotme]

👋 Hey everyone! For anyone who loves the style of these icons and wants to use them in their React project, I went ahead and made an NPM package that feels much like FontAwesome - but for RemixIcon. You can view it on NPM or check out the Gitlab/Github repo.

Here's a quick overview of how you would use this library in your project:

import {
  RemixIcon,
  riUserSmileFill,
  riUserSmileLine
} from '@mwarnerdotme/react-remixicon'

export default function MyComponent() {
  return (
    <>
      <RemixIcon icon={riUserSmileFill} size="1x" />
      <RemixIcon
        icon={riUserSmileLine}
        size="2x"
        color="#0000ff"
      />
      <RemixIcon
        icon={riUserSmileFill}
        size="lg"
        className='text-green-500'
      />
      <RemixIcon
        icon={riUserSmileFill}
        size="xxs"
        style={{ display: 'absolute' }}
      />
    </>
  );
}

Not to undermine the hard work outlined in this repo - these icons are incredible, and I'm so thankful that they're open source! However, we should have the ability to tree shake icons instead of importing a bunch of unused CSS/JS into every page of our app.

If you're looking for a quick overview of how it works, the build process will:

1. Read the SVG files in this repo
2. Stuff the SVG contents into a JSON object and save it to a file
3. Get sent up to NPM along with the React component - this component reads the newly generated icon object and adds some props on top for easy customization

[mwarnerdotme]

@xiaochunjimmy would you like to bring this repository into this repo or into your Github organization? I think it might be easier to find if it were available out of the box for anyone using these icons.

P.S. love the new icons! Thanks for all of your recent efforts in restoring this project!

[xiaochunjimmy]

Hi Michael,

Thank you so much for the efforts.

In this version update, we have also added component capabilities for React and Vue. We were once very conflicted about whether to use community contributions or directly support them in the official release. In the end, we chose the latter because it allows us to achieve automated publishing. However, we also understand that this may not be friendly towards community contributors, but we hope you can understand.

[mwarnerdotme]

This is great news! Thanks for adding direct React support :)