A CLI for remix-run
npm install rmx-cli
A CLI tool for Remix applications. Future versions will support adding external
commands.
``bash`
npm install -D rmx-cli
Generate SVG sprites recursively from SOURCE_FOLDER. It generates the sprite file,href
as well as a React component to create the icon by specifying the fully-typed icon name.
It also exports the of the sprite file to use in the Remix links export.
The OUTPUT_PATH can be a folder or a filename. If it is a filename, that will be used
as the base name if there are multiple source folders. For example:
_components/icons/icon.tsx_ will generate an _icons.tsx_ and _icons.svg_ file for every
source folder.
If you want to generate a React component for _each_ icon, then add the --components
argument. Then you can import the named icon directly.
> NOTE: The React component name will be the filename in TitleCase
You can specify a custom template file that will be used as the base for the generated
React component. The typed IconNames and exported components will be be appended to thisexport const iconNames = ["..."] as const
template file. An array of icon names is also exported:
Here's a sample template file:
`ts
import { type SVGProps } from 'react'
import { cn } from '~/utils/misc'
import href from './sprite.svg'
export { href }
const sizeClassName = {
font: 'w-font h-font',
xs: 'w-3 h-3',
sm: 'w-4 h-4',
md: 'w-5 h-5',
lg: 'w-6 h-6',
xl: 'w-7 h-7',
} as const
type Size = keyof typeof sizeClassName
export default function Icon({
icon,
size = 'font',
className,
...props
}: SVGProps
return (
{...props}
className={cn(sizeClassName[size], 'inline self-center', className)}
>
`
npx rmx-cli svg-sprite SOURCE_FOLDER OUTPUT_PATH [--components]
[--template=TEMPLATE_FILE]
[--components-template=TEMPLATE_FILE]
[--fill=COLOR] [--stroke=COLOR]
SOURCE_FOLDER: folder containing .svg files
OUTPUT_PATH: output path for sprite file and components
* If OUTPUT_PATH ends with .tsx, then use this as the base filename
(default: icon.tsx)
--sprite=FILENAME: base filename of sprite file (default: icon.svg)
--types=FILENAME : base filename of IconType export file
if present, will not generate component file
--components : generate named components for each icon
--template=TEMPLATE_FILE: use custom template file
--fill=COLOR : specify fill color or "keep" to keep original colors
default is "currentColor"
--stroke=COLOR : specify stroke color or "keep" to keep original colors
default is "currentColor"
`
_Example:_
`bash`
npx rmx-cli svg-sprite assets/svg app/components/icons
`tslinks
// import default Icon component and specify the icon by name
// import the href to the sprite file to use in export
import {
default as RadixIcon,
href as radixIcons,
} from "~/components/radixicons";
// OR import named icon components (using --components flag)
import {
ArchiveBoxIcon,
ArrowDownIcon,
CakeIcon,
href as outline24Icons,
} from "~/components/heroicons/24/outline";
// generate for the sprite file
export const links: LinksFunction = () => [
{ rel: "preload", href: outline24Icons, as: "image" },
{ rel: "stylesheet", href: tailwindCss },
];
// control color and size using className
`
![]()
Eject your Remix project from Remix App Server to Express
`bash`
npx rmx-cli eject-ras
Scan for ESM package to add to _remix.config.js_ serverDependenciesToBundle
`bash`
npx rmx-cli get-esm-packages [package-name ...]
`bash`
Example:
npx rmx-cli get-esm-packages @remix-run/node @remix-run/react
List all Remix package versions installed in node_modules
`bash`
npx rmx-cli version
THis script will generate a _remix.ts_ file which re-exports all exports
from specified packages. This essentially works like the _magic_ remix
package from early Remix.
Why is this useful?
1. Go back to importing from one file instead of adapter specific packages. If you ever switch adapters, just re-generate the _remix.ts_ file.
2. Adds support for overrides. Now you can override a standard Remix export with your own function. Like replacing json, useLoaderData, etc. with the remix-typedjson functions."postinstall": "rmx gen-remix"
3. Add to _package.json_ to ensure the file is regenerated when upgrading Remix packages.
`bash
Usage:
$ npx rmx gen-remix [options]
Options:
--config PATH Config path (default: ./gen-remix.config.json)
--packages PACKAGES List of packages to export
--output PATH Output path (default: ./app/remix.ts)
Example:
rmx gen-remix --packages @remix-run/node @remix-run/react
`
You can also include an optional config (defaults to _gen-remix.config.json_) where you can specify overrides.
`json`
{
"exports": ["packageA", "packageB"],
"overrides": {
"
"
"
...
},
"
"
...
}
],
...
}
}
This config replaces the Remix json, redirect, useActionData, etc. with the versions for remix-typedjson.
`json``
{
"exports": ["@remix-run/node", "@remix-run/react", "remix-typedjson"],
"overrides": {
"remix-typedjson": {
"@remix-run/node": {
"json": "typedjson",
"redirect": "redirect"
},
"@remix-run/react": {
"useActionData": "useTypedActionData",
"useFetcher": "useTypedFetcher",
"useLoaderData": "useTypedLoaderData"
}
}
}
}
Thanks goes to these wonderful people (emoji key):
Kiliman 💻 📖 | Roy Revelt 📖 | Kent C. Dodds 📖 | Kiran Dash 📖 | Andrew Cohen 💻 | Andrew Coppola 💻 | Markus Wolf 💻 |
Justin Hall 💻 🐛 | Florian Weinaug 💻 🐛 |
This project follows the all-contributors specification. Contributions of any kind welcome!