Skip to content

Commit 7357e7c

Browse files
lifeiscontentgregberge
lifeiscontent
authored and
gregberge
committed
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
1 parent ecf61a3 commit 7357e7c

File tree

7 files changed

+513
-206
lines changed

7 files changed

+513
-206
lines changed

‎.eslintignore

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
11
node_modules/
22
lib/
33
__fixtures__
4+
__fixtures_build__
5+
coverage
6+
examples

‎README.md

Lines changed: 137 additions & 118 deletions
Original file line numberDiff line numberDiff line change
@@ -85,30 +85,31 @@ Usage: svgr [options] <file>
8585
8686
Options:
8787
88-
-V, --version output the version number
89-
-d, --out-dir <dirname> output files into a directory
90-
--no-svgo disable SVGO (default: true)
91-
--no-prettier disable Prettier (default: true)
92-
--template <file> specify a custom template to use
9388
--ext <ext> specify a custom file extension to use (default: "js")
94-
--no-expand-props disable props expanding (default: true)
95-
--ref add svgRef prop to svg
89+
--help, -h output usage information
9690
--icon use "1em" as width and height
97-
--no-view-box remove viewBox (default: true)
98-
--native add react-native support with react-native-svg
99-
--replace-attr-value [old=new] replace an attribute value
100-
-p, --precision <value> set the number of digits in the fractional part (svgo)
10191
--ids keep ids within the svg (svgo)
92+
--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)
10293
--keep-useless-defs keep elements of <defs> without id (svgo)
103-
--no-title remove title tag (svgo) (default: true)
104-
--tab-width specify the number of spaces by indentation-level (prettier)
105-
--use-tabs indent lines with tabs instead of spaces (prettier)
94+
--native add react-native support with react-native-svg
95+
--no-bracket-spacing print spaces between brackets in object literals (prettier) (default: true)
96+
--no-dimensions remove width and height from root SVG tag (default: false)
97+
--no-expand-props disable props expanding (default: true)
98+
--no-prettier disable Prettier (default: true)
10699
--no-semi remove semi-colons (prettier) (default: true)
100+
--no-svgo disable SVGO (default: true)
101+
--no-title remove title tag (svgo) (default: true)
102+
--no-view-box remove viewBox (default: true)
103+
--out-dir, -d <dirname> output files into a directory
104+
--precision, -p <value> set the number of digits in the fractional part (svgo)
105+
--ref add svgRef prop to svg
106+
--replace-attr-value [old=new] replace an attribute value
107107
--single-quote use single-quotes instead of double-quotes (prettier)
108+
--tab-width specify the number of spaces by indentation-level (prettier)
109+
--template <file> specify a custom template to use
108110
--trailing-comma <none|es5|all> print trailing commas wherever possible when multi-line (prettier)
109-
--no-bracket-spacing print spaces between brackets in object literals (prettier) (default: true)
110-
--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)
111-
-h, --help output usage information
111+
--use-tabs indent lines with tabs instead of spaces (prettier)
112+
--version, -V output the version number
112113
113114
Examples:
114115
svgr --replace-attr-value "#fff=currentColor" icon.svg
@@ -317,33 +318,6 @@ By default, `svgr/webpack` includes a `babel-loader` with [optimized configurati
317318
SVGR ships with a handful of customizable options, usable in both the CLI and
318319
API.
319320

320-
### SVGO
321-
322-
Use [SVGO](https://github.com/svg/svgo/) to optimize SVG code before
323-
transforming it into a component.
324-
325-
| Default | CLI Override | API Override |
326-
| ------- | ------------ | -------------- |
327-
| `true` | `--no-svgo` | `svgo: <bool>` |
328-
329-
### Prettier
330-
331-
Use [Prettier](https://github.com/prettier/prettier) to format JavaScript code
332-
output.
333-
334-
| Default | CLI Override | API Override |
335-
| ------- | --------------- | ------------------ |
336-
| `true` | `--no-prettier` | `prettier: <bool>` |
337-
338-
### Template
339-
340-
Specify a template file (CLI) or a template function (API) to use. For an
341-
example of template, see [the default one](src/transforms/wrapIntoComponent.js).
342-
343-
| Default | CLI Override | API Override |
344-
| ---------------------------------------------------------- | ------------ | ------------------ |
345-
| [`wrapIntoComponent`](src/transforms/wrapIntoComponent.js) | `--template` | `template: <func>` |
346-
347321
### File extension
348322

349323
Specify a custom extension for generated files.
@@ -352,14 +326,6 @@ Specify a custom extension for generated files.
352326
| ------- | ------------ | --------------- |
353327
| `"js"` | `--ext` | `ext: <string>` |
354328

355-
### Expand props
356-
357-
All properties given to component will be forwarded on SVG tag.
358-
359-
| Default | CLI Override | API Override |
360-
| ------- | ------------------- | --------------------- |
361-
| `true` | `--no-expand-props` | `expandProps: <bool>` |
362-
363329
### Icon
364330

365331
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.
369335
| ------- | ------------ | -------------- |
370336
| `false` | `--icon` | `icon: <bool>` |
371337

338+
### Ids
339+
340+
Setting this to `true` will keep ids. It can be useful to target specific ids
341+
using CSS or third party library (eg:
342+
[react-mutate-icon](https://github.com/lifeiscontent/react-mutate-icon)).
343+
344+
| Default | CLI Override | API Override |
345+
| ------- | ------------ | ------------- |
346+
| `false` | `--ids` | `ids: <bool>` |
347+
348+
### JSX Brackets
349+
350+
Put the `>` of a multi-line JSX element at the end of the last line instead of
351+
being alone on the next line (does not apply to self closing elements). See
352+
[Prettier](https://github.com/prettier/prettier/blob/master/README.md#jsx-brackets).
353+
354+
| Default | CLI Override | API Override |
355+
| ------- | ------------------------- | ---------------------------- |
356+
| `false` | `--jsx-bracket-same-line` | `jsxBracketSameLine: <bool>` |
357+
358+
359+
### Useless Defs
360+
361+
Keep elements of `<defs>` without `id`. It also keep unused symbols. See
362+
[SVGO `removeUselessDefs` plugin](https://github.com/svg/svgo).
363+
364+
| Default | CLI Override | API Override |
365+
| ------- | --------------------- | ------------------------- |
366+
| `false` | `--keep-useless-defs` | `keepUselessDefs: <bool>` |
367+
372368
### Native
373369

374370
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.**
378374
| ------- | ------------ | ---------------- |
379375
| `false` | `--native` | `native: <bool>` |
380376

381-
### ViewBox
382377

383-
Setting this to `false` will remove the viewBox property.
378+
### Bracket Spacing
384379

385-
| Default | CLI Override | API Override |
386-
| ------- | --------------- | ----------------- |
387-
| `true` | `--no-view-box` | `viewBox: <bool>` |
380+
Print spaces between brackets in object literals. See
381+
[Prettier](https://github.com/prettier/prettier/blob/master/README.md#bracket-spacing).
388382

389-
### Ids
383+
| Default | CLI Override | API Override |
384+
| ------- | ---------------------- | ------------------------ |
385+
| `true` | `--no-bracket-spacing` | `bracketSpacing: <bool>` |
390386

391-
Setting this to `true` will keep ids. It can be useful to target specific ids
392-
using CSS or third party library (eg:
393-
[react-mutate-icon](https://github.com/lifeiscontent/react-mutate-icon)).
387+
### Dimensions
394388

395-
| Default | CLI Override | API Override |
396-
| ------- | ------------ | ------------- |
397-
| `false` | `--ids` | `ids: <bool>` |
389+
Remove width and height from root SVG tag.
398390

399-
### Ref
391+
| Default | CLI Override | API Override |
392+
| ------- | ----------------- | -------------------- |
393+
| `false` | `--no-dimensions` | `dimensions: <bool>` |
400394

401-
Setting this to `true` will allow you to hook into the ref of the svg components that are created by exposing a `svgRef` prop
395+
### Expand props
402396

403-
| Default | CLI Override | API Override |
404-
| ------- | ------------ | ------------- |
405-
| `false` | `--ref` | `ref: <bool>` |
397+
All properties given to component will be forwarded on SVG tag.
406398

407-
### Replace attribute value
399+
| Default | CLI Override | API Override |
400+
| ------- | ------------------- | --------------------- |
401+
| `true` | `--no-expand-props` | `expandProps: <bool>` |
408402

409-
Replace an attribute value by an other. The main usage of this option is to
410-
change an icon color to "currentColor" in order to inherit from text color.
403+
### Prettier
411404

412-
| Default | CLI Override | API Override |
413-
| ------- | -------------------------------- | ------------------------------- |
414-
| `[]` | `--replace-attr-value <old=new>` | `replaceAttrValues: <string[]>` |
405+
Use [Prettier](https://github.com/prettier/prettier) to format JavaScript code
406+
output.
415407

416-
### Precision
408+
| Default | CLI Override | API Override |
409+
| ------- | --------------- | ------------------ |
410+
| `true` | `--no-prettier` | `prettier: <bool>` |
417411

418-
Set number of digits in the fractional part. See
419-
[SVGO](https://github.com/svg/svgo).
412+
### Semicolons
420413

421-
| Default | CLI Override | API Override |
422-
| ------- | ------------------- | ------------------ |
423-
| `3` | `--precision <int>` | `precision: <int>` |
414+
Print semicolons at the ends of statements. See
415+
[Prettier](https://github.com/prettier/prettier/blob/master/README.md#semicolons).
424416

425-
### Useless Defs
417+
| Default | CLI Override | API Override |
418+
| ------- | ------------ | -------------- |
419+
| `true` | `--no-semi` | `semi: <bool>` |
426420

427-
Keep elements of `<defs>` without `id`. It also keep unused symbols. See
428-
[SVGO `removeUselessDefs` plugin](https://github.com/svg/svgo).
421+
### SVGO
429422

430-
| Default | CLI Override | API Override |
431-
| ------- | --------------------- | ------------------------- |
432-
| `false` | `--keep-useless-defs` | `keepUselessDefs: <bool>` |
423+
Use [SVGO](https://github.com/svg/svgo/) to optimize SVG code before
424+
transforming it into a component.
425+
426+
| Default | CLI Override | API Override |
427+
| ------- | ------------ | -------------- |
428+
| `true` | `--no-svgo` | `svgo: <bool>` |
433429

434430
### Title
435431

@@ -440,32 +436,30 @@ Remove the title from SVG. See
440436
| ------- | ------------ | --------------- |
441437
| `true` | `--no-title` | `title: <bool>` |
442438

443-
### Tab Width
439+
### ViewBox
444440

445-
Specify the number of spaces per indentation-level. See
446-
[Prettier](https://github.com/prettier/prettier/blob/master/README.md#tab-width).
441+
Setting this to `false` will remove the viewBox property.
447442

448-
| Default | CLI Override | API Override |
449-
| ------- | ------------------- | ----------------- |
450-
| `2` | `--tab-width <int>` | `tabWidth: <int>` |
443+
| Default | CLI Override | API Override |
444+
| ------- | --------------- | ----------------- |
445+
| `true` | `--no-view-box` | `viewBox: <bool>` |
451446

452-
### Tabs
447+
### Ref
453448

454-
Indent lines with tabs instead of spaces. See
455-
[Prettier](https://github.com/prettier/prettier/blob/master/README.md#tabs).
449+
Setting this to `true` will allow you to hook into the ref of the svg components that are created by exposing a `svgRef` prop
456450

457-
| Default | CLI Override | API Override |
458-
| ------- | ------------ | ----------------- |
459-
| `false` | `--use-tabs` | `useTabs: <bool>` |
451+
| Default | CLI Override | API Override |
452+
| ------- | ------------ | ------------- |
453+
| `false` | `--ref` | `ref: <bool>` |
460454

461-
### Semicolons
455+
### Replace attribute value
462456

463-
Print semicolons at the ends of statements. See
464-
[Prettier](https://github.com/prettier/prettier/blob/master/README.md#semicolons).
457+
Replace an attribute value by an other. The main usage of this option is to
458+
change an icon color to "currentColor" in order to inherit from text color.
465459

466-
| Default | CLI Override | API Override |
467-
| ------- | ------------ | -------------- |
468-
| `true` | `--no-semi` | `semi: <bool>` |
460+
| Default | CLI Override | API Override |
461+
| ------- | -------------------------------- | ------------------------------- |
462+
| `[]` | `--replace-attr-value <old=new>` | `replaceAttrValues: <string[]>` |
469463

470464
### Quotes
471465

@@ -476,6 +470,24 @@ Use single quotes instead of double quotes. See
476470
| ------- | ---------------- | --------------------- |
477471
| `false` | `--single-quote` | `singleQuote: <bool>` |
478472

473+
### Tab Width
474+
475+
Specify the number of spaces per indentation-level. See
476+
[Prettier](https://github.com/prettier/prettier/blob/master/README.md#tab-width).
477+
478+
| Default | CLI Override | API Override |
479+
| ------- | ------------------- | ----------------- |
480+
| `2` | `--tab-width <int>` | `tabWidth: <int>` |
481+
482+
### Template
483+
484+
Specify a template file (CLI) or a template function (API) to use. For an
485+
example of template, see [the default one](src/transforms/wrapIntoComponent.js).
486+
487+
| Default | CLI Override | API Override |
488+
| ---------------------------------------------------------- | ------------ | ------------------ |
489+
| [`wrapIntoComponent`](src/transforms/wrapIntoComponent.js) | `--template` | `template: <func>` |
490+
479491
### Trailing Commas
480492

481493
Print trailing commas wherever possible when multi-line. See
@@ -485,24 +497,31 @@ Print trailing commas wherever possible when multi-line. See
485497
| -------- | ------------------------------------------------------ | ------------------------------------------------------ |
486498
| `"none"` | <code>--trailing-comma <none&#124;es5&#124;all></code> | <code>trailingComma: "<none&#124;es5&#124;all>"</code> |
487499

488-
### Bracket Spacing
500+
### Tabs
489501

490-
Print spaces between brackets in object literals. See
491-
[Prettier](https://github.com/prettier/prettier/blob/master/README.md#bracket-spacing).
502+
Indent lines with tabs instead of spaces. See
503+
[Prettier](https://github.com/prettier/prettier/blob/master/README.md#tabs).
492504

493-
| Default | CLI Override | API Override |
494-
| ------- | ---------------------- | ------------------------ |
495-
| `true` | `--no-bracket-spacing` | `bracketSpacing: <bool>` |
505+
| Default | CLI Override | API Override |
506+
| ------- | ------------ | ----------------- |
507+
| `false` | `--use-tabs` | `useTabs: <bool>` |
496508

497-
### JSX Brackets
509+
### Output Directory
498510

499-
Put the `>` of a multi-line JSX element at the end of the last line instead of
500-
being alone on the next line (does not apply to self closing elements). See
501-
[Prettier](https://github.com/prettier/prettier/blob/master/README.md#jsx-brackets).
511+
Output files into a directory.
502512

503-
| Default | CLI Override | API Override |
504-
| ------- | ------------------------- | ---------------------------- |
505-
| `false` | `--jsx-bracket-same-line` | `jsxBracketSameLine: <bool>` |
513+
| Default | CLI Override | API Override |
514+
| ----------- | --------------------- | ------------------- |
515+
| `undefined` | `--out-dir <dirname>` | `outDir: <dirname>` |
516+
517+
### Precision
518+
519+
Set number of digits in the fractional part. See
520+
[SVGO](https://github.com/svg/svgo).
521+
522+
| Default | CLI Override | API Override |
523+
| ------- | ------------------- | ------------------ |
524+
| `3` | `--precision <int>` | `precision: <int>` |
506525

507526
## Other projects
508527

0 commit comments

Comments
 (0)