feat: add option to removeDimensions (#58)

* Sort options * sort defaults * Add --no-dimensions option * Sort docs * Add docs * Add more tests, clean up docs, and add --no-dimensions option * Remove useless docs * Update --no-dimensions implementation
gregberge · Mar 8, 2018 · 7357e7c · 7357e7c
1 parent ecf61a3
commit 7357e7c
Show file tree

Hide file tree

Showing 7 changed files with 513 additions and 206 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -1,3 +1,6 @@
 node_modules/
 lib/
 __fixtures__
+__fixtures_build__
+coverage
+examples
diff --git a/README.md b/README.md
@@ -85,30 +85,31 @@ Usage: svgr [options] <file>
 
 Options:
 
-  -V, --version                    output the version number
-  -d, --out-dir <dirname>          output files into a directory
-  --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
+  --help, -h                       output usage information
   --icon                           use "1em" as width and height
-  --no-view-box                    remove viewBox (default: true)
-  --native                         add react-native support with react-native-svg
-  --replace-attr-value [old=new]   replace an attribute value
-  -p, --precision <value>          set the number of digits in the fractional part (svgo)
   --ids                            keep ids within the svg (svgo)
+  --jsx-bracket-same-line          put the > of a multi-line JSX element at the end of the last line instead of being alone on the next line (prettier)
   --keep-useless-defs              keep elements of <defs> without id (svgo)
-  --no-title                       remove title tag (svgo) (default: true)
-  --tab-width                      specify the number of spaces by indentation-level (prettier)
-  --use-tabs                       indent lines with tabs instead of spaces (prettier)
+  --native                         add react-native support with react-native-svg
+  --no-bracket-spacing             print spaces between brackets in object literals (prettier) (default: true)
+  --no-dimensions                  remove width and height from root SVG tag (default: false)
+  --no-expand-props                disable props expanding (default: true)
+  --no-prettier                    disable Prettier (default: true)
   --no-semi                        remove semi-colons (prettier) (default: true)
+  --no-svgo                        disable SVGO (default: true)
+  --no-title                       remove title tag (svgo) (default: true)
+  --no-view-box                    remove viewBox (default: true)
+  --out-dir, -d <dirname>          output files into a directory
+  --precision, -p <value>          set the number of digits in the fractional part (svgo)
+  --ref                            add svgRef prop to svg
+  --replace-attr-value [old=new]   replace an attribute value
   --single-quote                   use single-quotes instead of double-quotes (prettier)
+  --tab-width                      specify the number of spaces by indentation-level (prettier)
+  --template <file>                specify a custom template to use
   --trailing-comma <none|es5|all>  print trailing commas wherever possible when multi-line (prettier)
-  --no-bracket-spacing             print spaces between brackets in object literals (prettier) (default: true)
-  --jsx-bracket-same-line          put the > of a multi-line JSX element at the end of the last line instead of being alone on the next line (prettier)
-  -h, --help                       output usage information
+  --use-tabs                       indent lines with tabs instead of spaces (prettier)
+  --version, -V                    output the version number
 
 Examples:
   svgr --replace-attr-value "#fff=currentColor" icon.svg
@@ -317,33 +318,6 @@ By default, `svgr/webpack` includes a `babel-loader` with [optimized configurati
 SVGR ships with a handful of customizable options, usable in both the CLI and
 API.
 
-### SVGO
-
-Use [SVGO](https://github.com/svg/svgo/) to optimize SVG code before
-transforming it into a component.
-
-| Default | CLI Override | API Override   |
-| ------- | ------------ | -------------- |
-| `true`  | `--no-svgo`  | `svgo: <bool>` |
-
-### Prettier
-
-Use [Prettier](https://github.com/prettier/prettier) to format JavaScript code
-output.
-
-| Default | CLI Override    | API Override       |
-| ------- | --------------- | ------------------ |
-| `true`  | `--no-prettier` | `prettier: <bool>` |
-
-### Template
-
-Specify a template file (CLI) or a template function (API) to use. For an
-example of template, see [the default one](src/transforms/wrapIntoComponent.js).
-
-| Default                                                    | CLI Override | API Override       |
-| ---------------------------------------------------------- | ------------ | ------------------ |
-| [`wrapIntoComponent`](src/transforms/wrapIntoComponent.js) | `--template` | `template: <func>` |
-
 ### File extension
 
 Specify a custom extension for generated files.
@@ -352,14 +326,6 @@ Specify a custom extension for generated files.
 | ------- | ------------ | --------------- |
 | `"js"`  | `--ext`      | `ext: <string>` |
 
-### Expand props
-
-All properties given to component will be forwarded on SVG tag.
-
-| Default | CLI Override        | API Override          |
-| ------- | ------------------- | --------------------- |
-| `true`  | `--no-expand-props` | `expandProps: <bool>` |
-
 ### Icon
 
 Replace SVG "width" and "height" value by "1em" in order to make SVG size
@@ -369,6 +335,36 @@ inherits from text size. Also remove title.
 | ------- | ------------ | -------------- |
 | `false` | `--icon`     | `icon: <bool>` |
 
+### Ids
+
+Setting this to `true` will keep ids. It can be useful to target specific ids
+using CSS or third party library (eg:
+[react-mutate-icon](https://github.com/lifeiscontent/react-mutate-icon)).
+
+| Default | CLI Override | API Override  |
+| ------- | ------------ | ------------- |
+| `false` | `--ids`      | `ids: <bool>` |
+
+### JSX Brackets
+
+Put the `>` of a multi-line JSX element at the end of the last line instead of
+being alone on the next line (does not apply to self closing elements). See
+[Prettier](https://github.com/prettier/prettier/blob/master/README.md#jsx-brackets).
+
+| Default | CLI Override              | API Override                 |
+| ------- | ------------------------- | ---------------------------- |
+| `false` | `--jsx-bracket-same-line` | `jsxBracketSameLine: <bool>` |
+
+
+### Useless Defs
+
+Keep elements of `<defs>` without `id`. It also keep unused symbols. See
+[SVGO `removeUselessDefs` plugin](https://github.com/svg/svgo).
+
+| Default | CLI Override          | API Override              |
+| ------- | --------------------- | ------------------------- |
+| `false` | `--keep-useless-defs` | `keepUselessDefs: <bool>` |
+
 ### Native
 
 Modify all SVG nodes with uppercase and use a specific template with
@@ -378,58 +374,58 @@ react-native-svg imports. **All unsupported nodes will be removed.**
 | ------- | ------------ | ---------------- |
 | `false` | `--native`   | `native: <bool>` |
 
-### ViewBox
 
-Setting this to `false` will remove the viewBox property.
+### Bracket Spacing
 
-| Default | CLI Override    | API Override      |
-| ------- | --------------- | ----------------- |
-| `true`  | `--no-view-box` | `viewBox: <bool>` |
+Print spaces between brackets in object literals. See
+[Prettier](https://github.com/prettier/prettier/blob/master/README.md#bracket-spacing).
 
-### Ids
+| Default | CLI Override           | API Override             |
+| ------- | ---------------------- | ------------------------ |
+| `true`  | `--no-bracket-spacing` | `bracketSpacing: <bool>` |
 
-Setting this to `true` will keep ids. It can be useful to target specific ids
-using CSS or third party library (eg:
-[react-mutate-icon](https://github.com/lifeiscontent/react-mutate-icon)).
+### Dimensions
 
-| Default | CLI Override | API Override  |
-| ------- | ------------ | ------------- |
-| `false` | `--ids`      | `ids: <bool>` |
+Remove width and height from root SVG tag.
 
-### Ref
+| Default | CLI Override      | API Override         |
+| ------- | ----------------- | -------------------- |
+| `false` | `--no-dimensions` | `dimensions: <bool>` |
 
-Setting this to `true` will allow you to hook into the ref of the svg components that are created by exposing a `svgRef` prop
+### Expand props
 
-| Default | CLI Override | API Override  |
-| ------- | ------------ | ------------- |
-| `false` | `--ref`      | `ref: <bool>` |
+All properties given to component will be forwarded on SVG tag.
 
-### Replace attribute value
+| Default | CLI Override        | API Override          |
+| ------- | ------------------- | --------------------- |
+| `true`  | `--no-expand-props` | `expandProps: <bool>` |
 
-Replace an attribute value by an other. The main usage of this option is to
-change an icon color to "currentColor" in order to inherit from text color.
+### Prettier
 
-| Default | CLI Override                     | API Override                    |
-| ------- | -------------------------------- | ------------------------------- |
-| `[]`    | `--replace-attr-value <old=new>` | `replaceAttrValues: <string[]>` |
+Use [Prettier](https://github.com/prettier/prettier) to format JavaScript code
+output.
 
-### Precision
+| Default | CLI Override    | API Override       |
+| ------- | --------------- | ------------------ |
+| `true`  | `--no-prettier` | `prettier: <bool>` |
 
-Set number of digits in the fractional part. See
-[SVGO](https://github.com/svg/svgo).
+### Semicolons
 
-| Default | CLI Override        | API Override       |
-| ------- | ------------------- | ------------------ |
-| `3`     | `--precision <int>` | `precision: <int>` |
+Print semicolons at the ends of statements. See
+[Prettier](https://github.com/prettier/prettier/blob/master/README.md#semicolons).
 
-### Useless Defs
+| Default | CLI Override | API Override   |
+| ------- | ------------ | -------------- |
+| `true`  | `--no-semi`  | `semi: <bool>` |
 
-Keep elements of `<defs>` without `id`. It also keep unused symbols. See
-[SVGO `removeUselessDefs` plugin](https://github.com/svg/svgo).
+### SVGO
 
-| Default | CLI Override          | API Override              |
-| ------- | --------------------- | ------------------------- |
-| `false` | `--keep-useless-defs` | `keepUselessDefs: <bool>` |
+Use [SVGO](https://github.com/svg/svgo/) to optimize SVG code before
+transforming it into a component.
+
+| Default | CLI Override | API Override   |
+| ------- | ------------ | -------------- |
+| `true`  | `--no-svgo`  | `svgo: <bool>` |
 
 ### Title
 
@@ -440,32 +436,30 @@ Remove the title from SVG. See
 | ------- | ------------ | --------------- |
 | `true`  | `--no-title` | `title: <bool>` |
 
-### Tab Width
+### ViewBox
 
-Specify the number of spaces per indentation-level. See
-[Prettier](https://github.com/prettier/prettier/blob/master/README.md#tab-width).
+Setting this to `false` will remove the viewBox property.
 
-| Default | CLI Override        | API Override      |
-| ------- | ------------------- | ----------------- |
-| `2`     | `--tab-width <int>` | `tabWidth: <int>` |
+| Default | CLI Override    | API Override      |
+| ------- | --------------- | ----------------- |
+| `true`  | `--no-view-box` | `viewBox: <bool>` |
 
-### Tabs
+### Ref
 
-Indent lines with tabs instead of spaces. See
-[Prettier](https://github.com/prettier/prettier/blob/master/README.md#tabs).
+Setting this to `true` will allow you to hook into the ref of the svg components that are created by exposing a `svgRef` prop
 
-| Default | CLI Override | API Override      |
-| ------- | ------------ | ----------------- |
-| `false` | `--use-tabs` | `useTabs: <bool>` |
+| Default | CLI Override | API Override  |
+| ------- | ------------ | ------------- |
+| `false` | `--ref`      | `ref: <bool>` |
 
-### Semicolons
+### Replace attribute value
 
-Print semicolons at the ends of statements. See
-[Prettier](https://github.com/prettier/prettier/blob/master/README.md#semicolons).
+Replace an attribute value by an other. The main usage of this option is to
+change an icon color to "currentColor" in order to inherit from text color.
 
-| Default | CLI Override | API Override   |
-| ------- | ------------ | -------------- |
-| `true`  | `--no-semi`  | `semi: <bool>` |
+| Default | CLI Override                     | API Override                    |
+| ------- | -------------------------------- | ------------------------------- |
+| `[]`    | `--replace-attr-value <old=new>` | `replaceAttrValues: <string[]>` |
 
 ### Quotes
 
@@ -476,6 +470,24 @@ Use single quotes instead of double quotes. See
 | ------- | ---------------- | --------------------- |
 | `false` | `--single-quote` | `singleQuote: <bool>` |
 
+### Tab Width
+
+Specify the number of spaces per indentation-level. See
+[Prettier](https://github.com/prettier/prettier/blob/master/README.md#tab-width).
+
+| Default | CLI Override        | API Override      |
+| ------- | ------------------- | ----------------- |
+| `2`     | `--tab-width <int>` | `tabWidth: <int>` |
+
+### Template
+
+Specify a template file (CLI) or a template function (API) to use. For an
+example of template, see [the default one](src/transforms/wrapIntoComponent.js).
+
+| Default                                                    | CLI Override | API Override       |
+| ---------------------------------------------------------- | ------------ | ------------------ |
+| [`wrapIntoComponent`](src/transforms/wrapIntoComponent.js) | `--template` | `template: <func>` |
+
 ### Trailing Commas
 
 Print trailing commas wherever possible when multi-line. See
@@ -485,24 +497,31 @@ Print trailing commas wherever possible when multi-line. See
 | -------- | ------------------------------------------------------ | ------------------------------------------------------ |
 | `"none"` | <code>--trailing-comma <none&#124;es5&#124;all></code> | <code>trailingComma: "<none&#124;es5&#124;all>"</code> |
 
-### Bracket Spacing
+### Tabs
 
-Print spaces between brackets in object literals. See
-[Prettier](https://github.com/prettier/prettier/blob/master/README.md#bracket-spacing).
+Indent lines with tabs instead of spaces. See
+[Prettier](https://github.com/prettier/prettier/blob/master/README.md#tabs).
 
-| Default | CLI Override           | API Override             |
-| ------- | ---------------------- | ------------------------ |
-| `true`  | `--no-bracket-spacing` | `bracketSpacing: <bool>` |
+| Default | CLI Override | API Override      |
+| ------- | ------------ | ----------------- |
+| `false` | `--use-tabs` | `useTabs: <bool>` |
 
-### JSX Brackets
+### Output Directory
 
-Put the `>` of a multi-line JSX element at the end of the last line instead of
-being alone on the next line (does not apply to self closing elements). See
-[Prettier](https://github.com/prettier/prettier/blob/master/README.md#jsx-brackets).
+Output files into a directory.
 
-| Default | CLI Override              | API Override                 |
-| ------- | ------------------------- | ---------------------------- |
-| `false` | `--jsx-bracket-same-line` | `jsxBracketSameLine: <bool>` |
+| Default     | CLI Override          | API Override        |
+| ----------- | --------------------- | ------------------- |
+| `undefined` | `--out-dir <dirname>` | `outDir: <dirname>` |
+
+### Precision
+
+Set number of digits in the fractional part. See
+[SVGO](https://github.com/svg/svgo).
+
+| Default | CLI Override        | API Override       |
+| ------- | ------------------- | ------------------ |
+| `3`     | `--precision <int>` | `precision: <int>` |
 
 ## Other projects