A CLI tool for Remix applications. Future versions will support adding external commands.
npm install -D rmx-cliGenerate SVG sprites recursively from SOURCE_FOLDER. It generates the sprite file,
as well as a React component to create the icon by specifying the fully-typed icon name.
It also exports the href 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.
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 this
template file.
NOTE: The React component name will be the filename in TitleCase
npx rmx-cli svg-sprite SOURCE_FOLDER OUTPUT_PATH [--components] [--template=TEMPLATE_FILE]Example:
npx rmx-cli svg-sprite assets/svg app/components/icons// import default Icon component and specify the icon by name
// import the href to the sprite file to use in `links` export
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" />
// OR import named icon components (using --components flag)
import {
ArchiveBoxIcon,
ArrowDownIcon,
CakeIcon,
href as outline24Icons,
} from "~/components/heroicons/24/outline";
// generate <link rel="preload"> for the sprite file
export const links: LinksFunction = () => [
{ rel: "preload", href: outline24Icons, as: "image" },
{ rel: "stylesheet", href: tailwindCss },
];
// control color and size using className
<ArchiveBoxIcon className="text-red-500 h-6 w-6" />
<ArrowDownIcon className="text-green-500 h-6 w-6" />
<CakeIcon className="text-blue-500 h-6 w-6" />Eject your Remix project from Remix App Server to Express
npx rmx-cli eject-rasScan for ESM package to add to remix.config.js serverDependenciesToBundle
npx rmx-cli get-esm-packages [package-name ...] Example:
npx rmx-cli get-esm-packages @remix-run/node @remix-run/reactList all Remix package versions installed in node_modules
npx rmx-cli versionTHis 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?
- Go back to importing from one file instead of adapter specific packages. If you ever switch adapters, just re-generate the remix.ts file.
- Adds support for overrides. Now you can override a standard Remix export with your own function. Like replacing
json,useLoaderData, etc. with theremix-typedjsonfunctions. - Add
"postinstall": "rmx gen-remix"to package.json to ensure the file is regenerated when upgrading Remix packages.
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/reactYou can also include an optional config (defaults to gen-remix.config.json) where you can specify overrides.
{
"exports": ["packageA", "packageB"],
"overrides": {
"<source-package>": [
"<original-package>": {
"<original-export>": "<new-source-export>",
...
},
"<original-package>": {
"<original-export>": "<new-source-export>",
...
}
],
...
}
}This config replaces the Remix json, redirect, useActionData, etc. with the versions for remix-typedjson.
{
"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 💻 |
This project follows the all-contributors specification. Contributions of any kind welcome!