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

docs: Better explain gotchas with the config options #552

Merged
merged 1 commit into from
Apr 25, 2021
Merged

docs: Better explain gotchas with the config options #552

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
25 changes: 14 additions & 11 deletions website/src/pages/docs/options.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,8 +35,7 @@ Specify a custom extension for generated files.

## Icon

Replace SVG "width" and "height" value by "1em" in order to make SVG size
inherits from text size.
Replace SVG `width` and `height` value by `1em` in order to make SVG size inherits from text size.

| Default | CLI Override | API Override |
| ------- | ------------ | -------------- |
Expand All @@ -63,7 +62,13 @@ Generates `.tsx` files with [TypeScript](https://www.typescriptlang.org/) typing

## Dimensions

Remove width and height from root SVG tag.
Keep `width` and `height` attributes from the root SVG tag.

Removal is guaranteed if `dimensions: false`, unlike the `removeDimensions: true` SVGO plugin option which also generates a `viewBox` from the dimensions if no `viewBox` is present.

**NOTE:**
- Any SVGO processing will occur prior to this removal.
- When removing dimensions, SVGO will be configured not to remove the `viewBox` if one is present. You can override this behaviour via your own config.

| Default | CLI Override | API Override |
| ------- | ----------------- | -------------------- |
Expand Down Expand Up @@ -96,8 +101,9 @@ Specify Prettier config. [See Prettier options](https://prettier.io/docs/en/opti

## SVGO

Use [SVGO](https://github.com/svg/svgo/) to optimize SVG code before
transforming it into a component.
Use [SVGO](https://github.com/svg/svgo/) to optimize SVG code before transforming it into a component.

**NOTE:** SVGR implicitly enables the [`prefixIds` SVGO plugin](https://github.com/svg/svgo/blob/master/plugins/prefixIds.js) which adds a prefix to values of `id` and `class` attributes to [reduce the chance of collision issues](https://github.com/gregberge/svgr/issues/210).

| Default | CLI Override | API Override |
| ------- | ------------ | -------------- |
Expand Down Expand Up @@ -129,8 +135,7 @@ Setting this to `true` will wrap the exported component in [`React.memo`](https:

## Replace attribute value

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.
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 |
| ------- | --------------------------------- | ----------------------------------- |
Expand All @@ -150,17 +155,15 @@ Add props to the root SVG tag.

## Title

Add title tag via title property. If titleProp is set to true and no title is provided (`title={undefined}`) at render time, this will
fallback to existing title element in the svg if exists.
Add title tag via title property. If titleProp is set to true and no title is provided (`title={undefined}`) at render time, this will fallback to an existing title element in the svg if exists.

| Default | CLI Override | API Override |
| ------- | -------------- | ------------------- |
| `false` | `--title-prop` | `titleProp: <bool>` |

## Template

Specify a template file (CLI) or a template function (API) to use. For an
example of template, see [the default one](https://github.com/gregberge/svgr/tree/master/packages/babel-plugin-transform-svg-component/src/index.js).
Specify a template file (CLI) or a template function (API) to use. For an example of template, see [the default one](https://github.com/gregberge/svgr/tree/master/packages/babel-plugin-transform-svg-component/src/index.js).

| Default | CLI Override | API Override |
| ---------------------------------------------------------------------------------------------------------------------------- | ------------ | ------------------ |
Expand Down