diff --git a/README.md b/README.md index b65bf867..0155e8ae 100644 --- a/README.md +++ b/README.md @@ -88,6 +88,7 @@ Options: --config specify the path of the svgr config -d, --out-dir output files into a directory --ext specify a custom file extension (default: "js") + --filename-case specify filename case (pascal, kebab, camel) (default: "pascal") --icon use "1em" as width and height --native add react-native support with react-native-svg --ref add svgRef prop to svg diff --git a/packages/cli/README.md b/packages/cli/README.md index c3ddc52b..46541731 100644 --- a/packages/cli/README.md +++ b/packages/cli/README.md @@ -12,20 +12,33 @@ npm install @svgr/cli ## Usage -```js -import svgr from '@svgr/core' - -const svgCode = ` - - - -` - -svgr(svgCode, { icon: true }, { componentName: 'MyComponent' }).then(jsCode => { - console.log(jsCode) -}) +``` + Usage: index [options] + + Options: + + -V, --version output the version number + --config specify the path of the svgr config + -d, --out-dir output files into a directory + --ext specify a custom file extension (default: "js") + --filename-case specify filename case (pascal, kebab, camel) (default: "pascal") + --icon use "1em" as width and height + --native add react-native support with react-native-svg + --ref add svgRef prop to svg + --no-dimensions remove width and height from root SVG tag + --no-expand-props disable props expanding + --svg-attributes add some attributes to the svg + --replace-attr-values replace an attribute value + --template specify a custom template to use + --title-prop create a title element linked with props + --prettier-config Prettier config + --no-prettier disable Prettier + --svgo-config SVGO config + --no-svgo disable SVGO + -h, --help output usage information + + Examples: + svgr --replace-attr-values "#fff=currentColor" icon.svg ``` ## License diff --git a/packages/cli/package.json b/packages/cli/package.json index 39a759a5..cf0086fb 100644 --- a/packages/cli/package.json +++ b/packages/cli/package.json @@ -27,7 +27,9 @@ "chalk": "^2.4.1", "commander": "^2.16.0", "glob": "^7.1.2", + "lodash": "^4.17.10", "output-file-sync": "^2.0.1", "recursive-readdir": "^2.2.2" - } + }, + "devDependencies": {} } diff --git a/packages/cli/src/dirCommand.js b/packages/cli/src/dirCommand.js index 32e72f23..bb1371b1 100644 --- a/packages/cli/src/dirCommand.js +++ b/packages/cli/src/dirCommand.js @@ -3,13 +3,34 @@ import path from 'path' import outputFileSync from 'output-file-sync' import readdir from 'recursive-readdir' import { pascalCase } from '@svgr/core' +import camelCase from 'lodash/camelCase' +import kebabCase from 'lodash/kebabCase' import { stat, convertFile } from './util' -function rename(relative, ext) { +const CASE = { + KEBAB: 'kebab', // kebab-case + CAMEL: 'camel', // camelCase + PASCAL: 'pascal', // PascalCase +} + +function transformFilename(filename, filenameCase) { + switch (filenameCase) { + case CASE.KEBAB: + return kebabCase(filename) + case CASE.CAMEL: + return camelCase(filename) + case CASE.PASCAL: + return pascalCase(filename) + default: + throw new Error(`Unknown --filename-case ${filenameCase}`) + } +} + +function rename(relative, ext, filenameCase) { const relativePath = path.parse(relative) relativePath.ext = `.${ext}` - relativePath.name = pascalCase(relativePath.name) relativePath.base = null + relativePath.name = transformFilename(relativePath.name, filenameCase) return path.format(relativePath) } @@ -21,10 +42,14 @@ export function isCompilable(filename) { return COMPILABLE_EXTENSIONS.includes(ext) } -async function dirCommand(program, filenames, { ext = 'js', ...options }) { +async function dirCommand( + program, + filenames, + { ext = 'js', filenameCase = CASE.PASCAL, ...options }, +) { async function write(src, relative) { if (!isCompilable(relative)) return false - relative = rename(relative, ext) + relative = rename(relative, ext, filenameCase) const dest = path.join(program.outDir, relative) const code = await convertFile(src, options, { filePath: dest }) diff --git a/packages/cli/src/index.js b/packages/cli/src/index.js index be8d7fd4..4ae5aca4 100644 --- a/packages/cli/src/index.js +++ b/packages/cli/src/index.js @@ -40,6 +40,10 @@ program .option('--config ', 'specify the path of the svgr config') .option('-d, --out-dir ', 'output files into a directory') .option('--ext ', 'specify a custom file extension (default: "js")') + .option( + '--filename-case ', + 'specify filename case (pascal, kebab, camel) (default: "pascal")', + ) .option('--icon', 'use "1em" as width and height') .option('--native', 'add react-native support with react-native-svg') .option('--ref', 'add svgRef prop to svg') diff --git a/packages/core/src/config.test.js b/packages/core/src/config.test.js index e270e672..d18e3b52 100644 --- a/packages/core/src/config.test.js +++ b/packages/core/src/config.test.js @@ -30,7 +30,7 @@ describe('config', () => { const config = await resolveConfigFile( path.join(__dirname, '__fixtures__/svgr'), ) - expect(config).toMatch(/__fixtures__\/svgr\/\.svgrrc$/) + expect(config).toMatch(/__fixtures__(\/|\\)svgr(\/|\\)\.svgrrc$/) }) }) }) diff --git a/packages/rollup/src/index.test.js b/packages/rollup/src/index.test.js index f5aff9b9..09db13e0 100644 --- a/packages/rollup/src/index.test.js +++ b/packages/rollup/src/index.test.js @@ -10,7 +10,7 @@ const compile = (plugins = [svgr()]) => }) const getCode = bundler => - bundler.modules.find(({ id }) => id.includes('__fixtures__/simple/file.svg')) + bundler.modules.find(({ id }) => id.includes('__fixtures__/simple/file.svg') || id.includes('__fixtures__\\simple\\file.svg')) .code describe('rollup loader', () => { diff --git a/yarn.lock b/yarn.lock index 3fb61a57..b02581ee 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1230,7 +1230,7 @@ babel-loader@^7.1.5: loader-utils "^1.0.2" mkdirp "^0.5.1" -babel-loader@^8.0.0: +babel-loader@^8.0.0-beta.4: version "8.0.0-beta.4" resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-8.0.0-beta.4.tgz#c3fab00696c385c70c04dbe486391f0eb996f345" dependencies: