{"library":"rmx-cli","title":"Remix CLI","description":"rmx-cli is a command-line interface tool designed specifically for Remix applications, providing utility functions to enhance development workflows. The current stable version, as of the provided information, is 0.4.16. Its primary feature highlighted is the `svg-sprite` command, which automates the generation of SVG sprite files along with corresponding, fully-typed React components. This command can create either a single default `Icon` component that accepts an `icon` prop, or individual named components for each SVG, based on command-line flags. It also exports the `href` to the sprite file, facilitating its use in Remix's `links` export for preloading. The project appears to be actively maintained, with new features like `svg-sprite` recently introduced, though a fixed release cadence is not explicitly stated. A key differentiator is its tight integration with the Remix ecosystem, including type generation for icon names and components optimized for Remix's server-side rendering and asset linking.","language":"javascript","status":"active","last_verified":"Wed Apr 22","install":{"commands":["npm install rmx-cli"],"cli":{"name":"rmx-cli","version":null}},"imports":["import { default as RadixIcon } from '~/components/radixicons'","import { href as spriteHref } from '~/components/radixicons'","import { ArchiveBoxIcon } from '~/components/heroicons/24/outline'","import { type IconName } from '~/components/radixicons'"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import { json, type LinksFunction } from '@remix-run/node';\nimport { useLoaderData } from '@remix-run/react';\nimport tailwindCss from '~/styles/tailwind.css'; // Assuming you have tailwind CSS\n\n// Install the CLI:\n// npm install -D rmx-cli\n\n// Create a directory for your SVG assets, e.g., 'assets/svg'\n// Add some SVG files inside 'assets/svg'\n\n// Run the SVG sprite generation command:\n// npx rmx-cli svg-sprite assets/svg app/components/icons\n\n// The command above generates files like `app/components/icons/icons.tsx` and `app/components/icons/icons.svg`\n\n// Import the generated default Icon component and its sprite href\nimport Icon, { href as iconsSpriteHref } from '~/components/icons/icons';\n\n// If you used the --components flag, you would import specific icons like this:\n// import { BookmarkIcon, EnvelopeOpenIcon } from '~/components/icons/icons';\n\nexport const links: LinksFunction = () => [\n  { rel: 'preload', href: iconsSpriteHref, as: 'image' },\n  { rel: 'stylesheet', href: tailwindCss }\n];\n\nexport const loader = async () => {\n  return json({ message: 'Welcome to Remix!' });\n};\n\nexport default function Index() {\n  const { message } = useLoaderData<typeof loader>();\n\n  return (\n    <div className=\"font-sans p-4\">\n      <h1 className=\"text-3xl font-bold mb-4\">{message}</h1>\n      <div className=\"flex items-center space-x-2\">\n        <p>Using generated SVG icons:</p>\n        {/* Example of using the default Icon component */}\n        <Icon icon=\"bookmark\" size=\"lg\" className=\"text-blue-500\" />\n        <Icon icon=\"envelope-open\" size=\"lg\" className=\"text-green-500\" />\n        {/* If using --components, you would use:\n        <BookmarkIcon className=\"text-blue-500 w-6 h-6\" />\n        <EnvelopeOpenIcon className=\"text-green-500 w-6 h-6\" />\n        */}\n      </div>\n    </div>\n  );\n}\n","lang":"typescript","description":"This quickstart demonstrates installing `rmx-cli`, generating SVG sprites and React components, and then using them in a Remix route with proper link preloading.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}