feat: support custom file extension (#47)

Closes #31

Author: jstcki

README.md

@@ -90,6 +90,7 @@ Options:
   --no-svgo                        disable SVGO (default: true)
   --no-prettier                    disable Prettier (default: true)
   --template <file>                specify a custom template to use
+  --ext <ext>                      specify a custom file extension to use (default: "js")
   --no-expand-props                disable props expanding (default: true)
   --ref                            add svgRef prop to svg
   --icon                           use "1em" as width and height
@@ -320,6 +321,14 @@ example of template, see [the default one](src/transforms/wrapIntoComponent.js).
 | ---------------------------------------------------------- | ------------ | ------------------ |
 | [`wrapIntoComponent`](src/transforms/wrapIntoComponent.js) | `--template` | `template: <func>` |
 
+### File extension
+
+Specify a custom extension for generated files.
+
+| Default | CLI Override | API Override    |
+| ------- | ------------ | --------------- |
+| `"js"`  | `--ext`      | `ext: <string>` |
+
 ### Expand props
 
 All properties given to component will be forwarded on SVG tag.

src/cli/dirCommand.js

@@ -5,9 +5,9 @@ import outputFileSync from 'output-file-sync'
 import { convertFile, isCompilableExtension, readdir } from './util'
 import { pascalCase } from '../transforms/rename'
 
-export const rename = relative => {
+export const rename = (relative, { ext = 'js' } = {}) => {
   const relativePath = path.parse(relative)
-  relativePath.ext = '.js'
+  relativePath.ext = `.${ext}`
   relativePath.name = pascalCase(relativePath.name)
   relativePath.base = null
 
@@ -18,7 +18,7 @@ async function dirCommand(program, filenames, opts) {
   async function write(src, relative) {
     if (!isCompilableExtension(relative)) return false
 
-    relative = rename(relative)
+    relative = rename(relative, opts)
 
     const dest = path.join(program.outDir, relative)
 

src/cli/dirCommand.test.js

@@ -8,8 +8,13 @@ describe('rename', () => {
     expect(rename('camelcase.js')).toBe('Camelcase.js')
   })
 
-  it('should change the extension to js', () => {
+  it('should change the extension to js by default', () => {
     const result = rename('camel-case.svg')
     expect(result).toBe('CamelCase.js')
   })
+
+  it('should change the extension to whatever is configured', () => {
+    const result = rename('camel-case.svg', { ext: 'tsx' })
+    expect(result).toBe('CamelCase.tsx')
+  })
 })

src/cli/index.js

@@ -22,6 +22,7 @@ program
   .option('--no-svgo', 'disable SVGO')
   .option('--no-prettier', 'disable Prettier')
   .option('--template <file>', 'specify a custom template to use')
+  .option('--ext <ext>', 'specify a custom file extension (default: "js")')
   .option('--no-expand-props', 'disable props expanding')
   .option('--ref', 'add svgRef prop to svg')
   .option('--icon', 'use "1em" as width and height')

src/configToOptions.js

@@ -31,6 +31,7 @@ const defaultConfig = {
   bracketSpacing: undefined, // default to prettier
   jsxBracketSameLine: undefined, // default to prettier
   template: wrapIntoComponent,
+  ext: 'js',
 }
 
 function configToOptions(config = {}) {
@@ -83,6 +84,7 @@ function configToOptions(config = {}) {
     },
     prettier: config.prettier ? getPrettierConfig() : null,
     template: config.template(config),
+    ext: config.ext,
   }
 }