rmx-cli - npm Package Compare versions

Comparing version 0.4.6 to 0.4.7

CHANGELOG.md

 # CHANGELOG
 
+## 🚀 v0.4.7
+
+- 🐛 Fix hardcoded sprite import (#11)
+
 ## 🚀 v0.4.6
@@ -4,0 +8,0 @@

dist/commands/svg-sprite.js

@@ -94,5 +94,6 @@ var __create = Object.create;
   let icons = files.map((file) => path.basename(file, ".svg"));
+  const spritePath = path.basename(outputFilename, ".tsx") + ".svg";
   let component = template != null ? template : `
 import { type SVGProps } from "react";
-import href from "./sprite.svg";
+import href from "./${spritePath}";
 export { href };
@@ -99,0 +100,0 @@

package.json

 {
   "name": "rmx-cli",
-  "version": "0.4.6",
+  "version": "0.4.7",
   "description": "A CLI for remix-run",
@@ -5,0 +5,0 @@ "author": "Michael J. Carter <[e-mail]> (https://kiliman.dev/)",

README.md

 # rmx-cli
 
 <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
-
-[![All Contributors](https://img.shields.io/badge/all_contributors-4-orange.svg?style=flat-square)](#contributors-)
-
+[![All Contributors](https://img.shields.io/badge/all_contributors-5-orange.svg?style=flat-square)](#contributors-)
 <!-- ALL-CONTRIBUTORS-BADGE:END -->
@@ -34,2 +32,4 @@
 
+> 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
@@ -39,4 +39,38 @@ React component. The typed `IconNames` and exported components will be be appended to this
 
-> NOTE: The React component name will be the filename in TitleCase
+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<SVGSVGElement> & { icon: IconName; size?: Size }) {
+  return (
+    <svg
+      {...props}
+      className={cn(sizeClassName[size], 'inline self-center', className)}
+    >
+      <use href={`${href}#${icon}`} />
+    </svg>
+  )
+}
+```
+
 ```bash
@@ -204,2 +238,3 @@ npx rmx-cli svg-sprite SOURCE_FOLDER OUTPUT_PATH [--components] [--template=TEMPLATE_FILE]
     <td align="center"><a href="http://bgwebagency.in/"><img src="https://avatars.githubusercontent.com/u/13310363?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Kiran Dash</b></sub></a><br /><a href="https://github.com/Kiliman/rmx-cli/commits?author=kirandash" title="Documentation">📖</a></td>
+    <td align="center"><a href="https://github.com/andrewcohen"><img src="https://avatars.githubusercontent.com/u/1016046?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Andrew Cohen</b></sub></a><br /><a href="https://github.com/Kiliman/rmx-cli/commits?author=andrewcohen" title="Code">💻</a></td>
   </tr>
@@ -206,0 +241,0 @@ </table>

No alert changes

Improved metrics

Total package byte prevSize

38429

increased by2.94%

Lines of code

639

increased by0.16%

Number of lines in readme file

246

increased by16.59%

No dependency changes