{"id":17059,"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.","status":"active","version":"0.4.16","language":"javascript","source_language":"en","source_url":"https://github.com/kiliman/rmx-cli","tags":["javascript","remix","cli","development","scaffolding","generator"],"install":[{"cmd":"npm install rmx-cli","lang":"bash","label":"npm"},{"cmd":"yarn add rmx-cli","lang":"bash","label":"yarn"},{"cmd":"pnpm add rmx-cli","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"This imports the default Icon component generated when the `--components` flag is NOT used. Use named imports for individual icons when `--components` IS used. Remix uses ESM.","wrong":"const RadixIcon = require('~/components/radixicons')","symbol":"RadixIcon","correct":"import { default as RadixIcon } from '~/components/radixicons'"},{"note":"The `href` export provides the path to the generated SVG sprite file, intended for use in Remix's `links` export for preloading assets.","wrong":"import spriteHref from '~/components/radixicons/sprite.svg'","symbol":"href","correct":"import { href as spriteHref } from '~/components/radixicons'"},{"note":"This import pattern is used when the `svg-sprite` command is run with the `--components` flag, generating individual named React components for each SVG. Component names are TitleCase filenames.","wrong":"import ArchiveBoxIcon from '~/components/heroicons/24/outline'","symbol":"ArchiveBoxIcon","correct":"import { ArchiveBoxIcon } from '~/components/heroicons/24/outline'"},{"note":"This imports the generated TypeScript type definition for available icon names, ensuring type safety when using the default `Icon` component.","symbol":"IconName","correct":"import { type IconName } from '~/components/radixicons'"}],"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();\n\n return (\n
\n

{message}

\n
\n

Using generated SVG icons:

\n {/* Example of using the default Icon component */}\n \n \n {/* If using --components, you would use:\n \n \n */}\n
\n
\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."},"warnings":[{"fix":"Carefully review the `OUTPUT_PATH` argument and its interaction with the `--sprite` and `--types` flags in the documentation to ensure files are generated where expected.","message":"The behavior of `OUTPUT_PATH` differs based on whether it's a folder or a filename. If it's a folder, `rmx-cli` will generate `icons.tsx` and `icons.svg` (by default) within it. If it's a filename (e.g., `app/components/icons/my-icons.tsx`), that filename will be used as the base for both the TypeScript component and the SVG sprite.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Decide on your preferred icon usage pattern before running the command. If switching, regenerate the sprites and update all icon imports and usages in your application.","message":"The `svg-sprite` command's `--components` flag significantly alters how you import and use icons. Without it, you import a single default `Icon` component and pass an `icon` prop. With it, you import specific named components for each SVG, which are then used directly as JSX elements.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"When generating sprites, if you notice icons losing their original colors, re-run the `svg-sprite` command with `--fill=keep` and/or `--stroke=keep`.","message":"By default, `rmx-cli`'s `svg-sprite` command sets `fill` and `stroke` attributes to `currentColor`, which allows icons to inherit text color via CSS. If your SVGs have specific embedded colors that you wish to preserve, you must use `--fill=keep` and/or `--stroke=keep` arguments.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Pin `rmx-cli` to exact versions in `package.json` (`\"rmx-cli\": \"0.4.16\"`) for production builds, and manually review changes when upgrading to a new version.","message":"The package is in a 0.x version series, meaning its API is not yet stable and breaking changes may occur in minor or patch releases without following strict semantic versioning practices. Always check the changelog when updating.","severity":"gotcha","affected_versions":">=0.1.0"}],"env_vars":null,"last_verified":"2026-04-22T00:00:00.000Z","next_check":"2026-07-21T00:00:00.000Z","problems":[{"fix":"Ensure `rmx-cli` is installed as a development dependency: `npm install -D rmx-cli` or `yarn add -D rmx-cli`. Then, execute commands using `npx rmx-cli ...`.","cause":"`rmx-cli` is not installed or `npx` cannot locate it in your project's `node_modules`.","error":"Error: Unknown command 'svg-sprite'"},{"fix":"Verify the `OUTPUT_PATH` argument used with `rmx-cli svg-sprite`. Ensure the path in your `import` statement exactly matches the generated file's location (e.g., `app/components/icons/icons.tsx`). Also, check for typos in the path or filename.","cause":"The generated icon component file path is incorrect, or the file was not generated as expected.","error":"Cannot find module '~/components/icons/icons' or its corresponding type declarations."},{"fix":"If using the default `Icon` component, ensure it's imported (e.g., `import Icon from '...'`) and you pass `icon=\"name\"`. If using named components (e.g., `import { BookmarkIcon } from '...'`), use them directly as `` without an `icon` prop.","cause":"You are attempting to use the default `Icon` component's `icon` prop on a named icon component (e.g., `BookmarkIcon`), or vice-versa.","error":"Type error: Property 'icon' does not exist on type 'SVGProps'"}],"ecosystem":"npm","meta_description":null}