Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add option to removeDimensions #58

Merged
merged 8 commits into from
Mar 8, 2018
Merged

add option to removeDimensions #58

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
2508596
Sort options
lifeiscontent Mar 5, 2018
6fb488c
sort defaults
lifeiscontent Mar 5, 2018
e35720b
Add --no-dimensions option
lifeiscontent Mar 5, 2018
1d7336f
Sort docs
lifeiscontent Mar 5, 2018
13c6900
Add docs
lifeiscontent Mar 5, 2018
8244b29
Add more tests, clean up docs, and add --no-dimensions option
lifeiscontent Mar 7, 2018
48e0ab6
Remove useless docs
lifeiscontent Mar 8, 2018
4666d39
Update --no-dimensions implementation
lifeiscontent Mar 8, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions .eslintignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
node_modules/
lib/
__fixtures__
__fixtures_build__
coverage
examples
255 changes: 137 additions & 118 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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.
Expand All @@ -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
Expand All @@ -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
Expand All @@ -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

Expand All @@ -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

Expand All @@ -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
Expand All @@ -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

Expand Down
Loading