feat: add snake_case filename option (#857)

Author: Joe Gores

packages/cli/README.md

@@ -22,7 +22,7 @@ Options:
   -d, --out-dir <dirname>          output files into a directory
   --ignore-existing                ignore existing files when used with --out-dir
   --ext <ext>                      specify a custom file extension (default: "js")
-  --filename-case <case>           specify filename case ("pascal", "kebab", "camel") (default: "pascal")
+  --filename-case <case>           specify filename case ("pascal", "kebab", "camel", "snake") (default: "pascal")
   --icon                           use "1em" as width and height
   --native                         add react-native support with react-native-svg
   --memo                           add React.memo into the result component

packages/cli/package.json

@@ -39,7 +39,8 @@
     "chalk": "^4.1.2",
     "commander": "^9.4.1",
     "dashify": "^2.0.0",
-    "glob": "^8.0.3"
+    "glob": "^8.0.3",
+    "snake-case": "^3.0.4"
   },
   "devDependencies": {
     "@types/glob": "^8.1.0",

packages/cli/src/__snapshots__/index.test.ts.snap

@@ -131,6 +131,16 @@ exports[`cli should support different filename cases with directory output: --fi
 ]
 `;
 
+exports[`cli should support different filename cases with directory output: --filename-case=snake 1`] = `
+[
+  "camel_case.js",
+  "index.js",
+  "kebab_case.js",
+  "multiple_dashes.js",
+  "pascal_case.js",
+]
+`;
+
 exports[`cli should support stdin filepath 1`] = `
 "import * as React from 'react'
 const SvgFile = (props) => (

packages/cli/src/index.test.ts

@@ -147,6 +147,7 @@ describe('cli', () => {
     [1, '--filename-case=camel'],
     [2, '--filename-case=pascal'],
     [3, '--filename-case=kebab'],
+    [4, '--filename-case=snake'],
   ])(
     'should support different filename cases with directory output',
     async (index, args) => {

packages/cli/src/index.ts

@@ -103,7 +103,7 @@ program
   .option('--ext <ext>', 'specify a custom file extension (default: "js")')
   .option(
     '--filename-case <case>',
-    'specify filename case ("pascal", "kebab", "camel") (default: "pascal")',
+    'specify filename case ("pascal", "kebab", "camel", "snake") (default: "pascal")',
   )
   .option(
     '--icon [size]',

packages/cli/src/util.test.ts

@@ -25,10 +25,12 @@ describe('util', () => {
       expect(transformFilename('FooBar', 'camel')).toBe('fooBar')
       expect(transformFilename('FooBar', 'kebab')).toBe('foo-bar')
       expect(transformFilename('FooBar', 'pascal')).toBe('FooBar')
+      expect(transformFilename('FooBar', 'snake')).toBe('foo_bar')
 
       expect(transformFilename('foo_bar', 'camel')).toBe('fooBar')
       expect(transformFilename('foo_bar', 'kebab')).toBe('foo-bar')
       expect(transformFilename('foo_bar', 'pascal')).toBe('FooBar')
+      expect(transformFilename('foo_bar', 'snake')).toBe('foo_bar')
     })
   })
 

packages/cli/src/util.ts

@@ -9,6 +9,7 @@ import prettier from '@svgr/plugin-prettier'
 import camelCase from 'camelcase'
 // @ts-ignore
 import dashify from 'dashify'
+import { snakeCase } from 'snake-case'
 
 export function transformFilename(
   filename: string,
@@ -21,6 +22,8 @@ export function transformFilename(
       return camelCase(filename)
     case 'pascal':
       return camelCase(filename, { pascalCase: true })
+    case 'snake':
+      return snakeCase(filename)
     default:
       throw new Error(`Unknown --filename-case ${filenameCase}`)
   }

packages/core/package.json

@@ -41,7 +41,8 @@
     "@babel/core": "^7.21.3",
     "@svgr/babel-preset": "workspace:*",
     "camelcase": "^6.2.0",
-    "cosmiconfig": "^8.1.3"
+    "cosmiconfig": "^8.1.3",
+    "snake-case": "^3.0.4"
   },
   "devDependencies": {
     "svgo": "^3.0.2"