## 1. Project Overview & Quickstart (gregberge/svgr)

## File: README.md

<h1 align="center">
  
</h1>


[](https://github.com/gregberge/svgr/blob/master/LICENSE)
[](https://opencollective.com/svgr/donate)
[](https://www.npmjs.com/package/@svgr/core)
[](https://www.npmjs.com/package/@svgr/core)
[](https://github.com/gregberge/svgr/actions/workflows/ci.yml)
[](https://codecov.io/github/gregberge/svgr)

[**Try it out online!**](https://react-svgr.com/playground)

[**Watch the talk at React Europe**](https://www.youtube.com/watch?v=geKCzi7ZPkA)

SVGR is an universal tool to transform SVG into React components.

SVGR takes a raw SVG and transforms it into a ready-to-use React component.

## [Docs](https://react-svgr.com)

**See the documentation at [react-svgr.com](https://react-svgr.com)** for more information about using `svgr`!

Quicklinks to some of the most-visited pages:

- [**Playground**](https://react-svgr.com/playground/)
- [**Getting started**](https://react-svgr.com/docs/getting-started/)
- [CLI usage](https://react-svgr.com/docs/cli/)
- [Webpack usage](https://react-svgr.com/docs/webpack/)
- [Node.js usage](https://react-svgr.com/docs/node-api/)

## Example

**Take a SVG**:

```html
<?xml version="1.0" encoding="UTF-8"?>
<svg
  width="48px"
  height="1px"
  viewBox="0 0 48 1"
  version="1.1"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
>
  
  <title>Rectangle 5</title>
  <desc>Created with Sketch.</desc>
  <defs></defs>
  <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
    <g
      id="19-Separator"
      transform="translate(-129.000000, -156.000000)"
      fill="#063855"
    >
      <g id="Controls/Settings" transform="translate(80.000000, 0.000000)">
        <g id="Content" transform="translate(0.000000, 64.000000)">
          <g id="Group" transform="translate(24.000000, 56.000000)">
            <g id="Group-2">
              <rect id="Rectangle-5" x="25" y="36" width="48" height="1"></rect>
            </g>
          </g>
        </g>
      </g>
    </g>
  </g>
</svg>
```

**Run SVGR**

```sh
npx @svgr/cli --icon --replace-attr-values "#063855=currentColor" -- icon.svg
```

**Get an optimized React component**

```js
import * as React from 'react'

const SvgComponent = (props) => (
  <svg width="1em" height="1em" viewBox="0 0 48 1" {...props}>
    
  </svg>
)

export default SvgComponent
```

## Supporting SVGR

SVGR is a MIT-licensed open source project. It's an independent project with ongoing development made possible thanks to the support of these awesome [backers](/BACKERS.md). If you'd like to join them, please consider:

- [Sponsor me on GitHub](https://github.com/sponsors/gregberge)
- [Become a backer or sponsor on OpenCollective](https://opencollective.com/svgr)

Learn more about [supporting SVGR](https://react-svgr.com/docs/supporting-svgr/).

## Contributing

Check out the [contributing guidelines](CONTRIBUTING.md)

# License

Licensed under the MIT License, Copyright © 2017-present Greg Bergé.

See [LICENSE](./LICENSE) for more information.

## Acknowledgements

This project has been popularized by [Christopher Chedeau](https://twitter.com/vjeux) and it has been included in [create-react-app](https://github.com/facebook/create-react-app) thanks to [Dan Abramov](https://twitter.com/dan_abramov). We would like to thanks [Sven Sauleau](https://twitter.com/svensauleau) for his help and its intuition.

---

## File: packages/webpack/README.md

# @svgr/webpack

[](https://travis-ci.org/gregberge/svgr)
[](https://www.npmjs.com/package/@svgr/webpack)
[](https://github.com/gregberge/svgr/blob/master/LICENSE)

Webpack loader for SVGR.

```
npm install @svgr/webpack --save-dev
```

## Usage

In your `webpack.config.js`:

```js
{
  test: /\.svg$/,
  use: ['@svgr/webpack'],
}
```

In your code:

```js
import Star from './star.svg'

const App = () => (
  
    <Star />
  
)
```

### Passing options

```js
{
  test: /\.svg$/,
  use: [
    {
      loader: '@svgr/webpack',
      options: {
        native: true,
      },
    },
  ],
}
```

### Using with `url-loader` or `file-loader`

It is possible to use it with [`url-loader`](https://github.com/webpack-contrib/url-loader) or [`file-loader`](https://github.com/webpack-contrib/file-loader).

In your `webpack.config.js`:

```js
{
  test: /\.svg$/,
  use: ['@svgr/webpack', 'url-loader'],
}
```

In your code:

```js
import starUrl, { ReactComponent as Star } from './star.svg'

const App = () => (
  
    
    <Star />
  
)
```

The named export defaults to `ReactComponent`, but can be customized with the `namedExport` option.

Please note that by default, `@svgr/webpack` will try to export the React Component via default export if there is no other loader handling svg files with default export. When there is already any other loader using default export for svg files, `@svgr/webpack` will always export the React component via named export.

If you prefer named export in any case, you may set the `exportType` option to `named`.

### Use your own Babel configuration

By default, `@svgr/webpack` includes a `babel-loader` with [an optimized configuration](https://github.com/gregberge/svgr/blob/main/packages/webpack/src/index.ts). In some case you may want to apply a custom one (if you are using Preact for an example). You can turn off Babel transformation by specifying `babel: false` in options.

```js
// Example using preact
{
  test: /\.svg$/,
  use: [
    {
      loader: 'babel-loader',
      options: {
        presets: ['preact', 'env'],
      },
    },
    {
      loader: '@svgr/webpack',
      options: { babel: false },
    }
  ],
}
```

### Handle SVG in CSS, Sass or Less

It is possible to detect the module that requires your SVG using [`Rule.issuer`](https://webpack.js.org/configuration/module/#ruleissuer) in Webpack 5. Using it you can specify two different configurations for JavaScript and the rest of your files.

```js
;[
  {
    test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
    issuer: /\.[jt]sx?$/,
    use: ['babel-loader', '@svgr/webpack', 'url-loader'],
  },
  {
    test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
    loader: 'url-loader',
  },
]
```

_[Rule.issuer](https://v4.webpack.js.org/configuration/module/#ruleissuer) in Webpack 4 has additional conditions which are not available in Webpack 5._

## License

MIT

---

## File: packages/rollup/README.md

# @svgr/rollup

[](https://travis-ci.org/smooth-code/svgr)
[](https://www.npmjs.com/package/@svgr/rollup)
[](https://github.com/smooth-code/svgr/blob/master/LICENSE)

Rollup plugin for SVGR.

```
npm install @svgr/rollup --save-dev
```

In your `rollup.config.js`:

```js
{
  plugins: [svgr()]
}
```

In your code:

```js
import Star from './star.svg'

const App = () => (
  
    <Star />
  
)
```

### Passing options

```js
{
  plugins: [svgr({ native: true })]
}
```

### Using with `url` plugin

It is possible to use it with [`url`](https://github.com/rollup/rollup-plugin-url).

In your `rollup.config.js`:

```js
{
  plugins: [url(), svgr()]
}
```

In your code:

```js
import starUrl, { ReactComponent as Star } from './star.svg'

const App = () => (
  
    
    <Star />
  
)
```

The named export defaults to `ReactComponent`, but can be customized with the `namedExport` option.

Please note that by default, `@svgr/rollup` will try to export the React Component via default export if there is no other plugin handling svg files with default export. When there is already any other plugin using default export for svg files, `@svgr/rollup` will always export the React component via named export.

If you prefer named export in any case, you may set the `exportType` option to `named`.

### Use your own Babel configuration

By default, `@svgr/rollup` applies a babel transformation with [optimized configuration](https://github.com/gregberge/svgr/blob/main/packages/rollup/src/index.ts). In some case you may want to apply a custom one (if you are using Preact for an example). You can turn off Babel transformation by specifying `babel: false` in options.

```js
{
  plugins: [svgr({ babel: false })]
}
```

## License

MIT

---

## File: packages/plugin-svgo/README.md

# @svgr/plugin-svgo

[](https://travis-ci.org/smooth-code/svgr)
[](https://www.npmjs.com/package/@svgr/plugin-svgo)
[](https://github.com/smooth-code/svgr/blob/master/LICENSE)

Optimize SVG using SVGO.

## Install

```
npm install --save-dev @svgr/plugin-svgo
```

## Usage

**.svgrrc**

```json
{
  "plugins": ["@svgr/plugin-svgo"]
}
```

## License

MIT

---

## File: packages/plugin-prettier/README.md

# @svgr/plugin-prettier

[](https://travis-ci.org/smooth-code/svgr)
[](https://www.npmjs.com/package/@svgr/plugin-prettier)
[](https://github.com/smooth-code/svgr/blob/master/LICENSE)

Format SVG code using Prettier.

## Install

```
npm install --save-dev @svgr/plugin-prettier
```

## Usage

**.svgrrc**

```json
{
  "plugins": ["@svgr/plugin-prettier"]
}
```

## License

MIT

---

## File: packages/plugin-jsx/README.md

# @svgr/plugin-jsx

[](https://travis-ci.org/smooth-code/svgr)
[](https://www.npmjs.com/package/@svgr/plugin-jsx)
[](https://github.com/smooth-code/svgr/blob/master/LICENSE)

Transforms SVG into JSX.

## Install

```
npm install --save-dev @svgr/plugin-jsx
```

## Usage

**.svgrrc**

```json
{
  "plugins": ["@svgr/plugin-jsx"]
}
```

## How does it work?

`@svgr/plugin-jsx` consists in three phases:

- Parsing the SVG code using [svg-parser](https://github.com/Rich-Harris/svg-parser)
- Converting the [HAST](https://github.com/syntax-tree/hast) into a [Babel AST](https://github.com/babel/babel/blob/master/packages/babel-parser/ast/spec.md)
- Applying [`@svgr/babel-preset`](../babel-preset/README.md) transformations

## Applying custom transformations

You can extend the Babel config applied in this plugin using `jsx.babelConfig` config path:

```js
// .svgrrc.js

module.exports = {
  jsx: {
    babelConfig: {
      plugins: [
        // For an example, this plugin will remove "id" attribute from "svg" tag
        [
          '@svgr/babel-plugin-remove-jsx-attribute',
          {
            elements: ['svg'],
            attributes: ['id'],
          },
        ],
      ],
    },
  },
}
```

Several Babel plugins are available:

- [`@svgr/babel-plugin-add-jsx-attribute`](../babel-plugin-add-jsx-attribute/README.md)
- [`@svgr/babel-plugin-remove-jsx-attribute`](../babel-plugin-remove-jsx-attribute/README.md)
- [`@svgr/babel-plugin-remove-jsx-empty-expression`](../babel-plugin-remove-jsx-empty-expression/README.md)
- [`@svgr/babel-plugin-replace-jsx-attribute-value`](../babel-plugin-replace-jsx-attribute-value/README.md)
- [`@svgr/babel-plugin-svg-dynamic-title`](../babel-plugin-svg-dynamic-title/README.md)
- [`@svgr/babel-plugin-svg-em-dimensions`](../babel-plugin-svg-em-dimensions/README.md)
- [`@svgr/babel-plugin-transform-react-native-svg`](../babel-plugin-transform-react-native-svg/README.md)
- [`@svgr/babel-plugin-transform-svg-component`](../babel-plugin-transform-svg-component/README.md)

If you want to create your own, reading [Babel Handbook](https://github.com/jamiebuilds/babel-handbook/blob/master/translations/en/plugin-handbook.md) is a good start!

## License

MIT

---

## File: packages/hast-util-to-babel-ast/README.md

# @svgr/hast-util-to-babel-ast

[](https://travis-ci.org/smooth-code/svgr)
[](https://www.npmjs.com/package/@svgr/hast-util-to-babel-ast)
[](https://github.com/smooth-code/svgr/blob/master/LICENSE)

Transforms HAST into Babel AST.

## Install

```
npm install --save-dev @svgr/hast-util-to-babel-ast
```

## Usage

```js
import { parse } from 'svg-parser'
import hastToBabelAst from '@svgr/hast-util-to-babel-ast'

const hastTree = parse(`<svg></svg>`)

const babelTree = hastToBabelAst(hastTree)
```

## License

MIT

---

## File: packages/core/README.md

# @svgr/core

[![Build Status][build-badge]][build]
[![version][version-badge]][package]
[![MIT License][license-badge]][license]

Node API of SVGR.

```
npm install @svgr/core
```

## Usage

```js
import { transform } from '@svgr/core'

const svgCode = `
<svg xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <rect x="10" y="10" height="100" width="100"
    style="stroke:#ff0000; fill: #0000ff"/>
</svg>
`

transform(svgCode, { icon: true }, { componentName: 'MyComponent' }).then(
  (jsCode) => {
    console.log(jsCode)
  },
)
```

Use `svgr.sync(code, config, state)` if you would like to use sync version.

### Plugins

By default `@svgr/core` doesn't include any plugin, if you want them, you have to install them and include them in config.

```js
svgr(svgCode, {
  plugins: ['@svgr/plugin-svgo', '@svgr/plugin-jsx', '@svgr/plugin-prettier'],
}).then((jsCode) => {
  console.log(jsCode)
})
```

## License

MIT

[build-badge]: https://img.shields.io/travis/smooth-code/svgr.svg?style=flat-square
[build]: https://travis-ci.org/smooth-code/svgr
[version-badge]: https://img.shields.io/npm/v/@svgr/core.svg?style=flat-square
[package]: https://www.npmjs.com/package/@svgr/core
[license-badge]: https://img.shields.io/npm/l/@svgr/core.svg?style=flat-square
[license]: https://github.com/smooth-code/svgr/blob/master/LICENSE

---

## File: packages/cli/README.md

# @svgr/cli

[![Build Status][build-badge]][build]
[![version][version-badge]][package]
[![MIT License][license-badge]][license]

Command Line Interface for SVGR.

```
npm install @svgr/cli --save-dev
```

## Usage

```
/* Detailed source-code truncated for AI context efficiency. */
```

## License

MIT

[build-badge]: https://img.shields.io/travis/smooth-code/svgr.svg?style=flat-square
[build]: https://travis-ci.org/smooth-code/svgr
[version-badge]: https://img.shields.io/npm/v/@svgr/core.svg?style=flat-square
[package]: https://www.npmjs.com/package/@svgr/core
[license-badge]: https://img.shields.io/npm/l/@svgr/core.svg?style=flat-square
[license]: https://github.com/smooth-code/svgr/blob/master/LICENSE

---

## File: packages/babel-preset/README.md

# @svgr/babel-preset

## Install

```
npm install --save-dev @svgr/babel-preset
```

## Usage

**.babelrc**

```json
{
  "presets": [["@svgr/babel-preset", { "svgProps": { "width": 200 } }]]
}
```

## License

MIT

## 2. Official Technical Reference & Guides (gregberge/docs)

# Mintlify Starter Kit

Click on `Use this template` to copy the Mintlify starter kit. The starter kit contains examples including

- Guide pages
- Navigation
- Customizations
- API Reference pages
- Use of popular components

### Development

Install the [Mintlify CLI](https://www.npmjs.com/package/mintlify) to preview the documentation changes locally. To install, use the following command

```
npm i mintlify
```

Run the following command at the root of your documentation (where mint.json is)

```
mintlify dev
```

### Publishing Changes

Install our Github App to auto propagate changes from your repo to your deployment. Changes will be deployed to production automatically after pushing to the default branch. Find the link to install on your dashboard. 

#### Troubleshooting

- Mintlify dev isn't running - Run `mintlify install` it'll re-install dependencies.
- Page loads as a 404 - Make sure you are running in a folder with `mint.json`