Showing preview only (567K chars total). Download the full file or copy to clipboard to get everything.
Repository: gregberge/svgr
Branch: main
Commit: 975215efe858
Files: 270
Total size: 506.3 KB
Directory structure:
gitextract_w9d7ejze/
├── .eslintignore
├── .eslintrc.json
├── .github/
│ ├── FUNDING.yml
│ ├── ISSUE_TEMPLATE/
│ │ ├── bug.md
│ │ ├── feature.md
│ │ ├── question.md
│ │ └── regression.md
│ ├── ISSUE_TEMPLATE.md
│ ├── PULL_REQUEST_TEMPLATE.md
│ ├── SUPPORT.md
│ ├── opencollective.yml
│ ├── stale.yml
│ └── workflows/
│ └── ci.yml
├── .gitignore
├── .nvmrc
├── .prettierignore
├── .prettierrc
├── BACKERS.md
├── CHANGELOG.md
├── CODE_OF_CONDUCT.md
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── __fixtures__/
│ ├── custom-index-template.js
│ ├── custom-index.config.js
│ ├── overrides.config.js
│ ├── simple-existing/
│ │ ├── File..js
│ │ ├── File.js
│ │ └── index..js
│ ├── template.js
│ ├── withPrettierRc/
│ │ └── .prettierrc
│ ├── withSvgoConfig/
│ │ ├── svgo.config.cjs
│ │ └── svgo.config.js
│ └── withSvgrRc/
│ └── .svgrrc
├── api/
│ ├── api/
│ │ └── svgr.js
│ ├── package.json
│ ├── pnpm-workspace.yaml
│ └── vercel.json
├── babel.config.js
├── build/
│ └── rollup.config.mjs
├── deprecated-packages/
│ └── svgr/
│ ├── message.js
│ └── package.json
├── examples/
│ ├── mocha-esm/
│ │ ├── CHANGELOG.md
│ │ ├── __mocks__/
│ │ │ └── svg.js
│ │ ├── example.js
│ │ ├── example.test.js
│ │ ├── mock-loader.js
│ │ └── package.json
│ └── webpack/
│ ├── .gitignore
│ ├── CHANGELOG.md
│ ├── package.json
│ ├── src/
│ │ └── index.js
│ └── webpack.config.js
├── jest.config.js
├── lerna.json
├── package.json
├── packages/
│ ├── babel-plugin-add-jsx-attribute/
│ │ ├── .npmignore
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── index.test.ts
│ │ │ └── index.ts
│ │ └── tsconfig.json
│ ├── babel-plugin-remove-jsx-attribute/
│ │ ├── .npmignore
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── index.test.ts
│ │ │ └── index.ts
│ │ └── tsconfig.json
│ ├── babel-plugin-remove-jsx-empty-expression/
│ │ ├── .npmignore
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── index.test.ts
│ │ │ └── index.ts
│ │ └── tsconfig.json
│ ├── babel-plugin-replace-jsx-attribute-value/
│ │ ├── .npmignore
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── index.test.ts
│ │ │ └── index.ts
│ │ └── tsconfig.json
│ ├── babel-plugin-svg-dynamic-title/
│ │ ├── .npmignore
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── index.test.ts
│ │ │ └── index.ts
│ │ └── tsconfig.json
│ ├── babel-plugin-svg-em-dimensions/
│ │ ├── .npmignore
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── index.test.ts
│ │ │ └── index.ts
│ │ └── tsconfig.json
│ ├── babel-plugin-transform-react-native-svg/
│ │ ├── .npmignore
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── index.test.ts
│ │ │ └── index.ts
│ │ └── tsconfig.json
│ ├── babel-plugin-transform-svg-component/
│ │ ├── .npmignore
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── __snapshots__/
│ │ │ │ └── index.test.ts.snap
│ │ │ ├── defaultTemplate.ts
│ │ │ ├── index.test.ts
│ │ │ ├── index.ts
│ │ │ ├── types.ts
│ │ │ └── variables.ts
│ │ └── tsconfig.json
│ ├── babel-preset/
│ │ ├── .npmignore
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── index.test.ts
│ │ │ └── index.ts
│ │ └── tsconfig.json
│ ├── cli/
│ │ ├── .npmignore
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── bin/
│ │ │ └── svgr
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── __snapshots__/
│ │ │ │ ├── index.test.ts.snap
│ │ │ │ └── util.test.ts.snap
│ │ │ ├── dirCommand.ts
│ │ │ ├── fileCommand.ts
│ │ │ ├── index.test.ts
│ │ │ ├── index.ts
│ │ │ ├── util.test.ts
│ │ │ └── util.ts
│ │ └── tsconfig.json
│ ├── core/
│ │ ├── .npmignore
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── __fixtures__/
│ │ │ │ ├── svgo/
│ │ │ │ │ └── svgo.config.js
│ │ │ │ └── svgr/
│ │ │ │ └── .svgrrc
│ │ │ ├── __snapshots__/
│ │ │ │ ├── config.test.ts.snap
│ │ │ │ └── transform.test.ts.snap
│ │ │ ├── config.test.ts
│ │ │ ├── config.ts
│ │ │ ├── index.ts
│ │ │ ├── plugins.test.ts
│ │ │ ├── plugins.ts
│ │ │ ├── state.test.ts
│ │ │ ├── state.ts
│ │ │ ├── transform.test.ts
│ │ │ └── transform.ts
│ │ └── tsconfig.json
│ ├── hast-util-to-babel-ast/
│ │ ├── .npmignore
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── __snapshots__/
│ │ │ │ └── index.test.ts.snap
│ │ │ ├── all.ts
│ │ │ ├── getAttributes.ts
│ │ │ ├── handlers.ts
│ │ │ ├── helpers.ts
│ │ │ ├── index.test.ts
│ │ │ ├── index.ts
│ │ │ ├── mappings.ts
│ │ │ ├── one.ts
│ │ │ ├── stringToObjectStyle.ts
│ │ │ └── util.ts
│ │ └── tsconfig.json
│ ├── plugin-jsx/
│ │ ├── .npmignore
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── index.test.ts
│ │ │ └── index.ts
│ │ └── tsconfig.json
│ ├── plugin-prettier/
│ │ ├── .npmignore
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── index.test.ts
│ │ │ └── index.ts
│ │ └── tsconfig.json
│ ├── plugin-svgo/
│ │ ├── .npmignore
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── __snapshots__/
│ │ │ │ └── index.test.ts.snap
│ │ │ ├── config.test.ts
│ │ │ ├── config.ts
│ │ │ ├── index.test.ts
│ │ │ └── index.ts
│ │ └── tsconfig.json
│ ├── rollup/
│ │ ├── .npmignore
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── __snapshots__/
│ │ │ │ └── index.test.ts.snap
│ │ │ ├── index.test.ts
│ │ │ └── index.ts
│ │ └── tsconfig.json
│ └── webpack/
│ ├── .npmignore
│ ├── CHANGELOG.md
│ ├── README.md
│ ├── package.json
│ ├── src/
│ │ ├── __snapshots__/
│ │ │ └── index.test.ts.snap
│ │ ├── index.test.ts
│ │ └── index.ts
│ └── tsconfig.json
├── pnpm-workspace.yaml
├── public/
│ └── .exists
├── resources/
│ └── svgr-logo.sketch
├── tsconfig.json
└── website/
├── .eslintignore
├── .eslintrc.js
├── .gitignore
├── .npmrc
├── .nvmrc
├── README.md
├── _redirects
├── gatsby-config.js
├── netlify.toml
├── package.json
├── pages/
│ ├── docs/
│ │ ├── cli.mdx
│ │ ├── configuration-files.mdx
│ │ ├── custom-templates.mdx
│ │ ├── custom-transformations.mdx
│ │ ├── ecosystem.mdx
│ │ ├── getting-started.mdx
│ │ ├── index.mdx
│ │ ├── jest.mdx
│ │ ├── migrate.mdx
│ │ ├── mocha.mdx
│ │ ├── next.mdx
│ │ ├── node-api.mdx
│ │ ├── options.mdx
│ │ ├── parcel.mdx
│ │ ├── remix.mdx
│ │ ├── rollup.mdx
│ │ ├── supporting-svgr.mdx
│ │ ├── webpack.mdx
│ │ └── what-is-svgr.mdx
│ ├── index.mdx
│ └── playground.mdx
└── src/
├── components/
│ ├── Home.js
│ └── playground/
│ ├── Ad.js
│ ├── CheckGroup.js
│ ├── DropArea.js
│ ├── Editor.js
│ ├── Loading.js
│ ├── Playground.js
│ ├── Query.js
│ ├── Settings.js
│ ├── SettingsFieldBoolean.js
│ ├── SettingsFieldEnum.js
│ ├── SettingsFieldInteger.js
│ ├── SettingsFieldString.js
│ ├── SettingsGroup.js
│ ├── SmallLabel.js
│ ├── config/
│ │ └── settings.js
│ ├── controls/
│ │ ├── CheckboxControl.js
│ │ ├── InputControl.js
│ │ ├── RadioControl.js
│ │ └── TextareaControl.js
│ ├── defaultSVG.js
│ ├── icons/
│ │ └── ChevronLeft.js
│ └── modules/
│ └── svgr.js
└── smooth-doc/
└── theme.js
================================================
FILE CONTENTS
================================================
================================================
FILE: .eslintignore
================================================
node_modules/
__fixtures__/
__fixtures_build__/
coverage/
examples/
svgr.now.sh/
/website/
dist/
================================================
FILE: .eslintrc.json
================================================
{
"root": true,
"env": {
"node": true
},
"parser": "@typescript-eslint/parser",
"plugins": ["@typescript-eslint"],
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/recommended",
"plugin:react-hooks/recommended",
"plugin:react/recommended"
],
"rules": {
"@typescript-eslint/ban-ts-comment": "off",
"@typescript-eslint/no-explicit-any": "off",
"@typescript-eslint/no-empty-function": "warn",
"@typescript-eslint/ban-types": "warn",
"react/prop-types": "off"
},
"settings": {
"react": {
"version": "detect"
}
}
}
================================================
FILE: .github/FUNDING.yml
================================================
github: gregberge
open_collective: svgr
================================================
FILE: .github/ISSUE_TEMPLATE/bug.md
================================================
---
name: 🐛 Bug report
about: Create a report to help us improve
---
<!-- Love SVGR? Please consider supporting our collective: 👉 https://opencollective.com/svgr/donate -->
## 🐛 Bug Report
A clear and concise description of what the bug is.
## To Reproduce
Steps to reproduce the behavior:
## Expected behavior
A clear and concise description of what you expected to happen.
## Link to repl or repo (highly encouraged)
Please provide a minimal repository on GitHub.
Issues without a reproduction link are likely to stall.
## Run `npx envinfo --system --binaries --npmPackages @svgr/core,@svgr/cli,@svgr/webpack,@svgr/rollup --markdown --clipboard`
Paste the results here:
```bash
```
================================================
FILE: .github/ISSUE_TEMPLATE/feature.md
================================================
---
name: 🚀 Feature Proposal
about: Submit a proposal for a new feature
---
<!-- Love SVGR? Please consider supporting our collective: 👉 https://opencollective.com/svgr/donate -->
## 🚀 Feature Proposal
A clear and concise description of what the feature is.
## Motivation
Please outline the motivation for the proposal.
## Example
Please provide an example for how this feature would be used.
## Pitch
Why does this feature belong in the SVGR ecosystem?
================================================
FILE: .github/ISSUE_TEMPLATE/question.md
================================================
---
name: 💬 Questions / Help
about: If you have questions, please read full readme first
---
<!-- Love SVGR? Please consider supporting our collective: 👉 https://opencollective.com/svgr/donate -->
## 💬 Questions and Help
SVGR project is young, but please before asking your question:
- Read carefully the README of the project
- Search if your answer has already been answered in old issues
After you can submit your question and we will be happy to help you!
================================================
FILE: .github/ISSUE_TEMPLATE/regression.md
================================================
---
name: 💥 Regression Report
about: Report unexpected behavior that worked in previous versions
---
<!-- Love SVGR? Please consider supporting our collective: 👉 https://opencollective.com/svgr/donate -->
## 💥 Regression Report
A clear and concise description of what the regression is.
## Last working version
Worked up to version:
Stopped working in version:
## To Reproduce
Steps to reproduce the behavior:
## Expected behavior
A clear and concise description of what you expected to happen.
## Link to repl or repo (highly encouraged)
Please provide a minimal repository on GitHub.
Issues without a reproduction link are likely to stall.
## Run `npx envinfo --system --binaries --npmPackages @svgr/core,@svgr/cli,@svgr/webpack,@svgr/rollup --markdown --clipboard`
Paste the results here:
```bash
```
================================================
FILE: .github/ISSUE_TEMPLATE.md
================================================
## 👉 [Please follow one of these issue templates](https://github.com/gregberge/svgr/issues/new/choose) 👈
<!-- Love SVGR? Please consider supporting our collective: 👉 https://opencollective.com/svgr/donate -->
Note: to keep the backlog clean and actionable, issues may be immediately closed if they do not follow one of the above issue templates.
================================================
FILE: .github/PULL_REQUEST_TEMPLATE.md
================================================
<!-- Thanks for submitting a pull request! Please provide enough information so that others can review your pull request. The two fields below are mandatory. -->
## Summary
<!-- Explain the **motivation** for making this change. What existing problem does the pull request solve? -->
## Test plan
<!-- Demonstrate the code is solid. Example: The exact commands you ran and their output, screenshots / videos if the pull request changes UI. -->
================================================
FILE: .github/SUPPORT.md
================================================
Please read carefully the README before asking questions.
<!-- Love SVGR? Please consider supporting our collective: 👉 https://opencollective.com/svgr/donate -->
================================================
FILE: .github/opencollective.yml
================================================
collective: svgr
tiers:
- tiers: '*'
labels: ['backer']
message: |
Hey <author> :wave:,
Thank you so much for supporting us on [Open Collective](<link>) :heart:.
We'll give a special attention to this issue.
<link>
invitation: |
Hey <author> :wave:,
Thank you for opening an issue. We'll get back to you as soon as we can.
Please, consider supporting us on [Open Collective](<link>). We give a special attention to issues opened by backers.
If you use SVGR at work, you can also ask your company to sponsor us :heart:.
<link>
================================================
FILE: .github/stale.yml
================================================
# Number of days of inactivity before an issue becomes stale
daysUntilStale: 60
# Number of days of inactivity before a stale issue is closed
daysUntilClose: 7
# Label to use when marking an issue as stale
staleLabel: wontfix
# Comment to post when marking an issue as stale. Set to `false` to disable
markComment: >
This issue has been automatically marked as stale because it has not had
recent activity. It will be closed if no further activity occurs. Thank you
for your contributions.
================================================
FILE: .github/workflows/ci.yml
================================================
name: CI
on:
push:
branches: [main]
pull_request:
branches: [main]
permissions:
contents: read # to fetch code (actions/checkout)
jobs:
build:
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [14.x, 16.x, 18.x, 19.x]
# See supported Node.js release schedule at https://nodejs.org/en/about/releases/
steps:
- name: Check out repository code
uses: actions/checkout@v3
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v3
- name: Use latest pnpm
run: npm i -g pnpm@latest --registry=https://registry.npmjs.org
- name: Install dependencies
run: pnpm install
- name: Build
run: pnpm run build
- name: Lint
run: pnpm run lint
- name: Test
run: pnpm run test --ci --coverage
- name: Codecov
run: npx codecov
================================================
FILE: .gitignore
================================================
node_modules/
lib/
dist/
!svgr.now.sh/lib/
__fixtures_build__/
src/__fixtures__/dist/
coverage/
================================================
FILE: .nvmrc
================================================
18
================================================
FILE: .prettierignore
================================================
__fixtures_build__/
__fixtures__/
CHANGELOG.md
package.json
lerna.json
dist/
.next/
/website/.cache/
/website/public/
pnpm-workspace.yaml
pnpm-lock.yaml
================================================
FILE: .prettierrc
================================================
{
"singleQuote": true,
"trailingComma": "all",
"semi": false
}
================================================
FILE: BACKERS.md
================================================
# Sponsors & Backers
<p class="description">Support SVGR’s development through donations.</p>
SVGR is an MIT-licensed open source project. Even if it has been created at Smooth Code, SVGR is an independent project with ongoing development made possible thanks to the support of these awesome backers. If you'd like to join them, please consider:
- [Become a backer or sponsor on OpenCollective](https://opencollective.com/svgr).
## Gold Sponsors
Gold Sponsors are those who have pledged \$100/month and more to SVGR.
[](https://opencollective.com/svgr/order/6010)
## Silver Sponsors
Silver Sponsors are those who have pledged $50/month to$100/month to SVGR.
[](https://opencollective.com/svgr/order/6008)
## Bronze Sponsors
Bronze Sponsors are those who have pledged $50/month to$100/month to SVGR.
[](https://opencollective.com/svgr/order/6009)
## Backers
[](https://opencollective.com/svgr/order/6007)
================================================
FILE: CHANGELOG.md
================================================
# Change Log
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
# [8.1.0](https://github.com/gregberge/svgr/compare/v8.0.1...v8.1.0) (2023-08-15)
### Bug Fixes
* **cli:** fix default dimensions, prettier & svgo ([571d5c8](https://github.com/gregberge/svgr/commit/571d5c8bd18bc13c12eeb27a9052fa065aeb012e))
* **config:** prefer cli config over rc config ([#845](https://github.com/gregberge/svgr/issues/845)) ([8b97248](https://github.com/gregberge/svgr/commit/8b972484266c45c7f8e4acce4fe2930a024fb4bc))
* **react-native:** fix duplicate import ([#894](https://github.com/gregberge/svgr/issues/894)) ([e612b6a](https://github.com/gregberge/svgr/commit/e612b6a1a4e822178f1e15b82bd2991bf1e84cec))
### Features
* **esm:** add support for svgo.config.cjs ([#879](https://github.com/gregberge/svgr/issues/879)) ([ae91e2e](https://github.com/gregberge/svgr/commit/ae91e2eacbe1156480c96219b993000eb1e7b9bf))
## [8.0.1](https://github.com/gregberge/svgr/compare/v8.0.0...v8.0.1) (2023-05-09)
### Bug Fixes
* fix peer dependencies ([2e05255](https://github.com/gregberge/svgr/commit/2e0525546eb21aa4bb790aa4284f4fe34f96d6b9))
# [8.0.0](https://github.com/gregberge/svgr/compare/v7.0.0...v8.0.0) (2023-05-09)
### Bug Fixes
* parseObject error causes website broken ([05f2946](https://github.com/gregberge/svgr/commit/05f2946d90b194eac17d51ca0562d13e9ed0c995))
### Features
* add snake_case filename option ([#857](https://github.com/gregberge/svgr/issues/857)) ([428b0c7](https://github.com/gregberge/svgr/commit/428b0c7f4c5205bb67ae3e9e7c7e819ec3fc03ba))
* make index template more flexible ([#861](https://github.com/gregberge/svgr/issues/861)) ([003009c](https://github.com/gregberge/svgr/commit/003009c7b234cfe66686b629d3251edb8d46c759))
* **types:** change `SVGProps` from import to import type ([#853](https://github.com/gregberge/svgr/issues/853)) ([095f021](https://github.com/gregberge/svgr/commit/095f0216288ccb5b96a75f154fe3aead074bfa99))
### BREAKING CHANGES
* index template now receives an array of objects containing both the created
component path (`path`) and the original SVG path (`originalPath`)
# [7.0.0](https://github.com/gregberge/svgr/compare/v6.5.1...v7.0.0) (2023-03-24)
### Features
* allow specifying `jsxRuntimeImport` in config ([86bb86f](https://github.com/gregberge/svgr/commit/86bb86f47748618f729742e56199355d9c0bc518)), closes [#801](https://github.com/gregberge/svgr/issues/801) [#801](https://github.com/gregberge/svgr/issues/801)
* remove @svgr/plugin-jsx from core ([a0f078d](https://github.com/gregberge/svgr/commit/a0f078db13936800a32c14ade08b670a14b5a886))
* upgrade to svgo v3 ([#798](https://github.com/gregberge/svgr/issues/798)) ([21b6209](https://github.com/gregberge/svgr/commit/21b6209ef34c51cc0313901f31061afe587ab29b))
### BREAKING CHANGES
* plugin-jsx is no longer included by default in core
* svgr now requires Node.js v14+
## [6.5.1](https://github.com/gregberge/svgr/compare/v6.5.0...v6.5.1) (2022-10-27)
### Reverts
- Revert "feat(a11y): add attribute role="img" to the svg element (#750)" ([1382232](https://github.com/gregberge/svgr/commit/138223284ad9aebc5bbf94ed3ae7174a66dbc7f5)), closes [#750](https://github.com/gregberge/svgr/issues/750)
# [6.5.0](https://github.com/gregberge/svgr/compare/v6.4.0...v6.5.0) (2022-10-14)
### Bug Fixes
- fix Yarn peer dependency warning from @babel/core ([#786](https://github.com/gregberge/svgr/issues/786)) ([db35837](https://github.com/gregberge/svgr/commit/db3583751474997dd72a0209ca61daddbac16c46)), closes [#785](https://github.com/gregberge/svgr/issues/785)
### Features
- **babel-preset:** fix 'role' attribute on svg element for react native ([#787](https://github.com/gregberge/svgr/issues/787)) ([35d85e0](https://github.com/gregberge/svgr/commit/35d85e069ebfef1b26ba181f443d9377a7bc003e))
# [6.4.0](https://github.com/gregberge/svgr/compare/v6.3.1...v6.4.0) (2022-10-01)
### Bug Fixes
- **deps:** add babel-preset to core dependencies ([#782](https://github.com/gregberge/svgr/issues/782)) ([464ec5f](https://github.com/gregberge/svgr/commit/464ec5fe81c6ba98be5a26923f3ad19fc2ef7fc6))
### Features
- **a11y:** add attribute role="img" to the svg element ([#750](https://github.com/gregberge/svgr/issues/750)) ([8b9edc4](https://github.com/gregberge/svgr/commit/8b9edc4e712f3adbd9f9c503dfc5e4d627f763cd))
- support spaces in file names ([#779](https://github.com/gregberge/svgr/issues/779)) ([6ee639a](https://github.com/gregberge/svgr/commit/6ee639a039a0001d3b97fef024f2bd0c3e107182))
## [6.3.1](https://github.com/gregberge/svgr/compare/v6.3.0...v6.3.1) (2022-07-22)
### Bug Fixes
- fix duplicate plugin/preset detected error ([#747](https://github.com/gregberge/svgr/issues/747)) ([3c6a54c](https://github.com/gregberge/svgr/commit/3c6a54c494bb8ff15f332ff2d44e9f6465a6c19a)), closes [#746](https://github.com/gregberge/svgr/issues/746)
- fix exports compat with ESM ([#749](https://github.com/gregberge/svgr/issues/749)) ([f3e304c](https://github.com/gregberge/svgr/commit/f3e304c166282f042ecd4d6c396a0798a7f0b490))
# [6.3.0](https://github.com/gregberge/svgr/compare/v6.2.1...v6.3.0) (2022-07-18)
### Bug Fixes
- **core:** types field in package.json ([#693](https://github.com/gregberge/svgr/issues/693)) ([a491ace](https://github.com/gregberge/svgr/commit/a491acee1b3fbe1cae304dbc399193cdb2148e1d))
- **package.json:** fix exports ([#745](https://github.com/gregberge/svgr/issues/745)) ([2a368d1](https://github.com/gregberge/svgr/commit/2a368d1305949ec6426c7c7312c04224071ec2bd))
### Features
- add descProp option ([#729](https://github.com/gregberge/svgr/issues/729)) ([a0637d4](https://github.com/gregberge/svgr/commit/a0637d49b60243bbae461f7b96dab9b47cd82d8f))
- **cli:** output file name when error happen to handling a file ([#702](https://github.com/gregberge/svgr/issues/702)) ([0ec1fbd](https://github.com/gregberge/svgr/commit/0ec1fbd0bf1e020ecd8f53fba38d7e53d2462b27))
## [6.2.1](https://github.com/gregberge/svgr/compare/v6.2.0...v6.2.1) (2022-01-30)
### Bug Fixes
- do not transform mask-type ([#673](https://github.com/gregberge/svgr/issues/673)) ([6e58f2c](https://github.com/gregberge/svgr/commit/6e58f2cb456bf5fbfa011ab8f8154333c0724e34)), closes [#643](https://github.com/gregberge/svgr/issues/643)
- use .ts extension for generated index ([#670](https://github.com/gregberge/svgr/issues/670)) ([d19abe2](https://github.com/gregberge/svgr/commit/d19abe207013f4e880a78f236e9f75b0151258da)), closes [#462](https://github.com/gregberge/svgr/issues/462)
# [6.2.0](https://github.com/gregberge/svgr/compare/v6.1.2...v6.2.0) (2022-01-10)
### Bug Fixes
- **cli:** pass in parser to prettier format to avoid deprecation warning ([#662](https://github.com/gregberge/svgr/issues/662)) ([74fa3ae](https://github.com/gregberge/svgr/commit/74fa3aed2944b63797a6e0e786acd1b51f86550a))
- **plugin-svgo:** handle potential errors from optimize ([#663](https://github.com/gregberge/svgr/issues/663)) ([7582d31](https://github.com/gregberge/svgr/commit/7582d3130e5b6eb0f962e283f956a84552f839a6))
### Features
- support comments in templates ([#661](https://github.com/gregberge/svgr/issues/661)) ([9afb590](https://github.com/gregberge/svgr/commit/9afb590d1094793fca797449fb7017da9fa06b4e))
## [6.1.2](https://github.com/gregberge/svgr/compare/v6.1.1...v6.1.2) (2021-12-12)
### Bug Fixes
- **rollup:** missing dep & missing map return ([#652](https://github.com/gregberge/svgr/issues/652)) ([12627fc](https://github.com/gregberge/svgr/commit/12627fcd91a425361e1fbe825a6668ce9a8b4f3b))
- specify valid peer deps ([45a76ed](https://github.com/gregberge/svgr/commit/45a76ed5f7d433e549c8513c0fdab08eb6c7bc2c))
## [6.1.1](https://github.com/gregberge/svgr/compare/v6.1.0...v6.1.1) (2021-12-04)
### Bug Fixes
- **webpack:** fix double export ([#648](https://github.com/gregberge/svgr/issues/648)) ([7595d37](https://github.com/gregberge/svgr/commit/7595d378b73d4826a4cead165b3f32386b07315b)), closes [#645](https://github.com/gregberge/svgr/issues/645)
# [6.1.0](https://github.com/gregberge/svgr/compare/v6.0.0...v6.1.0) (2021-12-01)
### BREAKING CHANGES
- svgr v6 is now only compatible with **Webpack v5** and up. See the [migration guide](https://react-svgr.com/docs/migrate/#webpack)
### Bug Fixes
- fix previous export system ([1872829](https://github.com/gregberge/svgr/commit/187282977af841cd5a2243a23abba72b20eec2fa)), closes [#635](https://github.com/gregberge/svgr/issues/635)
### Features
- **native:** automatically convert inline style in native ([138c493](https://github.com/gregberge/svgr/commit/138c493b2ae0c5c1cef488cf9ff7f94827dc2aa5)), closes [#588](https://github.com/gregberge/svgr/issues/588)
### Performance Improvements
- remove useless loader-utils package ([387bc72](https://github.com/gregberge/svgr/commit/387bc727a4e07c2668544e3f5afbefe29a3de909)), closes [#631](https://github.com/gregberge/svgr/issues/631)
# [5.5.0](https://github.com/gregberge/svgr/compare/v5.4.0...v5.5.0) (2020-11-15)
### Bug Fixes
- **typescript:** fix react-native support [#465](https://github.com/gregberge/svgr/issues/465) ([#488](https://github.com/gregberge/svgr/issues/488)) ([d61e0cf](https://github.com/gregberge/svgr/commit/d61e0cface065afc1478fdb44d87ca8177041eab))
- ensure a valid name for exports ([#489](https://github.com/gregberge/svgr/issues/489)) ([0eb8085](https://github.com/gregberge/svgr/commit/0eb80853e53a55226881f6ae3b50c1afe89f1cfc))
- fix playground ([c7ad69f](https://github.com/gregberge/svgr/commit/c7ad69fff347afdca3410e4fb1da235be01b1ac8))
- prevent removing the namespace by svgr ([[#475](https://github.com/gregberge/svgr/issues/475)](https://github.com/gregberge/svgr/issues/475) ([#498](https://github.com/gregberge/svgr/issues/498)) ([00e84ea](https://github.com/gregberge/svgr/commit/00e84ead96d89bcbd072b9585b4db1365e392d33))
### Features
- allow custom name for named export ([#493](https://github.com/gregberge/svgr/issues/493)) ([16a58d6](https://github.com/gregberge/svgr/commit/16a58d6e817c065f72a68be91600a1a360205f44))
- **svgo:** add .svgorc.js config file support ([#451](https://github.com/gregberge/svgr/issues/451)) ([8049b1a](https://github.com/gregberge/svgr/commit/8049b1a63603672096892b6ab3d303580c2f303f)), closes [#412](https://github.com/gregberge/svgr/issues/412)
### Performance Improvements
- **cli:** use fs.promises ([#459](https://github.com/gregberge/svgr/issues/459)) ([af294ac](https://github.com/gregberge/svgr/commit/af294ac3b86e7c39e78fc8b348110baf8c690949))
- replace merge-deep with smaller deepmerge ([#463](https://github.com/gregberge/svgr/issues/463)) ([1f015eb](https://github.com/gregberge/svgr/commit/1f015eb16fca093a08b012236dc83623f7bcce55))
# [5.4.0](https://github.com/gregberge/svgr/compare/v5.3.1...v5.4.0) (2020-04-27)
### Bug Fixes
- wrap svg component directly with memo/forwardRef ([#440](https://github.com/gregberge/svgr/issues/440)) ([#441](https://github.com/gregberge/svgr/issues/441)) ([a6de2da](https://github.com/gregberge/svgr/commit/a6de2dacb63e36572a2167b928418bdc39f3a9c2))
- **cli:** fix index generation ([#443](https://github.com/gregberge/svgr/issues/443)) ([7c46ad7](https://github.com/gregberge/svgr/commit/7c46ad73695c42e6153761c931377d65b71835ea)), closes [#433](https://github.com/gregberge/svgr/issues/433)
### Features
- add `ForeignObject` support for react native ([#430](https://github.com/gregberge/svgr/issues/430)) ([1b56b85](https://github.com/gregberge/svgr/commit/1b56b851478803d40105ce63c70e457bd3183da6))
- **cli:** make all CLI options available in config ([a23a186](https://github.com/gregberge/svgr/commit/a23a18675c0dd4a461d2fcbdc72a305cabd32a13)), closes [#431](https://github.com/gregberge/svgr/issues/431) [#437](https://github.com/gregberge/svgr/issues/437)
## [5.3.1](https://github.com/gregberge/svgr/compare/v5.3.0...v5.3.1) (2020-04-05)
### Bug Fixes
- fix typescript types (ref, title) ([#419](https://github.com/gregberge/svgr/issues/419)) ([6e7e6b2](https://github.com/gregberge/svgr/commit/6e7e6b2e73d26d30f64604e0fc627f9ff94079c2))
# [5.3.0](https://github.com/gregberge/svgr/compare/v5.2.0...v5.3.0) (2020-03-22)
### Bug Fixes
- **cli:** remove confusion between {keep,ignore}-existing ([#413](https://github.com/gregberge/svgr/issues/413)) ([c5430f9](https://github.com/gregberge/svgr/commit/c5430f97b053a7d2d85c85c56b87dfc8c9c1f09a)), closes [#390](https://github.com/gregberge/svgr/issues/390)
- **parcel-plugin:** support "parcel" and "parcel-bundler" ([853db4e](https://github.com/gregberge/svgr/commit/853db4ef0e9da4952e8189e3f86fb62e6c506693)), closes [#410](https://github.com/gregberge/svgr/issues/410)
- **svgo:** support any SVGO config format ([#412](https://github.com/gregberge/svgr/issues/412)) ([f2b2367](https://github.com/gregberge/svgr/commit/f2b2367389fda20baba6e0a5e884e7f7fe29a3ed)), closes [#400](https://github.com/gregberge/svgr/issues/400)
### Features
- add typescript option ([4596d7b](https://github.com/gregberge/svgr/commit/4596d7bb470babb5ec4b87f5281174fb182bd9c7)), closes [#373](https://github.com/gregberge/svgr/issues/373)
# [5.2.0](https://github.com/smooth-code/svgr/compare/v5.1.0...v5.2.0) (2020-02-23)
### Bug Fixes
- verify that `svgoConfig.plugins` is an array ([#397](https://github.com/smooth-code/svgr/issues/397)) ([88110b6](https://github.com/smooth-code/svgr/commit/88110b6eb4d93ded68ca2de05cc82654dfac977d))
### Features
- **parcel-plugin:** replace `parcel-bundler` with `parcel` ([#387](https://github.com/smooth-code/svgr/issues/387)) ([d09bcd5](https://github.com/smooth-code/svgr/commit/d09bcd5d7ba21c8845c6042928bbdf14165e787b))
# [5.1.0](https://github.com/smooth-code/svgr/compare/v5.0.1...v5.1.0) (2020-01-20)
### Bug Fixes
- fix merging svgo plugins in config ([#384](https://github.com/smooth-code/svgr/issues/384)) ([c9d2dfc](https://github.com/smooth-code/svgr/commit/c9d2dfcb8d4da55eb21a13507c87d9e549a86e7e))
### Features
- add Svg prefix to exports that starts with a number ([#383](https://github.com/smooth-code/svgr/issues/383)) ([fd120d1](https://github.com/smooth-code/svgr/commit/fd120d11c81395353f300da487295b769f6b9501)), closes [#379](https://github.com/smooth-code/svgr/issues/379)
- allow to provide custom index.js template ([#378](https://github.com/smooth-code/svgr/issues/378)) ([f734dda](https://github.com/smooth-code/svgr/commit/f734ddac8e639ad213a3ce09689e46226fd5c1e0))
## [5.0.1](https://github.com/smooth-code/svgr/compare/v5.0.0...v5.0.1) (2019-12-29)
### Bug Fixes
- fix engines in package.json ([a45d6fc](https://github.com/smooth-code/svgr/commit/a45d6fc8b43402bec60ed4e9273f90fdc65a23a7))
## [4.3.3](https://github.com/gregberge/svgr/compare/v4.3.2...v4.3.3) (2019-09-24)
### Bug Fixes
- **babel-plugin-svg-dynamic-title:** dont render empty title ([#341](https://github.com/gregberge/svgr/issues/341)) ([88b24c5](https://github.com/gregberge/svgr/commit/88b24c5)), closes [#333](https://github.com/gregberge/svgr/issues/333)
- invalid characters in component name ([#332](https://github.com/gregberge/svgr/issues/332)) ([4b4bd2c](https://github.com/gregberge/svgr/commit/4b4bd2c)), closes [#331](https://github.com/gregberge/svgr/issues/331)
## [4.3.2](https://github.com/gregberge/svgr/compare/v4.3.1...v4.3.2) (2019-07-15)
### Performance Improvements
- replace rehype with svg-parser ([#321](https://github.com/gregberge/svgr/issues/321)) ([7eb5ef6](https://github.com/gregberge/svgr/commit/7eb5ef6))
## [4.3.1](https://github.com/gregberge/svgr/compare/v4.3.0...v4.3.1) (2019-07-01)
### Bug Fixes
- **titleProp:** handle the existing title case by using element instead of value (children) ([#315](https://github.com/gregberge/svgr/issues/315)) ([065e7a9](https://github.com/gregberge/svgr/commit/065e7a9))
# [4.3.0](https://github.com/gregberge/svgr/compare/v4.2.0...v4.3.0) (2019-05-28)
### Features
- **cli:** output relative destination paths ([#312](https://github.com/gregberge/svgr/issues/312)) ([b78e471](https://github.com/gregberge/svgr/commit/b78e471))
- titleProps fallbacks to svg's title ([#311](https://github.com/gregberge/svgr/issues/311)) ([8f92366](https://github.com/gregberge/svgr/commit/8f92366))
# [4.2.0](https://github.com/gregberge/svgr/compare/v4.1.0...v4.2.0) (2019-04-11)
### Bug Fixes
- keep viewBox when dimensions are removed ([#281](https://github.com/gregberge/svgr/issues/281)) ([f476c8e](https://github.com/gregberge/svgr/commit/f476c8e))
- **babel-preset:** expandProps + icon option ([ddfae22](https://github.com/gregberge/svgr/commit/ddfae22)), closes [#277](https://github.com/gregberge/svgr/issues/277)
- **cli:** fix kebab case transformation with "\_" ([39c24c5](https://github.com/gregberge/svgr/commit/39c24c5)), closes [#280](https://github.com/gregberge/svgr/issues/280)
- **hast-util-to-babel-ast:** correctly handle aria attributes ([23d12aa](https://github.com/gregberge/svgr/commit/23d12aa)), closes [#279](https://github.com/gregberge/svgr/issues/279)
- **plugin-prettier:** fix prettier warning ([d01d33f](https://github.com/gregberge/svgr/commit/d01d33f))
### Features
- add expo option ([#289](https://github.com/gregberge/svgr/issues/289)) ([978db3e](https://github.com/gregberge/svgr/commit/978db3e))
# [4.1.0](https://github.com/gregberge/svgr/compare/v4.0.4...v4.1.0) (2018-11-24)
### Features
- add parcel plugin ([#235](https://github.com/gregberge/svgr/issues/235)) ([144dbe3](https://github.com/gregberge/svgr/commit/144dbe3)), closes [#215](https://github.com/gregberge/svgr/issues/215)
## [4.0.4](https://github.com/gregberge/svgr/compare/v4.0.3...v4.0.4) (2018-11-24)
### Bug Fixes
- **webpack:** use static babel config ([#240](https://github.com/gregberge/svgr/issues/240)) ([d67af31](https://github.com/gregberge/svgr/commit/d67af31)), closes [#232](https://github.com/gregberge/svgr/issues/232)
## [4.0.3](https://github.com/gregberge/svgr/compare/v4.0.2...v4.0.3) (2018-11-13)
### Bug Fixes
- **babel-plugin:** fix usage of spread attribute([#231](https://github.com/gregberge/svgr/issues/231)) ([4186953](https://github.com/gregberge/svgr/commit/4186953))
- upgrade dependencies ([7e2195f](https://github.com/gregberge/svgr/commit/7e2195f))
## [4.0.2](https://github.com/gregberge/svgr/compare/v4.0.1...v4.0.2) (2018-11-08)
### Bug Fixes
- **hast-util-to-babel-ast:** replace tabs by spaces in attributes ([b0f3d19](https://github.com/gregberge/svgr/commit/b0f3d19)), closes [#219](https://github.com/gregberge/svgr/issues/219)
## [4.0.1](https://github.com/gregberge/svgr/compare/v4.0.0...v4.0.1) (2018-11-08)
### Bug Fixes
- **babel-plugin-transform-svg:** support template that only return a single node ([80ac40f](https://github.com/gregberge/svgr/commit/80ac40f)), closes [#223](https://github.com/gregberge/svgr/issues/223)
- **babel-plugin-transform-svg-component:** parsing error of JSX template exports defs ([#225](https://github.com/gregberge/svgr/issues/225)) ([1e56309](https://github.com/gregberge/svgr/commit/1e56309)), closes [/github.com/gregberge/svgr/blob/master/packages/babel-plugin-transform-svg-component/src/util.js#L61](https://github.com//github.com/gregberge/svgr/blob/master/packages/babel-plugin-transform-svg-component/src/util.js/issues/L61)
- **hast-util-to-babel-ast:** correctly transforms data & aria attributes ([99711c4](https://github.com/gregberge/svgr/commit/99711c4)), closes [#221](https://github.com/gregberge/svgr/issues/221)
- **hast-util-to-babel-ast:** replace line-breaks in attributes ([00a2625](https://github.com/gregberge/svgr/commit/00a2625)), closes [#219](https://github.com/gregberge/svgr/issues/219)
# [4.0.0](https://github.com/gregberge/svgr/compare/v3.1.0...v4.0.0) (2018-11-04)
### Bug Fixes
- prevent babel read babel.config.js ([#206](https://github.com/gregberge/svgr/issues/206)) ([514d43d](https://github.com/gregberge/svgr/commit/514d43d))
- **cli:** fix --out-dir usage with absolute path ([#208](https://github.com/gregberge/svgr/issues/208)) ([c922e2e](https://github.com/gregberge/svgr/commit/c922e2e))
### Features
- **svgo:** prefix ids by default ([06c338d](https://github.com/gregberge/svgr/commit/06c338d)), closes [#210](https://github.com/gregberge/svgr/issues/210)
- **v4:** new architecture ([ac8b8ca](https://github.com/gregberge/svgr/commit/ac8b8ca))
- allow dynamic properties in replaceAttrValues option ([15f55fe](https://github.com/gregberge/svgr/commit/15f55fe)), closes [#205](https://github.com/gregberge/svgr/issues/205)
### BREAKING CHANGES
- **v4:** - `template` option must now returns a Babel AST
* `@svgr/core` does not include svgo & prettier by default
# [3.1.0](https://github.com/gregberge/svgr/compare/v3.0.0...v3.1.0) (2018-10-05)
### Bug Fixes
- style & custom SVG properties ([#203](https://github.com/gregberge/svgr/issues/203)) ([f8b2212](https://github.com/gregberge/svgr/commit/f8b2212)), closes [#199](https://github.com/gregberge/svgr/issues/199) [#201](https://github.com/gregberge/svgr/issues/201)
### Features
- allow Mask & Image on React Native ([#202](https://github.com/gregberge/svgr/issues/202)) ([0256bc0](https://github.com/gregberge/svgr/commit/0256bc0))
<a name="3.0.0"></a>
# [3.0.0](https://github.com/gregberge/svgr/compare/v2.4.1...v3.0.0) (2018-10-01)
### Bug Fixes
- **rollup:** forward filePath in rollup plugin ([461492b](https://github.com/gregberge/svgr/commit/461492b)), closes [#177](https://github.com/gregberge/svgr/issues/177) [#188](https://github.com/gregberge/svgr/issues/188)
- **webpack:** forward filePath in webpack loader ([b7a108e](https://github.com/gregberge/svgr/commit/b7a108e)), closes [#177](https://github.com/gregberge/svgr/issues/177) [#188](https://github.com/gregberge/svgr/issues/188)
- fix --icon + --no-dimensions ([7535693](https://github.com/gregberge/svgr/commit/7535693)), closes [#141](https://github.com/gregberge/svgr/issues/141)
- fix expandProps when position is not allowed ([45522fc](https://github.com/gregberge/svgr/commit/45522fc))
### Features
- **config:** improve runtime config ([e52cdce](https://github.com/gregberge/svgr/commit/e52cdce)), closes [#192](https://github.com/gregberge/svgr/issues/192)
- **template:** expose `getProps` util for template ([5cb238e](https://github.com/gregberge/svgr/commit/5cb238e)), closes [#187](https://github.com/gregberge/svgr/issues/187)
- add synchronous API ([169eb2f](https://github.com/gregberge/svgr/commit/169eb2f)), closes [#185](https://github.com/gregberge/svgr/issues/185)
- always prefix component name with "Svg" ([f71aa7a](https://github.com/gregberge/svgr/commit/f71aa7a)), closes [#190](https://github.com/gregberge/svgr/issues/190)
- do not remove style tag ([a4ce09a](https://github.com/gregberge/svgr/commit/a4ce09a)), closes [#191](https://github.com/gregberge/svgr/issues/191)
- new "expandProps" option ([bb95828](https://github.com/gregberge/svgr/commit/bb95828)), closes [#170](https://github.com/gregberge/svgr/issues/170)
- remove "svgAttributes" option ([4e46a5d](https://github.com/gregberge/svgr/commit/4e46a5d)), closes [#173](https://github.com/gregberge/svgr/issues/173)
- use forwardRef on React Native ([4bdd989](https://github.com/gregberge/svgr/commit/4bdd989)), closes [#184](https://github.com/gregberge/svgr/issues/184)
- use React.forwardRef ([cbee51c](https://github.com/gregberge/svgr/commit/cbee51c)), closes [#184](https://github.com/gregberge/svgr/issues/184)
### BREAKING CHANGES
- "--no-expand-props" is now replaced by "--expand-props none". You can now specify a position "start" or "end" for "expandProps"
property.
- `svgAttributes` has been removed, please use `svgProps` instead.
- "ref" option now uses `React.forwardRef`. You don't have to use "svgRef"
prop, just use "ref" and it will work. `React.forwardRef` requires React
> 16.3.
- Style tag will no longer be automatically removed. SVGO should handle it
correctly using "inlineStyles" plugin. If you want to remove them,
enable "removeStyleElement" plugin in your SVGO config.
- **rollup:** runtime configuration is now loaded using rollup plugin.
- **webpack:** runtime configuration is now loaded using webpack
loader.
- **config:** - Runtime configuration is always loaded (even with Node API `convert`)
* In CLI, "--config" is now "--config-file"; this new option can be used
everywhere
<a name="2.4.1"></a>
## [2.4.1](https://github.com/gregberge/svgr/compare/v2.4.0...v2.4.1) (2018-09-16)
### Bug Fixes
- **config:** fix custom config & default options ([#176](https://github.com/gregberge/svgr/issues/176)) ([9a6c40b](https://github.com/gregberge/svgr/commit/9a6c40b))
<a name="2.4.0"></a>
# [2.4.0](https://github.com/gregberge/svgr/compare/v2.3.0...v2.4.0) (2018-09-16)
### Bug Fixes
- use literal instead of litteral ([7849fd4](https://github.com/gregberge/svgr/commit/7849fd4))
### Features
- allow to spread props at the start ([#166](https://github.com/gregberge/svgr/issues/166)) ([cd659dc](https://github.com/gregberge/svgr/commit/cd659dc))
- **upgrade:** h2x@1.1.0 (jsdom@12.0.0) & others ([2d9b7bd](https://github.com/gregberge/svgr/commit/2d9b7bd))
- new option "svgProps" ([#172](https://github.com/gregberge/svgr/issues/172)) ([9657110](https://github.com/gregberge/svgr/commit/9657110))
<a name="2.3.0"></a>
# [2.3.0](https://github.com/gregberge/svgr/compare/v2.2.1...v2.3.0) (2018-09-03)
### Features
- upgrade to Babel v7 ([7bc908d](https://github.com/gregberge/svgr/commit/7bc908d))
<a name="2.2.1"></a>
## [2.2.1](https://github.com/gregberge/svgr/compare/v2.2.0...v2.2.1) (2018-08-16)
### Bug Fixes
- **rollup:** fix to work with rollup-plugin-typescript2 ([#147](https://github.com/gregberge/svgr/issues/147)) ([4b3737e](https://github.com/gregberge/svgr/commit/4b3737e))
<a name="2.2.0"></a>
# [2.2.0](https://github.com/gregberge/svgr/compare/v2.1.1...v2.2.0) (2018-08-13)
### Bug Fixes
- remove null-byte characters ([#154](https://github.com/gregberge/svgr/issues/154)) ([de7f8a7](https://github.com/gregberge/svgr/commit/de7f8a7)), closes [#153](https://github.com/gregberge/svgr/issues/153)
- **webpack:** use source when possible ([#139](https://github.com/gregberge/svgr/issues/139)) ([ae9965d](https://github.com/gregberge/svgr/commit/ae9965d))
### Features
- **core:** pass info to SVGO ([2b2353b](https://github.com/gregberge/svgr/commit/2b2353b)), closes [#152](https://github.com/gregberge/svgr/issues/152)
<a name="2.1.1"></a>
## [2.1.1](https://github.com/gregberge/svgr/compare/v2.1.0...v2.1.1) (2018-07-11)
### Bug Fixes
- **core:** config conflict with icon option ([#137](https://github.com/gregberge/svgr/issues/137)) ([e13a99a](https://github.com/gregberge/svgr/commit/e13a99a))
<a name="2.1.0"></a>
# [2.1.0](https://github.com/gregberge/svgr/compare/v2.0.0...v2.1.0) (2018-07-08)
### Features
- add .editorconfig support ([#129](https://github.com/gregberge/svgr/issues/129)) ([968fd82](https://github.com/gregberge/svgr/commit/968fd82))
- **cli:** support custom filename cases ([#136](https://github.com/gregberge/svgr/issues/136)) ([4922f7a](https://github.com/gregberge/svgr/commit/4922f7a)), closes [#118](https://github.com/gregberge/svgr/issues/118)
<a name="2.0.0"></a>
# [2.0.0](https://github.com/gregberge/svgr/compare/v1.10.0...v2.0.0) (2018-06-12)
### Features
#### Project configurations
SVGR now supports Prettier (`.prettierc`) and SVGO (`.svgo.yml`) configurations. It also supports a new `.svgrrc` configuration. See the readme for more detail.
#### Rollup plugin
Rollup has now an official SVGR plugin available under `@svgr/rollup`.
#### Split into several modules
SVGR is now an ecosystem of four modules:
- `@svgr/core`: Core of SVGR, it exposes the Node API
- `@svgr/cli`: Command Line Interface
- `@svgr/webpack`: webpack loader
- `@svgr/rollup`: a fresh new Rollup plugin
#### `svgAttributes` and `titleProp` options
Two new options appears, the first one `svgAttributes` gives you the opportunity to add attribute on the root `svg` tag without creating a custom template:
Command:
```
svgr --svg-attributes focusable=true foo.svg
```
Output:
```js
;(props) => <svg focusable="false" />
```
The second one, `titleProp`, adds a custom property `title` to specify the title of the SVG.
Command:
```
svgr --title-prop foo.svg
```
Output:
```js
;({ title }) => (
<svg>
<title>{title}</title>
</svg>
)
```
### Breaking changes
#### Node version
Node v6 support has been dropped, you need Node >= 8 to run SVGR.
#### Prettier options
All Prettier options have been removed:
- `jsx-bracket-same-line`
- `no-bracket-spacing`
- `no-semi`
- `single-quote`
- `tab-width`
- `trailing-comma`
- `use-tabs`
If you used it, use a `.prettierrc` instead of use the new option `--prettier-config`:
v1.x:
```
svgr --no-semi file.svg
```
v2.x:
```
svgr --prettier-config '{"semi": true}' file.svg
```
#### SVGO options
All SVGO options have been removed:
- `ids`
- `keep-useless-defs`
- `no-title`
- `no-view-box`
- `precision`
If you used it, use a `.svgo.yml` instead of use the new option `--svgo-config`:
v1.x:
```
svgr --ids file.svg
```
v2.x:
```
svgr --svgo-config '{"plugins": [{"cleanupIDs": {"remove": false, "minify": false}}]}' file.svg
```
#### Other options
- `replace-attr-value` has been renamed into `replace-attr-values`
In API, `replaceAttrValues` is now an object instead of an array.
#### Node API changes
- `rawConvert` method has been dropped
- Templates now receive three arguments: `code`, `config` and `state`
- `componentName` must now be passed in state
### Thanks
Thanks to [@MarquesDev](https://github.com/MarquesDev) and [@lifeiscontent](https://github.com/lifeiscontent).
<a name="1.10.0"></a>
# [1.10.0](https://github.com/gregberge/svgr/compare/v1.9.2...v1.10.0) (2018-05-28)
### Features
- upgrade Prettier (v1.13) ([2f50403](https://github.com/gregberge/svgr/commit/2f50403)), closes [#108](https://github.com/gregberge/svgr/issues/108)
<a name="1.9.2"></a>
## [1.9.2](https://github.com/gregberge/svgr/compare/v1.9.1...v1.9.2) (2018-05-14)
### Bug Fixes
- **ids:** do not minify them ([538b73f](https://github.com/gregberge/svgr/commit/538b73f))
<a name="1.9.1"></a>
## [1.9.1](https://github.com/gregberge/svgr/compare/v1.9.0...v1.9.1) (2018-03-25)
### Bug Fixes
- fix width / height override ([1f91705](https://github.com/gregberge/svgr/commit/1f91705)), closes [#issuecomment-375467614](https://github.com/gregberge/svgr/issues/issuecomment-375467614)
- handle filename with numbers ([a2387ea](https://github.com/gregberge/svgr/commit/a2387ea)), closes [#62](https://github.com/gregberge/svgr/issues/62) [#64](https://github.com/gregberge/svgr/issues/64)
<a name="1.9.0"></a>
# [1.9.0](https://github.com/gregberge/svgr/compare/v1.8.1...v1.9.0) (2018-03-08)
### Features
- add option to removeDimensions ([#58](https://github.com/gregberge/svgr/issues/58)) ([7357e7c](https://github.com/gregberge/svgr/commit/7357e7c))
<a name="1.8.1"></a>
## [1.8.1](https://github.com/gregberge/svgr/compare/v1.8.0...v1.8.1) (2018-01-31)
### Bug Fixes
- **loader:** add missing babel-plugin ([#50](https://github.com/gregberge/svgr/issues/50)) ([c49b627](https://github.com/gregberge/svgr/commit/c49b627))
<a name="1.8.0"></a>
# [1.8.0](https://github.com/gregberge/svgr/compare/v1.7.0...v1.8.0) (2018-01-31)
### Bug Fixes
- fix tabWidth option ([#49](https://github.com/gregberge/svgr/issues/49)) ([a863280](https://github.com/gregberge/svgr/commit/a863280)), closes [#33](https://github.com/gregberge/svgr/issues/33)
### Features
- support custom file extension ([#47](https://github.com/gregberge/svgr/issues/47)) ([56a111f](https://github.com/gregberge/svgr/commit/56a111f)), closes [#31](https://github.com/gregberge/svgr/issues/31)
- **webpack:** include Babel transformation ([#48](https://github.com/gregberge/svgr/issues/48)) ([dfecd39](https://github.com/gregberge/svgr/commit/dfecd39)), closes [#45](https://github.com/gregberge/svgr/issues/45)
<a name="1.7.0"></a>
# [1.7.0](https://github.com/gregberge/svgr/compare/v1.6.0...v1.7.0) (2018-01-23)
### Features
- **emSize:** add support for missing width/height ([2eacfd8](https://github.com/gregberge/svgr/commit/2eacfd8))
- add option keepUselessDefs ([3d03510](https://github.com/gregberge/svgr/commit/3d03510)), closes [#36](https://github.com/gregberge/svgr/issues/36)
### Performance Improvements
- refactor emSize to reduce iterations ([3c9d8b4](https://github.com/gregberge/svgr/commit/3c9d8b4))
<a name="1.6.0"></a>
# [1.6.0](https://github.com/gregberge/svgr/compare/v1.5.0...v1.6.0) (2018-01-08)
### Features
- support url-loader & file-loader ([b95ed07](https://github.com/gregberge/svgr/commit/b95ed07))
<a name="1.5.0"></a>
# [1.5.0](https://github.com/gregberge/svgr/compare/v1.4.0...v1.5.0) (2017-12-12)
### Features
- add ref option ([#29](https://github.com/gregberge/svgr/issues/29)) ([86e0bda](https://github.com/gregberge/svgr/commit/86e0bda))
<a name="1.4.0"></a>
# [1.4.0](https://github.com/gregberge/svgr/compare/v1.3.0...v1.4.0) (2017-12-07)
### Features
- add "-native" option to target React Native ([76fd6f5](https://github.com/gregberge/svgr/commit/76fd6f5))
- **native:** import only relevant components ([fcd4229](https://github.com/gregberge/svgr/commit/fcd4229))
- **native:** log unsupported components ([888d968](https://github.com/gregberge/svgr/commit/888d968))
<a name="1.3.0"></a>
# [1.3.0](https://github.com/gregberge/svgr/compare/v1.1.0...v1.3.0) (2017-12-05)
### Features
- add option to keeps IDs from SVG ([bfd4066](https://github.com/gregberge/svgr/commit/bfd4066))
<a name="1.2.0"></a>
# [1.2.0](https://github.com/gregberge/svgr/compare/v1.1.0...v1.2.0) (2017-12-04)
### Features
- simplify webpack usage ([7ac643e](https://github.com/gregberge/svgr/commit/7ac643e))
<a name="1.1.0"></a>
# [1.1.0](https://github.com/gregberge/svgr/compare/v1.0.0...v1.1.0) (2017-11-24)
### Features
- add viewBox option that default to true ([ba2be3a](https://github.com/gregberge/svgr/commit/ba2be3a))
<a name="1.0.0"></a>
# [1.0.0](https://github.com/gregberge/svgr/compare/v0.5.0...v1.0.0) (2017-11-07)
### Features
- upgrade svgo & prettier ([fd66885](https://github.com/gregberge/svgr/commit/fd66885))
### BREAKING CHANGES
- SVGO now removes viewBox automatically.
================================================
FILE: CODE_OF_CONDUCT.md
================================================
# Contributor Covenant Code of Conduct
## Our Pledge
In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation.
## Our Standards
Examples of behavior that contributes to creating a positive environment include:
- Using welcoming and inclusive language
- Being respectful of differing viewpoints and experiences
- Gracefully accepting constructive criticism
- Focusing on what is best for the community
- Showing empathy towards other community members
Examples of unacceptable behavior by participants include:
- The use of sexualized language or imagery and unwelcome sexual attention or advances
- Trolling, insulting/derogatory comments, and personal or political attacks
- Public or private harassment
- Publishing others' private information, such as a physical or electronic address, without explicit permission
- Other conduct which could reasonably be considered inappropriate in a professional setting
## Our Responsibilities
Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior.
Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.
## Scope
This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers.
## Enforcement
Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at hey@gregberge.com. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.
Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership.
## Attribution
This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version]
[homepage]: http://contributor-covenant.org
[version]: http://contributor-covenant.org/version/1/4/
================================================
FILE: CONTRIBUTING.md
================================================
# How to Contribute
SVGR is a small project, it is widely used but has not a lot of contributors. We're still working out the kinks to make contributing to this project as easy and transparent as possible, but we're not quite there yet. Hopefully this document makes the process for contributing clear and answers some questions that you may have.
## [Code of Conduct](https://github.com/gregberge/svgr/blob/master/CODE_OF_CONDUCT.md)
We expect project participants to adhere to our Code of Conduct. Please read [the full text](https://github.com/gregberge/svgr/blob/master/CODE_OF_CONDUCT.md) so that you can understand what actions will and will not be tolerated.
## Open Development
All work on SVGR happens directly on [GitHub](/). Both core team members and external contributors send pull requests which go through the same review process.
The SVGR repo is a monorepo using pnpm workspaces and [Lerna](https://lerna.js.org/docs/recipes/using-pnpm-with-lerna). The package manager used to install and link dependencies must be [pnpm](https://pnpm.io/). Note that website still uses npm, as there are some errors reported when using pnpm in gatsby.
### Online one click Setup
You can use Gitpod(An Online Open Source VS Code like IDE which is free for Open Source) for contributing online. With a single click it will start a workspace and automatically:
- clone the `svgr` repo.
- install dependencies in '/': `pnpm install`
- install dependencies in '/website': `npm install`
- run `pnpm run dev` in `/`.
- run `npm run dev` in `/website` to start the dev server.
[](https://gitpod.io/from-referrer/)
### Workflow and Pull Requests
_Before_ submitting a pull request, please make sure the following is done…
1. Fork the repo and create your branch from `main`. A guide on how to fork a repository: https://help.github.com/articles/fork-a-repo/
Open terminal (e.g. Terminal, iTerm, Git Bash or Git Shell) and type:
```sh-session
$ git clone https://github.com/<your_username>/svgr
$ cd svgr
$ git checkout -b my_branch
```
Note: Replace `<your_username>` with your GitHub username
2. Run `pnpm install` and `pnpm run build`.
3. If you've added code that should be tested, add tests. You can use watch mode that continuously transforms changed files to make your life easier.
```sh
# in the background
pnpm run dev
```
4. If you've changed APIs, update the documentation.
5. Ensure the linting is good via `npm run lint`.
```sh-session
$ pnpm run lint
```
6. Ensure the test suite passes via `npm run test`.
```sh-session
$ pnpm run test
```
## Bugs
### Where to Find Known Issues
We will be using GitHub Issues for our public bugs. We will keep a close eye on this and try to make it clear when we have an internal fix in progress. Before filing a new issue, try to make sure your problem doesn't already exist.
### Reporting New Issues
The best way to get your bug fixed is to provide a reduced test case. Please provide a public repository with a runnable example.
## Code Conventions
Please follow the `.prettierrc` in the project.
## Credits
This project exists thanks to all the people who [contribute](CONTRIBUTING.md). <a href="https://github.com/gregberge/svgr/graphs/contributors"><img src="https://opencollective.com/svgr/contributors.svg?width=890&button=false" /></a>
### [Backers](https://opencollective.com/svgr#backer)
Thank you to all our backers! 🙏
<a href="https://opencollective.com/svgr#backers" target="_blank"><img src="https://opencollective.com/svgr/backers.svg?width=890"></a>
### [Sponsors](https://opencollective.com/svgr#sponsor)
Support this project by becoming a sponsor. Your logo will show up here with a link to your website.
## License
By contributing to SVGR, you agree that your contributions will be licensed under its MIT license.
================================================
FILE: LICENSE
================================================
Copyright 2017 Smooth Code
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
================================================
FILE: README.md
================================================
<h1 align="center">
<img src="https://raw.githubusercontent.com/gregberge/svgr/master/resources/svgr-logo.png" alt="svgr" title="svgr" width="300">
</h1>
<p align="center" style="font-size: 1.2rem;">Transform SVGs into React components 🦁</p>
[](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"
>
<!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
<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}>
<path d="M0 0h48v1H0z" fill="currentColor" fillRule="evenodd" />
</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: __fixtures__/custom-index-template.js
================================================
const path = require('path')
function indexTemplate(files) {
const exportEntries = files.map(({path: file}) => {
const basename = path.basename(file, path.extname(file))
return `export { ${basename} } from './${basename}';`
})
return exportEntries.join('\n')
}
module.exports = indexTemplate
================================================
FILE: __fixtures__/custom-index.config.js
================================================
const indexTemplate = require('./custom-index-template.js')
function template(
{ imports, componentName, props, jsx, exports },
{ tpl }
) {
return tpl`${imports}
export function ${componentName}(${props}) {
return ${jsx};
}
`
}
module.exports = {
template,
indexTemplate,
}
================================================
FILE: __fixtures__/overrides.config.js
================================================
module.exports = {
expandProps: false,
dimensions: false,
svgo: false,
prettier: false,
}
================================================
FILE: __fixtures__/simple-existing/File..js
================================================
import * as React from 'react'
function SvgFile(props) {
return (
<svg width={48} height={1} {...props}>
<path d="M0 0h48v1H0z" fill="#063855" fillRule="evenodd" />
</svg>
)
}
export default SvgFile
================================================
FILE: __fixtures__/simple-existing/File.js
================================================
// nothing
================================================
FILE: __fixtures__/simple-existing/index..js
================================================
export { default as File } from './File'
================================================
FILE: __fixtures__/template.js
================================================
module.exports = () => (code, state) => `
import * as React from 'react'
export default function ${state.componentName}() {
return ${code}
}
`
================================================
FILE: __fixtures__/withPrettierRc/.prettierrc
================================================
{
"tabWidth": 5
}
================================================
FILE: __fixtures__/withSvgoConfig/svgo.config.cjs
================================================
module.exports = {
plugins: [
{
name: 'preset-default',
params: {
overrides: {
removeTitle: false,
},
},
},
]
}
================================================
FILE: __fixtures__/withSvgoConfig/svgo.config.js
================================================
module.exports = {
plugins: [
{
name: 'preset-default',
params: {
overrides: {
removeTitle: false,
},
},
},
]
}
================================================
FILE: __fixtures__/withSvgrRc/.svgrrc
================================================
{
"icon": true
}
================================================
FILE: api/api/svgr.js
================================================
/* eslint-disable @typescript-eslint/no-var-requires */
const { transform } = require('@svgr/core')
const jsx = require('@svgr/plugin-jsx')
const svgo = require('@svgr/plugin-svgo')
const prettier = require('@svgr/plugin-prettier')
module.exports = (req, res) => {
if (!req.body) {
res.status(204).send('')
return
}
transform(req.body.code, {
...req.body.options,
plugins: [svgo, jsx, prettier],
})
.then((output) => {
res.status(200).json({ output })
})
.catch((error) => {
res.status(400).json({ error: error.message })
})
}
================================================
FILE: api/package.json
================================================
{
"private": true,
"packageManager": "pnpm@8.1.1",
"dependencies": {
"@svgr/core": "latest",
"@svgr/plugin-jsx": "latest",
"@svgr/plugin-prettier": "latest",
"@svgr/plugin-svgo": "latest"
}
}
================================================
FILE: api/pnpm-workspace.yaml
================================================
# https://github.com/pnpm/pnpm/issues/2412
# This is only created so that api package doesn't try to use the virtual store from the repo's root
================================================
FILE: api/vercel.json
================================================
{
"public": true,
"redirects": [
{
"source": "/",
"destination": "https://react-svgr.com/playground"
}
],
"headers": [
{
"source": "/api/(.*)",
"headers": [
{ "key": "Access-Control-Allow-Credentials", "value": "true" },
{ "key": "Access-Control-Allow-Origin", "value": "*" },
{
"key": "Access-Control-Allow-Methods",
"value": "GET,OPTIONS,PATCH,DELETE,POST,PUT"
},
{
"key": "Access-Control-Allow-Headers",
"value": "X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version"
}
]
}
]
}
================================================
FILE: babel.config.js
================================================
module.exports = {
presets: [
['@babel/preset-env', { targets: { node: '12' }, loose: true }],
'@babel/preset-typescript',
],
}
================================================
FILE: build/rollup.config.mjs
================================================
import { resolve } from 'node:path'
import { readFileSync } from 'node:fs'
import json from '@rollup/plugin-json'
import dts from 'rollup-plugin-dts'
import esbuild from 'rollup-plugin-esbuild'
// eslint-disable-next-line @typescript-eslint/no-var-requires
const pkg = JSON.parse(
readFileSync(resolve(process.cwd(), './package.json'), 'utf-8'),
)
const name = pkg.main ? pkg.main.replace(/\.js$/, '') : './dist/index'
const bundle = (config) => ({
...config,
input: 'src/index.ts',
external: (id) => !/^[./]/.test(id),
})
export default [
bundle({
plugins: [json(), esbuild()],
output: [
{
file: `${name}.js`,
format: 'cjs',
sourcemap: Boolean(pkg.main),
exports: 'auto',
},
],
}),
...(pkg.main
? [
bundle({
plugins: [
dts({
compilerOptions: {
// https://github.com/Swatinem/rollup-plugin-dts/issues/143
preserveSymlinks: false,
},
}),
],
output: {
file: `${name}.d.ts`,
format: 'es',
},
}),
]
: []),
]
================================================
FILE: deprecated-packages/svgr/message.js
================================================
/* eslint-disable @typescript-eslint/no-var-requires */
const githubCurrentUser = require('github-current-user')
githubCurrentUser.verify((err, verified, username) => {
console.log(`Hello ${username || ''}!`)
console.log(`SVGR 🦁 v2.0.0 is released 🎉`)
console.log(
`It is now splitted into several packages, what are you looking for?\n`,
)
console.log(`Command line 👉 @svgr/cli`)
console.log(`Node API 👉 @svgr/core`)
console.log(`Webpack 👉 @svgr/webpack`)
console.log(`Rollup 👉 @svgr/rollup`)
console.log(`Pick the one you need!`)
})
================================================
FILE: deprecated-packages/svgr/package.json
================================================
{
"name": "svgr",
"description": "Convert raw SVG into React components.",
"version": "2.0.0",
"repository": "git@github.com:gregberge/svgr.git",
"author": "Greg Bergé <berge.greg@gmail.com>",
"keywords": [
"svg",
"h2x",
"react",
"component",
"svg2react",
"svg-to-react"
],
"engines": {
"node": ">=8"
},
"license": "MIT",
"dependencies": {
"github-current-user": "^2.5.0"
},
"scripts": {
"postinstall": "node message.js; sleep 10; exit 1;"
}
}
================================================
FILE: examples/mocha-esm/CHANGELOG.md
================================================
# Change Log
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
# [8.0.0](https://github.com/gregberge/svgr/compare/v7.0.0...v8.0.0) (2023-05-09)
**Note:** Version bump only for package @svgr/mocha-esm-example
# [7.0.0](https://github.com/gregberge/svgr/compare/v6.5.1...v7.0.0) (2023-03-24)
**Note:** Version bump only for package @svgr/mocha-esm-example
================================================
FILE: examples/mocha-esm/__mocks__/svg.js
================================================
export default 'Icon'
================================================
FILE: examples/mocha-esm/example.js
================================================
import Icon from './icon.svg'
export { Icon }
================================================
FILE: examples/mocha-esm/example.test.js
================================================
import { Icon } from './example.js'
it('works', () => {
if (Icon !== 'Icon') {
throw new Error('Invalid')
}
})
================================================
FILE: examples/mocha-esm/mock-loader.js
================================================
import { cwd } from 'node:process'
import { pathToFileURL } from 'node:url'
const baseURL = pathToFileURL(`${cwd()}/`).href
const SVG_REGEX = /^[./a-zA-Z0-9$_-]+\.svg$/
export async function resolve(specifier, context, defaultResolve) {
if (SVG_REGEX.test(specifier)) {
return { url: new URL('./__mocks__/svg.js', baseURL).href }
}
return defaultResolve(specifier, context, defaultResolve)
}
================================================
FILE: examples/mocha-esm/package.json
================================================
{
"name": "@svgr/mocha-esm-example",
"private": true,
"type": "module",
"scripts": {
"test": "mocha --loader=./mock-loader.js example.test.js"
},
"devDependencies": {
"mocha": "^10.2.0"
},
"version": "8.0.0"
}
================================================
FILE: examples/webpack/.gitignore
================================================
dist/
================================================
FILE: examples/webpack/CHANGELOG.md
================================================
# Change Log
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
# [8.1.0](https://github.com/gregberge/svgr/compare/v8.0.1...v8.1.0) (2023-08-15)
**Note:** Version bump only for package @svgr/webpack-example
## [8.0.1](https://github.com/gregberge/svgr/compare/v8.0.0...v8.0.1) (2023-05-09)
**Note:** Version bump only for package @svgr/webpack-example
# [8.0.0](https://github.com/gregberge/svgr/compare/v7.0.0...v8.0.0) (2023-05-09)
**Note:** Version bump only for package @svgr/webpack-example
# [7.0.0](https://github.com/gregberge/svgr/compare/v6.5.1...v7.0.0) (2023-03-24)
**Note:** Version bump only for package @svgr/webpack-example
================================================
FILE: examples/webpack/package.json
================================================
{
"name": "@svgr/webpack-example",
"private": true,
"scripts": {
"start": "webpack serve"
},
"devDependencies": {
"@svgr/webpack": "^8.1.0",
"html-webpack-plugin": "^5.5.0",
"url-loader": "^4.1.1",
"webpack": "^5.76.3",
"webpack-cli": "^5.0.1",
"webpack-dev-server": "^4.13.1"
},
"version": "8.1.0"
}
================================================
FILE: examples/webpack/src/index.js
================================================
import star, { ReactComponent } from './star.url.svg'
import Star from './star.simple.svg'
console.log('url', typeof star, typeof ReactComponent)
console.log('simple', typeof Star)
================================================
FILE: examples/webpack/webpack.config.js
================================================
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
mode: 'development',
module: {
rules: [
{
test: /url\.svg$/,
use: ['@svgr/webpack', 'url-loader'],
},
{
test: /simple\.svg$/,
use: '@svgr/webpack',
},
],
},
plugins: [
new HtmlWebpackPlugin({
title: 'Development',
}),
],
}
================================================
FILE: jest.config.js
================================================
module.exports = {
watchPathIgnorePatterns: ['__fixtures__', '__fixtures__build__'],
rootDir: 'packages',
transform: {
'^.+\\.(j|t)sx?$': ['babel-jest', { root: __dirname }],
},
}
================================================
FILE: lerna.json
================================================
{
"lerna": "2.9.0",
"version": "8.1.0",
"npmClient": "pnpm",
"useWorkspaces": true
}
================================================
FILE: package.json
================================================
{
"private": true,
"scripts": {
"build": "pnpm -r run build",
"dev": "pnpm -r --parallel run build --watch",
"format": "prettier --write .",
"lint": "eslint . && prettier --check .",
"release": "lerna publish --conventional-commits && conventional-github-releaser --preset angular",
"test": "jest --runInBand"
},
"packageManager": "pnpm@8.1.1",
"devDependencies": {
"@types/babel__core": "^7.20.0",
"@types/node": "^18.15.11",
"@babel/core": "^7.21.3",
"@babel/preset-env": "^7.20.2",
"@babel/preset-typescript": "^7.21.0",
"@rollup/plugin-json": "^6.0.0",
"@types/jest": "^29.5.0",
"@typescript-eslint/eslint-plugin": "^5.56.0",
"@typescript-eslint/parser": "^5.56.0",
"@svgr/plugin-jsx": "workspace:*",
"@svgr/plugin-svgo": "workspace:*",
"@svgr/plugin-prettier": "workspace:*",
"babel-jest": "^29.5.0",
"codecov": "^3.8.3",
"conventional-github-releaser": "^3.1.5",
"esbuild": "^0.17.12",
"eslint": "^8.36.0",
"eslint-plugin-react": "^7.32.2",
"eslint-plugin-react-hooks": "^4.6.0",
"jest": "^29.5.0",
"lerna": "^6.6.0",
"react": "^18.2.0",
"rollup": "^3.20.2",
"rollup-plugin-dts": "^5.3.0",
"rollup-plugin-esbuild": "^5.0.0",
"typescript": "^5.0.2"
}
}
================================================
FILE: packages/babel-plugin-add-jsx-attribute/.npmignore
================================================
src/
.*
================================================
FILE: packages/babel-plugin-add-jsx-attribute/CHANGELOG.md
================================================
# Change Log
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
# [8.0.0](https://github.com/gregberge/svgr/compare/v7.0.0...v8.0.0) (2023-05-09)
**Note:** Version bump only for package @svgr/babel-plugin-add-jsx-attribute
# [7.0.0](https://github.com/gregberge/svgr/compare/v6.5.1...v7.0.0) (2023-03-24)
**Note:** Version bump only for package @svgr/babel-plugin-add-jsx-attribute
## [6.5.1](https://github.com/gregberge/svgr/compare/v6.5.0...v6.5.1) (2022-10-27)
**Note:** Version bump only for package @svgr/babel-plugin-add-jsx-attribute
# [6.5.0](https://github.com/gregberge/svgr/compare/v6.4.0...v6.5.0) (2022-10-14)
**Note:** Version bump only for package @svgr/babel-plugin-add-jsx-attribute
## [6.3.1](https://github.com/gregberge/svgr/compare/v6.3.0...v6.3.1) (2022-07-22)
### Bug Fixes
- fix exports compat with ESM ([#749](https://github.com/gregberge/svgr/issues/749)) ([f3e304c](https://github.com/gregberge/svgr/commit/f3e304c166282f042ecd4d6c396a0798a7f0b490))
# [6.3.0](https://github.com/gregberge/svgr/compare/v6.2.1...v6.3.0) (2022-07-18)
### Bug Fixes
- **package.json:** fix exports ([#745](https://github.com/gregberge/svgr/issues/745)) ([2a368d1](https://github.com/gregberge/svgr/commit/2a368d1305949ec6426c7c7312c04224071ec2bd))
# [5.4.0](https://github.com/gregberge/svgr/tree/master/packages/babel-plugin-add-jsx-attribute/compare/v5.3.1...v5.4.0) (2020-04-27)
**Note:** Version bump only for package @svgr/babel-plugin-add-jsx-attribute
## [5.0.1](https://github.com/gregberge/svgr/tree/master/packages/babel-plugin-add-jsx-attribute/compare/v5.0.0...v5.0.1) (2019-12-29)
### Bug Fixes
- fix engines in package.json ([a45d6fc](https://github.com/gregberge/svgr/tree/master/packages/babel-plugin-add-jsx-attribute/commit/a45d6fc8b43402bec60ed4e9273f90fdc65a23a7))
# [4.2.0](https://github.com/gregberge/svgr/tree/master/packages/babel-plugin-add-jsx-attribute/compare/v4.1.0...v4.2.0) (2019-04-11)
**Note:** Version bump only for package @svgr/babel-plugin-add-jsx-attribute
# [4.0.0](https://github.com/gregberge/svgr/compare/v3.1.0...v4.0.0) (2018-11-04)
### Features
- **v4:** new architecture ([ac8b8ca](https://github.com/gregberge/svgr/commit/ac8b8ca))
### BREAKING CHANGES
- **v4:** - `template` option must now returns a Babel AST
* `@svgr/core` does not include svgo & prettier by default
================================================
FILE: packages/babel-plugin-add-jsx-attribute/README.md
================================================
# @svgr/babel-plugin-add-jsx-attribute
## Install
```
npm install --save-dev @svgr/babel-plugin-add-jsx-attribute
```
## Usage
**.babelrc**
```json
{
"plugins": [
[
"@svgr/babel-plugin-add-jsx-attribute",
{
"elements": ["svg"],
"attributes": [
{
"name": "width",
"value": "200",
"spread": false,
"literal": false,
"position": "end"
}
]
}
]
]
}
```
## License
MIT
================================================
FILE: packages/babel-plugin-add-jsx-attribute/package.json
================================================
{
"name": "@svgr/babel-plugin-add-jsx-attribute",
"description": "Add JSX attribute",
"version": "8.0.0",
"main": "./dist/index.js",
"types": "./dist/index.d.ts",
"exports": {
".": {
"types": "./dist/index.d.ts",
"default": "./dist/index.js"
},
"./package.json": "./package.json"
},
"repository": "https://github.com/gregberge/svgr/tree/main/packages/babel-plugin-add-jsx-attribute",
"author": "Greg Bergé <berge.greg@gmail.com>",
"publishConfig": {
"access": "public"
},
"keywords": [
"babel-plugin"
],
"engines": {
"node": ">=14"
},
"homepage": "https://react-svgr.com",
"funding": {
"type": "github",
"url": "https://github.com/sponsors/gregberge"
},
"license": "MIT",
"peerDependencies": {
"@babel/core": "^7.0.0-0"
},
"scripts": {
"reset": "rm -rf dist",
"build": "rollup -c ../../build/rollup.config.mjs",
"prepublishOnly": "pnpm run reset && pnpm run build"
}
}
================================================
FILE: packages/babel-plugin-add-jsx-attribute/src/index.test.ts
================================================
import { transform } from '@babel/core'
import plugin, { Options } from '.'
const testPlugin = (code: string, options: Options) => {
const result = transform(code, {
plugins: ['@babel/plugin-syntax-jsx', [plugin, options]],
configFile: false,
})
return result?.code
}
describe('plugin', () => {
it('should add simple attribute', () => {
expect(
testPlugin('<div />', {
elements: ['div'],
attributes: [{ name: 'disabled' }],
}),
).toMatchInlineSnapshot(`"<div disabled />;"`)
})
it('should add attribute with value', () => {
expect(
testPlugin('<div />', {
elements: ['div'],
attributes: [{ name: 'disabled', value: true }],
}),
).toMatchInlineSnapshot(`"<div disabled={true} />;"`)
expect(
testPlugin('<div />', {
elements: ['div'],
attributes: [{ name: 'disabled', value: 'true' }],
}),
).toMatchInlineSnapshot(`"<div disabled="true" />;"`)
expect(
testPlugin('<div />', {
elements: ['div'],
attributes: [{ name: 'disabled', value: 200 }],
}),
).toMatchInlineSnapshot(`"<div disabled={200} />;"`)
})
it('should add literal attribute', () => {
expect(
testPlugin('<div />', {
elements: ['div'],
attributes: [{ name: 'ref', value: 'ref', literal: true }],
}),
).toMatchInlineSnapshot(`"<div ref={ref} />;"`)
expect(
testPlugin('<div />', {
elements: ['div'],
attributes: [{ name: 'ref', value: 'ref ? ref : null', literal: true }],
}),
).toMatchInlineSnapshot(`"<div ref={ref ? ref : null} />;"`)
})
it('should add spread attribute', () => {
expect(
testPlugin('<div foo><span /></div>', {
elements: ['div'],
attributes: [
{
spread: true,
name: 'props',
position: 'start',
},
],
}),
).toMatchInlineSnapshot(`"<div {...props} foo><span /></div>;"`)
expect(
testPlugin('<div><span foo="bar" /></div>', {
elements: ['span'],
attributes: [
{
spread: true,
name: 'props',
position: 'end',
},
],
}),
).toMatchInlineSnapshot(`"<div><span foo="bar" {...props} /></div>;"`)
})
it('should replace attribute', () => {
expect(
testPlugin('<div disabled />', {
elements: ['div'],
attributes: [{ name: 'disabled', value: false }],
}),
).toMatchInlineSnapshot(`"<div disabled={false} />;"`)
})
})
================================================
FILE: packages/babel-plugin-add-jsx-attribute/src/index.ts
================================================
/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
import { ConfigAPI, types as t, NodePath, template } from '@babel/core'
export interface Attribute {
name: string
value?: boolean | number | string | null
spread?: boolean
literal?: boolean
position?: 'start' | 'end'
}
export interface Options {
elements: string[]
attributes: Attribute[]
}
const positionMethod = {
start: 'unshiftContainer',
end: 'pushContainer',
} as const
const addJSXAttribute = (_: ConfigAPI, opts: Options) => {
function getAttributeValue({
literal,
value,
}: {
literal?: Attribute['literal']
value: Attribute['value']
}) {
if (typeof value === 'boolean') {
return t.jsxExpressionContainer(t.booleanLiteral(value))
}
if (typeof value === 'number') {
return t.jsxExpressionContainer(t.numericLiteral(value))
}
if (typeof value === 'string' && literal) {
return t.jsxExpressionContainer(
(template.ast(value) as t.ExpressionStatement).expression,
)
}
if (typeof value === 'string') {
return t.stringLiteral(value)
}
return null
}
function getAttribute({ spread, name, value, literal }: Attribute) {
if (spread) {
return t.jsxSpreadAttribute(t.identifier(name))
}
return t.jsxAttribute(
t.jsxIdentifier(name),
getAttributeValue({ value, literal }),
)
}
return {
visitor: {
JSXOpeningElement(path: NodePath<t.JSXOpeningElement>) {
if (!t.isJSXIdentifier(path.node.name)) return
if (!opts.elements.includes(path.node.name.name)) return
opts.attributes.forEach(
({
name,
value = null,
spread = false,
literal = false,
position = 'end',
}) => {
const method = positionMethod[position]
const newAttribute = getAttribute({ spread, name, value, literal })
const attributes = path.get('attributes')
const isEqualAttribute = (
attribute: NodePath<t.JSXSpreadAttribute | t.JSXAttribute>,
) => {
if (spread)
return (
attribute.isJSXSpreadAttribute() &&
attribute.get('argument').isIdentifier({ name })
)
return (
attribute.isJSXAttribute() &&
attribute.get('name').isJSXIdentifier({ name })
)
}
const replaced = attributes.some((attribute) => {
if (!isEqualAttribute(attribute)) return false
attribute.replaceWith(newAttribute)
return true
})
if (!replaced) {
path[method]('attributes', newAttribute)
}
},
)
},
},
}
}
export default addJSXAttribute
================================================
FILE: packages/babel-plugin-add-jsx-attribute/tsconfig.json
================================================
{
"extends": "../../tsconfig",
"include": ["src"]
}
================================================
FILE: packages/babel-plugin-remove-jsx-attribute/.npmignore
================================================
/*
/dist/*
!/dist/index.{d.ts,js}
!/dist/index.js.map
================================================
FILE: packages/babel-plugin-remove-jsx-attribute/CHANGELOG.md
================================================
# Change Log
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
# [8.0.0](https://github.com/gregberge/svgr/compare/v7.0.0...v8.0.0) (2023-05-09)
**Note:** Version bump only for package @svgr/babel-plugin-remove-jsx-attribute
# [7.0.0](https://github.com/gregberge/svgr/compare/v6.5.1...v7.0.0) (2023-03-24)
**Note:** Version bump only for package @svgr/babel-plugin-remove-jsx-attribute
# [6.5.0](https://github.com/gregberge/svgr/compare/v6.4.0...v6.5.0) (2022-10-14)
**Note:** Version bump only for package @svgr/babel-plugin-remove-jsx-attribute
## [6.3.1](https://github.com/gregberge/svgr/compare/v6.3.0...v6.3.1) (2022-07-22)
### Bug Fixes
* fix exports compat with ESM ([#749](https://github.com/gregberge/svgr/issues/749)) ([f3e304c](https://github.com/gregberge/svgr/commit/f3e304c166282f042ecd4d6c396a0798a7f0b490))
# [6.3.0](https://github.com/gregberge/svgr/compare/v6.2.1...v6.3.0) (2022-07-18)
### Bug Fixes
* **package.json:** fix exports ([#745](https://github.com/gregberge/svgr/issues/745)) ([2a368d1](https://github.com/gregberge/svgr/commit/2a368d1305949ec6426c7c7312c04224071ec2bd))
# [5.4.0](https://github.com/gregberge/svgr/tree/master/packages/babel-plugin-remove-jsx-attribute/compare/v5.3.1...v5.4.0) (2020-04-27)
**Note:** Version bump only for package @svgr/babel-plugin-remove-jsx-attribute
## [5.0.1](https://github.com/gregberge/svgr/tree/master/packages/babel-plugin-remove-jsx-attribute/compare/v5.0.0...v5.0.1) (2019-12-29)
### Bug Fixes
* fix engines in package.json ([a45d6fc](https://github.com/gregberge/svgr/tree/master/packages/babel-plugin-remove-jsx-attribute/commit/a45d6fc8b43402bec60ed4e9273f90fdc65a23a7))
# [4.2.0](https://github.com/gregberge/svgr/tree/master/packages/babel-plugin-remove-jsx-attribute/compare/v4.1.0...v4.2.0) (2019-04-11)
**Note:** Version bump only for package @svgr/babel-plugin-remove-jsx-attribute
## [4.0.3](https://github.com/gregberge/svgr/compare/v4.0.2...v4.0.3) (2018-11-13)
### Bug Fixes
* **babel-plugin:** fix usage of spread attribute([#231](https://github.com/gregberge/svgr/issues/231)) ([4186953](https://github.com/gregberge/svgr/commit/4186953))
# [4.0.0](https://github.com/gregberge/svgr/compare/v3.1.0...v4.0.0) (2018-11-04)
### Features
* **v4:** new architecture ([ac8b8ca](https://github.com/gregberge/svgr/commit/ac8b8ca))
### BREAKING CHANGES
* **v4:** - `template` option must now returns a Babel AST
- `@svgr/core` does not include svgo & prettier by default
================================================
FILE: packages/babel-plugin-remove-jsx-attribute/README.md
================================================
# @svgr/babel-plugin-remove-jsx-attribute
## Install
```
npm install --save-dev @svgr/babel-plugin-remove-jsx-attribute
```
## Usage
**.babelrc**
```json
{
"plugins": [
[
"@svgr/babel-plugin-remove-jsx-attribute",
{
"elements": ["svg"],
"attributes": ["width", "height"]
}
]
]
}
```
## License
MIT
================================================
FILE: packages/babel-plugin-remove-jsx-attribute/package.json
================================================
{
"name": "@svgr/babel-plugin-remove-jsx-attribute",
"description": "Remove JSX attribute",
"version": "8.0.0",
"main": "./dist/index.js",
"types": "./dist/index.d.ts",
"exports": {
".": {
"types": "./dist/index.d.ts",
"default": "./dist/index.js"
},
"./package.json": "./package.json"
},
"repository": "https://github.com/gregberge/svgr/tree/main/packages/babel-plugin-remove-jsx-attribute",
"author": "Greg Bergé <berge.greg@gmail.com>",
"publishConfig": {
"access": "public"
},
"keywords": [
"babel-plugin"
],
"engines": {
"node": ">=14"
},
"homepage": "https://react-svgr.com",
"funding": {
"type": "github",
"url": "https://github.com/sponsors/gregberge"
},
"license": "MIT",
"peerDependencies": {
"@babel/core": "^7.0.0-0"
},
"scripts": {
"reset": "rm -rf dist",
"build": "rollup -c ../../build/rollup.config.mjs",
"prepublishOnly": "pnpm run reset && pnpm run build"
}
}
================================================
FILE: packages/babel-plugin-remove-jsx-attribute/src/index.test.ts
================================================
import { transform } from '@babel/core'
import plugin, { Options } from '.'
const testPlugin = (code: string, options: Options) => {
const result = transform(code, {
plugins: ['@babel/plugin-syntax-jsx', [plugin, options]],
configFile: false,
})
return result?.code
}
describe('plugin', () => {
it('should remove attributes from an element', () => {
expect(
testPlugin('<div foo><span foo /></div>', {
elements: ['span'],
attributes: ['foo'],
}),
).toMatchInlineSnapshot(`"<div foo><span /></div>;"`)
})
it('should not throw error when spread operator is used', () => {
expect(
testPlugin('<div foo><span foo {...props} /></div>', {
elements: ['span'],
attributes: ['foo'],
}),
).toMatchInlineSnapshot(`"<div foo><span {...props} /></div>;"`)
})
})
================================================
FILE: packages/babel-plugin-remove-jsx-attribute/src/index.ts
================================================
/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
import { ConfigAPI, types as t, NodePath } from '@babel/core'
export interface Options {
elements: string[]
attributes: string[]
}
const removeJSXAttribute = (_: ConfigAPI, opts: Options) => ({
visitor: {
JSXOpeningElement(path: NodePath<t.JSXOpeningElement>) {
if (!t.isJSXIdentifier(path.node.name)) return
if (!opts.elements.includes(path.node.name.name)) return
// @ts-ignore
path.get('attributes').forEach((attribute) => {
if (
t.isJSXAttribute(attribute.node) &&
t.isJSXIdentifier(attribute.node.name) &&
opts.attributes.includes(attribute.node.name.name)
) {
attribute.remove()
}
})
},
},
})
export default removeJSXAttribute
================================================
FILE: packages/babel-plugin-remove-jsx-attribute/tsconfig.json
================================================
{
"extends": "../../tsconfig",
"include": ["src"]
}
================================================
FILE: packages/babel-plugin-remove-jsx-empty-expression/.npmignore
================================================
/*
/dist/*
!/dist/index.{d.ts,js}
!/dist/index.js.map
================================================
FILE: packages/babel-plugin-remove-jsx-empty-expression/CHANGELOG.md
================================================
# Change Log
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
# [8.0.0](https://github.com/gregberge/svgr/compare/v7.0.0...v8.0.0) (2023-05-09)
**Note:** Version bump only for package @svgr/babel-plugin-remove-jsx-empty-expression
# [7.0.0](https://github.com/gregberge/svgr/compare/v6.5.1...v7.0.0) (2023-03-24)
**Note:** Version bump only for package @svgr/babel-plugin-remove-jsx-empty-expression
# [6.5.0](https://github.com/gregberge/svgr/compare/v6.4.0...v6.5.0) (2022-10-14)
**Note:** Version bump only for package @svgr/babel-plugin-remove-jsx-empty-expression
## [6.3.1](https://github.com/gregberge/svgr/compare/v6.3.0...v6.3.1) (2022-07-22)
### Bug Fixes
* fix exports compat with ESM ([#749](https://github.com/gregberge/svgr/issues/749)) ([f3e304c](https://github.com/gregberge/svgr/commit/f3e304c166282f042ecd4d6c396a0798a7f0b490))
# [6.3.0](https://github.com/gregberge/svgr/compare/v6.2.1...v6.3.0) (2022-07-18)
### Bug Fixes
* **package.json:** fix exports ([#745](https://github.com/gregberge/svgr/issues/745)) ([2a368d1](https://github.com/gregberge/svgr/commit/2a368d1305949ec6426c7c7312c04224071ec2bd))
## [5.0.1](https://github.com/gregberge/svgr/tree/master/packages/babel-plugin-remove-jsx-empty-expression/compare/v5.0.0...v5.0.1) (2019-12-29)
### Bug Fixes
* fix engines in package.json ([a45d6fc](https://github.com/gregberge/svgr/tree/master/packages/babel-plugin-remove-jsx-empty-expression/commit/a45d6fc8b43402bec60ed4e9273f90fdc65a23a7))
# [4.2.0](https://github.com/gregberge/svgr/tree/master/packages/babel-plugin-remove-jsx-empty-expression/compare/v4.1.0...v4.2.0) (2019-04-11)
**Note:** Version bump only for package @svgr/babel-plugin-remove-jsx-empty-expression
# [4.0.0](https://github.com/gregberge/svgr/compare/v3.1.0...v4.0.0) (2018-11-04)
### Features
* **v4:** new architecture ([ac8b8ca](https://github.com/gregberge/svgr/commit/ac8b8ca))
### BREAKING CHANGES
* **v4:** - `template` option must now returns a Babel AST
- `@svgr/core` does not include svgo & prettier by default
================================================
FILE: packages/babel-plugin-remove-jsx-empty-expression/README.md
================================================
# @svgr/babel-plugin-remove-jsx-empty-expression
## Install
```
npm install --save-dev @svgr/babel-plugin-remove-jsx-empty-expression
```
## Usage
**.babelrc**
```json
{
"plugins": ["@svgr/babel-plugin-remove-jsx-empty-expression"]
}
```
## License
MIT
================================================
FILE: packages/babel-plugin-remove-jsx-empty-expression/package.json
================================================
{
"name": "@svgr/babel-plugin-remove-jsx-empty-expression",
"description": "Remove JSX empty expression",
"version": "8.0.0",
"main": "./dist/index.js",
"types": "./dist/index.d.ts",
"exports": {
".": {
"types": "./dist/index.d.ts",
"default": "./dist/index.js"
},
"./package.json": "./package.json"
},
"repository": "https://github.com/gregberge/svgr/tree/main/packages/babel-plugin-remove-jsx-empty-expression",
"author": "Greg Bergé <berge.greg@gmail.com>",
"publishConfig": {
"access": "public"
},
"keywords": [
"babel-plugin"
],
"engines": {
"node": ">=14"
},
"homepage": "https://react-svgr.com",
"funding": {
"type": "github",
"url": "https://github.com/sponsors/gregberge"
},
"license": "MIT",
"peerDependencies": {
"@babel/core": "^7.0.0-0"
},
"scripts": {
"reset": "rm -rf dist",
"build": "rollup -c ../../build/rollup.config.mjs",
"prepublishOnly": "pnpm run reset && pnpm run build"
}
}
================================================
FILE: packages/babel-plugin-remove-jsx-empty-expression/src/index.test.ts
================================================
import { transform } from '@babel/core'
import plugin from '.'
const testPlugin = (code: string) => {
const result = transform(code, {
plugins: ['@babel/plugin-syntax-jsx', plugin],
configFile: false,
})
return result?.code
}
describe('plugin', () => {
it('should remove empty expression', () => {
expect(testPlugin('<div>{/* Hello */}<a /></div>')).toMatchInlineSnapshot(
`"<div><a /></div>;"`,
)
})
})
================================================
FILE: packages/babel-plugin-remove-jsx-empty-expression/src/index.ts
================================================
/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
import { types as t, NodePath } from '@babel/core'
const removeJSXEmptyExpression = () => ({
visitor: {
JSXExpressionContainer(path: NodePath<t.JSXExpressionContainer>) {
if (t.isJSXEmptyExpression(path.get('expression'))) {
path.remove()
}
},
},
})
export default removeJSXEmptyExpression
================================================
FILE: packages/babel-plugin-remove-jsx-empty-expression/tsconfig.json
================================================
{
"extends": "../../tsconfig",
"include": ["src"]
}
================================================
FILE: packages/babel-plugin-replace-jsx-attribute-value/.npmignore
================================================
src/
.*
/*
/dist/*
!/dist/index.{d.ts,js}
!/dist/index.js.map
================================================
FILE: packages/babel-plugin-replace-jsx-attribute-value/CHANGELOG.md
================================================
# Change Log
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
# [8.0.0](https://github.com/gregberge/svgr/compare/v7.0.0...v8.0.0) (2023-05-09)
**Note:** Version bump only for package @svgr/babel-plugin-replace-jsx-attribute-value
# [7.0.0](https://github.com/gregberge/svgr/compare/v6.5.1...v7.0.0) (2023-03-24)
**Note:** Version bump only for package @svgr/babel-plugin-replace-jsx-attribute-value
## [6.5.1](https://github.com/gregberge/svgr/compare/v6.5.0...v6.5.1) (2022-10-27)
**Note:** Version bump only for package @svgr/babel-plugin-replace-jsx-attribute-value
# [6.5.0](https://github.com/gregberge/svgr/compare/v6.4.0...v6.5.0) (2022-10-14)
**Note:** Version bump only for package @svgr/babel-plugin-replace-jsx-attribute-value
## [6.3.1](https://github.com/gregberge/svgr/compare/v6.3.0...v6.3.1) (2022-07-22)
### Bug Fixes
- fix exports compat with ESM ([#749](https://github.com/gregberge/svgr/issues/749)) ([f3e304c](https://github.com/gregberge/svgr/commit/f3e304c166282f042ecd4d6c396a0798a7f0b490))
# [6.3.0](https://github.com/gregberge/svgr/compare/v6.2.1...v6.3.0) (2022-07-18)
### Bug Fixes
- **package.json:** fix exports ([#745](https://github.com/gregberge/svgr/issues/745)) ([2a368d1](https://github.com/gregberge/svgr/commit/2a368d1305949ec6426c7c7312c04224071ec2bd))
## [5.0.1](https://github.com/gregberge/svgr/tree/master/packages/babel-plugin-replace-jsx-attribute-value/compare/v5.0.0...v5.0.1) (2019-12-29)
### Bug Fixes
- fix engines in package.json ([a45d6fc](https://github.com/gregberge/svgr/tree/master/packages/babel-plugin-replace-jsx-attribute-value/commit/a45d6fc8b43402bec60ed4e9273f90fdc65a23a7))
# [4.2.0](https://github.com/gregberge/svgr/tree/master/packages/babel-plugin-replace-jsx-attribute-value/compare/v4.1.0...v4.2.0) (2019-04-11)
**Note:** Version bump only for package @svgr/babel-plugin-replace-jsx-attribute-value
# [4.0.0](https://github.com/gregberge/svgr/compare/v3.1.0...v4.0.0) (2018-11-04)
### Features
- **v4:** new architecture ([ac8b8ca](https://github.com/gregberge/svgr/commit/ac8b8ca))
- allow dynamic properties in replaceAttrValues option ([15f55fe](https://github.com/gregberge/svgr/commit/15f55fe)), closes [#205](https://github.com/gregberge/svgr/issues/205)
### BREAKING CHANGES
- **v4:** - `template` option must now returns a Babel AST
* `@svgr/core` does not include svgo & prettier by default
================================================
FILE: packages/babel-plugin-replace-jsx-attribute-value/README.md
================================================
# @svgr/babel-plugin-replace-jsx-attribute-value
## Install
```
npm install --save-dev @svgr/babel-plugin-replace-jsx-attribute-value
```
## Usage
**.babelrc**
```json
{
"plugins": [
[
"@svgr/babel-plugin-replace-jsx-attribute-value",
{
"values": [
{ "value": "#000", "newValue": "#fff" },
{ "value": "blue", "newValue": "props.color", "literal": true }
]
}
]
]
}
```
## License
MIT
================================================
FILE: packages/babel-plugin-replace-jsx-attribute-value/package.json
================================================
{
"name": "@svgr/babel-plugin-replace-jsx-attribute-value",
"description": "Replace JSX attribute value",
"version": "8.0.0",
"main": "./dist/index.js",
"types": "./dist/index.d.ts",
"exports": {
".": {
"types": "./dist/index.d.ts",
"default": "./dist/index.js"
},
"./package.json": "./package.json"
},
"repository": "https://github.com/gregberge/svgr/tree/main/packages/babel-plugin-replace-jsx-attribute-value",
"author": "Greg Bergé <berge.greg@gmail.com>",
"publishConfig": {
"access": "public"
},
"keywords": [
"babel-plugin"
],
"engines": {
"node": ">=14"
},
"homepage": "https://react-svgr.com",
"funding": {
"type": "github",
"url": "https://github.com/sponsors/gregberge"
},
"license": "MIT",
"peerDependencies": {
"@babel/core": "^7.0.0-0"
},
"scripts": {
"reset": "rm -rf dist",
"build": "rollup -c ../../build/rollup.config.mjs",
"prepublishOnly": "pnpm run reset && pnpm run build"
}
}
================================================
FILE: packages/babel-plugin-replace-jsx-attribute-value/src/index.test.ts
================================================
import { transform } from '@babel/core'
import plugin, { Options } from '.'
const testPlugin = (code: string, options: Options) => {
const result = transform(code, {
plugins: ['@babel/plugin-syntax-jsx', [plugin, options]],
configFile: false,
})
return result?.code
}
describe('plugin', () => {
it('should replace attribute values', () => {
expect(
testPlugin('<div something="cool" />', {
values: [{ value: 'cool', newValue: 'not cool' }],
}),
).toMatchInlineSnapshot(`"<div something="not cool" />;"`)
expect(
testPlugin('<div something="cool" />', {
values: [{ value: 'cool', newValue: 'props.color', literal: true }],
}),
).toMatchInlineSnapshot(`"<div something={props.color} />;"`)
})
})
================================================
FILE: packages/babel-plugin-replace-jsx-attribute-value/src/index.ts
================================================
/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
import { ConfigAPI, types as t, NodePath, template } from '@babel/core'
export interface Value {
value: string
newValue: string | boolean | number
literal?: boolean
}
export interface Options {
values: Value[]
}
const addJSXAttribute = (api: ConfigAPI, opts: Options) => {
const getAttributeValue = (
value: string | boolean | number,
literal?: boolean,
) => {
if (typeof value === 'string' && literal) {
return t.jsxExpressionContainer(
(template.ast(value) as t.ExpressionStatement).expression,
)
}
if (typeof value === 'string') {
return t.stringLiteral(value)
}
if (typeof value === 'boolean') {
return t.jsxExpressionContainer(t.booleanLiteral(value))
}
if (typeof value === 'number') {
return t.jsxExpressionContainer(t.numericLiteral(value))
}
return null
}
return {
visitor: {
JSXAttribute(path: NodePath<t.JSXAttribute>) {
const valuePath = path.get('value')
if (!valuePath.isStringLiteral()) return
opts.values.forEach(({ value, newValue, literal }) => {
if (!valuePath.isStringLiteral({ value })) return
const attributeValue = getAttributeValue(newValue, literal)
if (attributeValue) {
valuePath.replaceWith(attributeValue)
}
})
},
},
}
}
export default addJSXAttribute
================================================
FILE: packages/babel-plugin-replace-jsx-attribute-value/tsconfig.json
================================================
{
"extends": "../../tsconfig",
"include": ["src"]
}
================================================
FILE: packages/babel-plugin-svg-dynamic-title/.npmignore
================================================
/*
/dist/*
!/dist/index.{d.ts,js}
!/dist/index.js.map
================================================
FILE: packages/babel-plugin-svg-dynamic-title/CHANGELOG.md
================================================
# Change Log
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
# [8.0.0](https://github.com/gregberge/svgr/compare/v7.0.0...v8.0.0) (2023-05-09)
**Note:** Version bump only for package @svgr/babel-plugin-svg-dynamic-title
# [7.0.0](https://github.com/gregberge/svgr/compare/v6.5.1...v7.0.0) (2023-03-24)
**Note:** Version bump only for package @svgr/babel-plugin-svg-dynamic-title
## [6.5.1](https://github.com/gregberge/svgr/compare/v6.5.0...v6.5.1) (2022-10-27)
**Note:** Version bump only for package @svgr/babel-plugin-svg-dynamic-title
# [6.5.0](https://github.com/gregberge/svgr/compare/v6.4.0...v6.5.0) (2022-10-14)
**Note:** Version bump only for package @svgr/babel-plugin-svg-dynamic-title
## [6.3.1](https://github.com/gregberge/svgr/compare/v6.3.0...v6.3.1) (2022-07-22)
### Bug Fixes
- fix exports compat with ESM ([#749](https://github.com/gregberge/svgr/issues/749)) ([f3e304c](https://github.com/gregberge/svgr/commit/f3e304c166282f042ecd4d6c396a0798a7f0b490))
# [6.3.0](https://github.com/gregberge/svgr/compare/v6.2.1...v6.3.0) (2022-07-18)
### Bug Fixes
- **package.json:** fix exports ([#745](https://github.com/gregberge/svgr/issues/745)) ([2a368d1](https://github.com/gregberge/svgr/commit/2a368d1305949ec6426c7c7312c04224071ec2bd))
### Features
- add descProp option ([#729](https://github.com/gregberge/svgr/issues/729)) ([a0637d4](https://github.com/gregberge/svgr/commit/a0637d49b60243bbae461f7b96dab9b47cd82d8f))
# [5.4.0](https://github.com/gregberge/svgr/tree/master/packages/babel-plugin-svg-dynamic-title/compare/v5.3.1...v5.4.0) (2020-04-27)
**Note:** Version bump only for package @svgr/babel-plugin-svg-dynamic-title
## [5.0.1](https://github.com/gregberge/svgr/tree/master/packages/babel-plugin-svg-dynamic-title/compare/v5.0.0...v5.0.1) (2019-12-29)
### Bug Fixes
- fix engines in package.json ([a45d6fc](https://github.com/gregberge/svgr/tree/master/packages/babel-plugin-svg-dynamic-title/commit/a45d6fc8b43402bec60ed4e9273f90fdc65a23a7))
## [4.3.3](https://github.com/gregberge/svgr/tree/master/packages/babel-plugin-svg-dynamic-title/compare/v4.3.2...v4.3.3) (2019-09-24)
### Bug Fixes
- **babel-plugin-svg-dynamic-title:** dont render empty title ([#341](https://github.com/gregberge/svgr/tree/master/packages/babel-plugin-svg-dynamic-title/issues/341)) ([88b24c5](https://github.com/gregberge/svgr/tree/master/packages/babel-plugin-svg-dynamic-title/commit/88b24c5)), closes [#333](https://github.com/gregberge/svgr/tree/master/packages/babel-plugin-svg-dynamic-title/issues/333)
## [4.3.1](https://github.com/gregberge/svgr/tree/master/packages/babel-plugin-svg-dynamic-title/compare/v4.3.0...v4.3.1) (2019-07-01)
### Bug Fixes
- **titleProp:** handle the existing title case by using element instead of value (children) ([#315](https://github.com/gregberge/svgr/tree/master/packages/babel-plugin-svg-dynamic-title/issues/315)) ([065e7a9](https://github.com/gregberge/svgr/tree/master/packages/babel-plugin-svg-dynamic-title/commit/065e7a9))
# [4.3.0](https://github.com/gregberge/svgr/tree/master/packages/babel-plugin-svg-dynamic-title/compare/v4.2.0...v4.3.0) (2019-05-28)
### Features
- titleProps fallbacks to svg's title ([#311](https://github.com/gregberge/svgr/tree/master/packages/babel-plugin-svg-dynamic-title/issues/311)) ([8f92366](https://github.com/gregberge/svgr/tree/master/packages/babel-plugin-svg-dynamic-title/commit/8f92366))
# [4.2.0](https://github.com/gregberge/svgr/tree/master/packages/babel-plugin-svg-dynamic-title/compare/v4.1.0...v4.2.0) (2019-04-11)
**Note:** Version bump only for package @svgr/babel-plugin-svg-dynamic-title
# [4.0.0](https://github.com/gregberge/svgr/compare/v3.1.0...v4.0.0) (2018-11-04)
### Features
- **v4:** new architecture ([ac8b8ca](https://github.com/gregberge/svgr/commit/ac8b8ca))
### BREAKING CHANGES
- **v4:** - `template` option must now returns a Babel AST
* `@svgr/core` does not include svgo & prettier by default
================================================
FILE: packages/babel-plugin-svg-dynamic-title/README.md
================================================
# @svgr/babel-plugin-svg-dynamic-title
## Install
```
npm install --save-dev @svgr/babel-plugin-svg-dynamic-title
```
## Usage
**.babelrc**
```json
{
"plugins": ["@svgr/babel-plugin-svg-dynamic-title"]
}
```
## Note
This plugin handles both the titleProp and descProp options. By default, it will handle titleProp only.
## License
MIT
================================================
FILE: packages/babel-plugin-svg-dynamic-title/package.json
================================================
{
"name": "@svgr/babel-plugin-svg-dynamic-title",
"description": "Transform SVG by adding a dynamic title element",
"version": "8.0.0",
"main": "./dist/index.js",
"types": "./dist/index.d.ts",
"exports": {
".": {
"types": "./dist/index.d.ts",
"default": "./dist/index.js"
},
"./package.json": "./package.json"
},
"repository": "https://github.com/gregberge/svgr/tree/main/packages/babel-plugin-svg-dynamic-title",
"author": "Greg Bergé <berge.greg@gmail.com>",
"publishConfig": {
"access": "public"
},
"keywords": [
"babel-plugin"
],
"engines": {
"node": ">=14"
},
"homepage": "https://react-svgr.com",
"funding": {
"type": "github",
"url": "https://github.com/sponsors/gregberge"
},
"license": "MIT",
"peerDependencies": {
"@babel/core": "^7.0.0-0"
},
"scripts": {
"reset": "rm -rf dist",
"build": "rollup -c ../../build/rollup.config.mjs",
"prepublishOnly": "pnpm run reset && pnpm run build"
}
}
================================================
FILE: packages/babel-plugin-svg-dynamic-title/src/index.test.ts
================================================
import { transform } from '@babel/core'
import plugin, { Options } from '.'
const testPlugin = (code: string, options: Options = { tag: 'title' }) => {
const result = transform(code, {
plugins: ['@babel/plugin-syntax-jsx', [plugin, options]],
configFile: false,
})
return result?.code
}
describe('title plugin', () => {
it('should add title attribute if not present', () => {
expect(testPlugin('<svg></svg>')).toMatchInlineSnapshot(
`"<svg>{title ? <title id={titleId}>{title}</title> : null}</svg>;"`,
)
})
it('should add title element and fallback to existing title', () => {
// testing when the existing title contains a simple string
expect(testPlugin(`<svg><title>Hello</title></svg>`)).toMatchInlineSnapshot(
`"<svg>{title === undefined ? <title id={titleId}>Hello</title> : title ? <title id={titleId}>{title}</title> : null}</svg>;"`,
)
// testing when the existing title contains an JSXExpression
expect(
testPlugin(`<svg><title>{"Hello"}</title></svg>`),
).toMatchInlineSnapshot(
`"<svg>{title === undefined ? <title id={titleId}>{"Hello"}</title> : title ? <title id={titleId}>{title}</title> : null}</svg>;"`,
)
})
it('should preserve any existing title attributes', () => {
// testing when the existing title contains a simple string
expect(
testPlugin(`<svg><title id='a'>Hello</title></svg>`),
).toMatchInlineSnapshot(
`"<svg>{title === undefined ? <title id={titleId || 'a'}>Hello</title> : title ? <title id={titleId || 'a'}>{title}</title> : null}</svg>;"`,
)
})
it('should support empty title', () => {
expect(testPlugin('<svg><title></title></svg>')).toMatchInlineSnapshot(
`"<svg>{title ? <title id={titleId}>{title}</title> : null}</svg>;"`,
)
})
it('should support self closing title', () => {
expect(testPlugin('<svg><title /></svg>')).toMatchInlineSnapshot(
`"<svg>{title ? <title id={titleId}>{title}</title> : null}</svg>;"`,
)
})
it('should work if an attribute is already present', () => {
expect(testPlugin('<svg><foo /></svg>')).toMatchInlineSnapshot(
`"<svg>{title ? <title id={titleId}>{title}</title> : null}<foo /></svg>;"`,
)
})
})
describe('desc plugin', () => {
it('should add desc attribute if not present', () => {
expect(testPlugin('<svg></svg>', { tag: 'desc' })).toMatchInlineSnapshot(
`"<svg>{desc ? <desc id={descId}>{desc}</desc> : null}</svg>;"`,
)
})
it('should add desc element and fallback to existing desc', () => {
// testing when the existing desc contains a simple string
expect(
testPlugin(`<svg><desc>Hello</desc></svg>`, { tag: 'desc' }),
).toMatchInlineSnapshot(
`"<svg>{desc === undefined ? <desc id={descId}>Hello</desc> : desc ? <desc id={descId}>{desc}</desc> : null}</svg>;"`,
)
// testing when the existing desc contains an JSXExpression
expect(
testPlugin(`<svg><desc>{"Hello"}</desc></svg>`, { tag: 'desc' }),
).toMatchInlineSnapshot(
`"<svg>{desc === undefined ? <desc id={descId}>{"Hello"}</desc> : desc ? <desc id={descId}>{desc}</desc> : null}</svg>;"`,
)
})
it('should preserve any existing desc attributes', () => {
// testing when the existing desc contains a simple string
expect(
testPlugin(`<svg><desc id='a'>Hello</desc></svg>`, { tag: 'desc' }),
).toMatchInlineSnapshot(
`"<svg>{desc === undefined ? <desc id={descId || 'a'}>Hello</desc> : desc ? <desc id={descId || 'a'}>{desc}</desc> : null}</svg>;"`,
)
})
it('should support empty desc', () => {
expect(
testPlugin('<svg><desc></desc></svg>', { tag: 'desc' }),
).toMatchInlineSnapshot(
`"<svg>{desc ? <desc id={descId}>{desc}</desc> : null}</svg>;"`,
)
})
it('should support self closing desc', () => {
expect(
testPlugin('<svg><desc /></svg>', { tag: 'desc' }),
).toMatchInlineSnapshot(
`"<svg>{desc ? <desc id={descId}>{desc}</desc> : null}</svg>;"`,
)
})
it('should work if an attribute is already present', () => {
expect(
testPlugin('<svg><foo /></svg>', { tag: 'desc' }),
).toMatchInlineSnapshot(
`"<svg>{desc ? <desc id={descId}>{desc}</desc> : null}<foo /></svg>;"`,
)
})
})
================================================
FILE: packages/babel-plugin-svg-dynamic-title/src/index.ts
================================================
/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
import { NodePath, types as t } from '@babel/core'
const elements = ['svg', 'Svg']
type tag = 'title' | 'desc'
export interface Options {
tag: tag | null
}
interface State {
opts: Options
}
const createTagElement = (
tag: tag,
children: t.JSXExpressionContainer[] = [],
attributes: (t.JSXAttribute | t.JSXSpreadAttribute)[] = [],
) => {
const eleName = t.jsxIdentifier(tag)
return t.jsxElement(
t.jsxOpeningElement(eleName, attributes),
t.jsxClosingElement(eleName),
children,
)
}
const createTagIdAttribute = (tag: tag) =>
t.jsxAttribute(
t.jsxIdentifier('id'),
t.jsxExpressionContainer(t.identifier(`${tag}Id`)),
)
const addTagIdAttribute = (
tag: tag,
attributes: (t.JSXAttribute | t.JSXSpreadAttribute)[],
) => {
const existingId = attributes.find(
(attribute) => t.isJSXAttribute(attribute) && attribute.name.name === 'id',
) as t.JSXAttribute | undefined
if (!existingId) {
return [...attributes, createTagIdAttribute(tag)]
}
existingId.value = t.jsxExpressionContainer(
t.isStringLiteral(existingId.value)
? t.logicalExpression('||', t.identifier(`${tag}Id`), existingId.value)
: t.identifier(`${tag}Id`),
)
return attributes
}
const plugin = () => ({
visitor: {
JSXElement(path: NodePath<t.JSXElement>, state: State) {
const tag = state.opts.tag || 'title'
if (!elements.length) return
const openingElement = path.get('openingElement')
const openingElementName = openingElement.get('name')
if (
!elements.some((element) =>
openingElementName.isJSXIdentifier({ name: element }),
)
) {
return
}
const getTagElement = (
existingTitle?: t.JSXElement,
): t.JSXExpressionContainer => {
const tagExpression = t.identifier(tag)
if (existingTitle) {
existingTitle.openingElement.attributes = addTagIdAttribute(
tag,
existingTitle.openingElement.attributes,
)
}
const conditionalTitle = t.conditionalExpression(
tagExpression,
createTagElement(
tag,
[t.jsxExpressionContainer(tagExpression)],
existingTitle
? existingTitle.openingElement.attributes
: [createTagIdAttribute(tag)],
),
t.nullLiteral(),
)
if (existingTitle?.children?.length) {
// If title already exists render as follows
// `{title === undefined ? fallbackTitleElement : titleElement}`
return t.jsxExpressionContainer(
t.conditionalExpression(
t.binaryExpression(
'===',
tagExpression,
t.identifier('undefined'),
),
existingTitle,
conditionalTitle,
),
)
}
return t.jsxExpressionContainer(conditionalTitle)
}
// store the title element
let tagElement: t.JSXExpressionContainer | null = null
const hasTitle = path.get('children').some((childPath) => {
if (childPath.node === tagElement) return false
if (!childPath.isJSXElement()) return false
const name = childPath.get('openingElement').get('name')
if (!name.isJSXIdentifier()) return false
if (name.node.name !== tag) return false
tagElement = getTagElement(childPath.node)
childPath.replaceWith(tagElement)
return true
})
// create a title element if not already create
tagElement = tagElement || getTagElement()
if (!hasTitle) {
// path.unshiftContainer is not working well :(
// path.unshiftContainer('children', titleElement)
path.node.children.unshift(tagElement)
path.replaceWith(path.node)
}
},
},
})
export default plugin
================================================
FILE: packages/babel-plugin-svg-dynamic-title/tsconfig.json
================================================
{
"extends": "../../tsconfig",
"include": ["src"]
}
================================================
FILE: packages/babel-plugin-svg-em-dimensions/.npmignore
================================================
src/
.*
/*
/dist/*
!/dist/index.{d.ts,js}
!/dist/index.js.map
================================================
FILE: packages/babel-plugin-svg-em-dimensions/CHANGELOG.md
================================================
# Change Log
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
# [8.0.0](https://github.com/gregberge/svgr/compare/v7.0.0...v8.0.0) (2023-05-09)
**Note:** Version bump only for package @svgr/babel-plugin-svg-em-dimensions
# [7.0.0](https://github.com/gregberge/svgr/compare/v6.5.1...v7.0.0) (2023-03-24)
**Note:** Version bump only for package @svgr/babel-plugin-svg-em-dimensions
## [6.5.1](https://github.com/gregberge/svgr/compare/v6.5.0...v6.5.1) (2022-10-27)
**Note:** Version bump only for package @svgr/babel-plugin-svg-em-dimensions
# [6.5.0](https://github.com/gregberge/svgr/compare/v6.4.0...v6.5.0) (2022-10-14)
**Note:** Version bump only for package @svgr/babel-plugin-svg-em-dimensions
## [6.3.1](https://github.com/gregberge/svgr/compare/v6.3.0...v6.3.1) (2022-07-22)
### Bug Fixes
- fix exports compat with ESM ([#749](https://github.com/gregberge/svgr/issues/749)) ([f3e304c](https://github.com/gregberge/svgr/commit/f3e304c166282f042ecd4d6c396a0798a7f0b490))
# [6.3.0](https://github.com/gregberge/svgr/compare/v6.2.1...v6.3.0) (2022-07-18)
### Bug Fixes
- **package.json:** fix exports ([#745](https://github.com/gregberge/svgr/issues/745)) ([2a368d1](https://github.com/gregberge/svgr/commit/2a368d1305949ec6426c7c7312c04224071ec2bd))
# [5.4.0](https://github.com/gregberge/svgr/tree/master/packages/babel-plugin-svg-em-dimensions/compare/v5.3.1...v5.4.0) (2020-04-27)
**Note:** Version bump only for package @svgr/babel-plugin-svg-em-dimensions
## [5.0.1](https://github.com/gregberge/svgr/tree/master/packages/babel-plugin-svg-em-dimensions/compare/v5.0.0...v5.0.1) (2019-12-29)
### Bug Fixes
- fix engines in package.json ([a45d6fc](https://github.com/gregberge/svgr/tree/master/packages/babel-plugin-svg-em-dimensions/commit/a45d6fc8b43402bec60ed4e9273f90fdc65a23a7))
# [4.2.0](https://github.com/gregberge/svgr/tree/master/packages/babel-plugin-svg-em-dimensions/compare/v4.1.0...v4.2.0) (2019-04-11)
**Note:** Version bump only for package @svgr/babel-plugin-svg-em-dimensions
# [4.0.0](https://github.com/gregberge/svgr/compare/v3.1.0...v4.0.0) (2018-11-04)
### Features
- **v4:** new architecture ([ac8b8ca](https://github.com/gregberge/svgr/commit/ac8b8ca))
### BREAKING CHANGES
- **v4:** - `template` option must now returns a Babel AST
* `@svgr/core` does not include svgo & prettier by default
================================================
FILE: packages/babel-plugin-svg-em-dimensions/README.md
================================================
# @svgr/babel-plugin-svg-em-dimensions
## Install
```
npm install --save-dev @svgr/babel-plugin-svg-em-dimensions
```
## Usage
**.babelrc**
```json
{
"plugins": [
["@svgr/babel-plugin-svg-em-dimensions", { "width": 24, "height": 24 }]
]
}
```
## License
MIT
================================================
FILE: packages/babel-plugin-svg-em-dimensions/package.json
================================================
{
"name": "@svgr/babel-plugin-svg-em-dimensions",
"description": "Transform SVG to use em-based dimensions",
"version": "8.0.0",
"main": "./dist/index.js",
"types": "./dist/index.d.ts",
"exports": {
".": {
"types": "./dist/index.d.ts",
"default": "./dist/index.js"
},
"./package.json": "./package.json"
},
"repository": "https://github.com/gregberge/svgr/tree/main/packages/babel-plugin-svg-em-dimensions",
"author": "Greg Bergé <berge.greg@gmail.com>",
"publishConfig": {
"access": "public"
},
"keywords": [
"babel-plugin"
],
"engines": {
"node": ">=14"
},
"homepage": "https://react-svgr.com",
"funding": {
"type": "github",
"url": "https://github.com/sponsors/gregberge"
},
"license": "MIT",
"peerDependencies": {
"@babel/core": "^7.0.0-0"
},
"scripts": {
"reset": "rm -rf dist",
"build": "rollup -c ../../build/rollup.config.mjs",
"prepublishOnly": "pnpm run reset && pnpm run build"
}
}
================================================
FILE: packages/babel-plugin-svg-em-dimensions/src/index.test.ts
================================================
import { transform } from '@babel/core'
import plugin, { Options } from '.'
const testPlugin = (code: string, options?: Options) => {
const result = transform(code, {
plugins: ['@babel/plugin-syntax-jsx', [plugin, options]],
configFile: false,
})
return result?.code
}
describe('plugin', () => {
it('replaces width / height attributes', () => {
expect(
testPlugin('<svg foo="bar" width="100" height="200" />'),
).toMatchInlineSnapshot(`"<svg foo="bar" width="1em" height="1em" />;"`)
})
it('adds theme if they are not present', () => {
expect(testPlugin('<svg foo="bar" />')).toMatchInlineSnapshot(
`"<svg foo="bar" width="1em" height="1em" />;"`,
)
})
it('accepts numeric values', () => {
expect(
testPlugin('<svg foo="bar" />', { width: 24, height: 24 }),
).toMatchInlineSnapshot(`"<svg foo="bar" width={24} height={24} />;"`)
})
it('accepts string values', () => {
expect(
testPlugin('<svg foo="bar" />', { width: '2em', height: '2em' }),
).toMatchInlineSnapshot(`"<svg foo="bar" width="2em" height="2em" />;"`)
})
})
================================================
FILE: packages/babel-plugin-svg-em-dimensions/src/index.ts
================================================
/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
import { types as t, NodePath, ConfigAPI } from '@babel/core'
const elements = ['svg', 'Svg']
export interface Options {
width: number | string
height: number | string
}
const getValue = (raw: undefined | number | string) => {
if (raw === undefined) return t.stringLiteral('1em')
switch (typeof raw) {
case 'number':
return t.jsxExpressionContainer(t.numericLiteral(raw))
case 'string':
return t.stringLiteral(raw)
default:
return t.stringLiteral('1em')
}
}
const plugin = (_: ConfigAPI, opts: Options) => ({
visitor: {
JSXOpeningElement(path: NodePath<t.JSXOpeningElement>) {
if (
!elements.some((element) =>
path.get('name').isJSXIdentifier({ name: element }),
)
)
return
const values = {
width: getValue(opts.width),
height: getValue(opts.height),
}
const requiredAttributes = Object.keys(values)
path.get('attributes').forEach((attributePath) => {
if (!attributePath.isJSXAttribute()) return
const namePath = attributePath.get('name')
if (!namePath.isJSXIdentifier()) return
const index = requiredAttributes.indexOf(namePath.node.name)
if (index === -1) return
const valuePath = attributePath.get('value')
valuePath.replaceWith(values[namePath.node.name as 'width' | 'height'])
requiredAttributes.splice(index, 1)
})
path.pushContainer(
'attributes',
requiredAttributes.map((attr) =>
t.jsxAttribute(
t.jsxIdentifier(attr),
values[attr as 'width' | 'height'],
),
),
)
},
},
})
export default plugin
================================================
FILE: packages/babel-plugin-svg-em-dimensions/tsconfig.json
================================================
{
"extends": "../../tsconfig",
"include": ["src"]
}
================================================
FILE: packages/babel-plugin-transform-react-native-svg/.npmignore
================================================
src/
.*
/*
/dist/*
!/dist/index.{d.ts,js}
!/dist/index.js.map
================================================
FILE: packages/babel-plugin-transform-react-native-svg/CHANGELOG.md
================================================
# Change Log
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
# [8.1.0](https://github.com/gregberge/svgr/compare/v8.0.1...v8.1.0) (2023-08-15)
### Bug Fixes
* **react-native:** fix duplicate import ([#894](https://github.com/gregberge/svgr/issues/894)) ([e612b6a](https://github.com/gregberge/svgr/commit/e612b6a1a4e822178f1e15b82bd2991bf1e84cec))
# [8.0.0](https://github.com/gregberge/svgr/compare/v7.0.0...v8.0.0) (2023-05-09)
**Note:** Version bump only for package @svgr/babel-plugin-transform-react-native-svg
# [7.0.0](https://github.com/gregberge/svgr/compare/v6.5.1...v7.0.0) (2023-03-24)
**Note:** Version bump only for package @svgr/babel-plugin-transform-react-native-svg
## [6.5.1](https://github.com/gregberge/svgr/compare/v6.5.0...v6.5.1) (2022-10-27)
**Note:** Version bump only for package @svgr/babel-plugin-transform-react-native-svg
# [6.5.0](https://github.com/gregberge/svgr/compare/v6.4.0...v6.5.0) (2022-10-14)
**Note:** Version bump only for package @svgr/babel-plugin-transform-react-native-svg
## [6.3.1](https://github.com/gregberge/svgr/compare/v6.3.0...v6.3.1) (2022-07-22)
### Bug Fixes
- fix exports compat with ESM ([#749](https://github.com/gregberge/svgr/issues/749)) ([f3e304c](https://github.com/gregberge/svgr/commit/f3e304c166282f042ecd4d6c396a0798a7f0b490))
# [6.3.0](https://github.com/gregberge/svgr/compare/v6.2.1...v6.3.0) (2022-07-18)
### Bug Fixes
- **package.json:** fix exports ([#745](https://github.com/gregberge/svgr/issues/745)) ([2a368d1](https://github.com/gregberge/svgr/commit/2a368d1305949ec6426c7c7312c04224071ec2bd))
# [5.4.0](https://github.com/gregberge/svgr/tree/master/packages/babel-plugin-transform-react-native-svg/compare/v5.3.1...v5.4.0) (2020-04-27)
### Features
- add `ForeignObject` support for react native ([#430](https://github.com/gregberge/svgr/tree/master/packages/babel-plugin-transform-react-native-svg/issues/430)) ([1b56b85](https://github.com/gregberge/svgr/tree/master/packages/babel-plugin-transform-react-native-svg/commit/1b56b851478803d40105ce63c70e457bd3183da6))
## [5.0.1](https://github.com/gregberge/svgr/tree/master/packages/babel-plugin-transform-react-native-svg/compare/v5.0.0...v5.0.1) (2019-12-29)
### Bug Fixes
- fix engines in package.json ([a45d6fc](https://github.com/gregberge/svgr/tree/master/packages/babel-plugin-transform-react-native-svg/commit/a45d6fc8b43402bec60ed4e9273f90fdc65a23a7))
# [4.2.0](https://github.com/gregberge/svgr/tree/master/packages/babel-plugin-transform-react-native-svg/compare/v4.1.0...v4.2.0) (2019-04-11)
### Features
- add expo option ([#289](https://github.com/gregberge/svgr/tree/master/packages/babel-plugin-transform-react-native-svg/issues/289)) ([978db3e](https://github.com/gregberge/svgr/tree/master/packages/babel-plugin-transform-react-native-svg/commit/978db3e))
# [4.0.0](https://github.com/gregberge/svgr/compare/v3.1.0...v4.0.0) (2018-11-04)
### Features
- **v4:** new architecture ([ac8b8ca](https://github.com/gregberge/svgr/commit/ac8b8ca))
### BREAKING CHANGES
- **v4:** - `template` option must now returns a Babel AST
* `@svgr/core` does not include svgo & prettier by default
================================================
FILE: packages/babel-plugin-transform-react-native-svg/README.md
================================================
# @svgr/babel-plugin-transform-react-native-svg
## Install
```
npm install --save-dev @svgr/babel-plugin-transform-react-native-svg
```
## Usage
**.babelrc**
```json
{
"plugins": ["@svgr/babel-plugin-transform-react-native-svg"]
}
```
## License
MIT
================================================
FILE: packages/babel-plugin-transform-react-native-svg/package.json
================================================
{
"name": "@svgr/babel-plugin-transform-react-native-svg",
"description": "Transform DOM elements into react-native-svg components",
"version": "8.1.0",
"main": "./dist/index.js",
"types": "./dist/index.d.ts",
"exports": {
".": {
"types": "./dist/index.d.ts",
"default": "./dist/index.js"
},
"./package.json": "./package.json"
},
"repository": "https://github.com/gregberge/svgr/tree/main/packages/babel-plugin-transform-react-native-svg",
"author": "Greg Bergé <berge.greg@gmail.com>",
"publishConfig": {
"access": "public"
},
"keywords": [
"babel-plugin"
],
"engines": {
"node": ">=14"
},
"homepage": "https://react-svgr.com",
"funding": {
"type": "github",
"url": "https://github.com/sponsors/gregberge"
},
"license": "MIT",
"peerDependencies": {
"@babel/core": "^7.0.0-0"
},
"scripts": {
"reset": "rm -rf dist",
"build": "rollup -c ../../build/rollup.config.mjs",
"prepublishOnly": "pnpm run reset && pnpm run build"
}
}
================================================
FILE: packages/babel-plugin-transform-react-native-svg/src/index.test.ts
================================================
import { transform } from '@babel/core'
import plugin from '.'
const testPlugin = (code: string) => {
const result = transform(code, {
plugins: ['@babel/plugin-syntax-jsx', plugin],
configFile: false,
})
return result?.code
}
describe('plugin', () => {
it('should transform elements', () => {
const code = testPlugin('<svg><div /></svg>')
expect(code).toMatchInlineSnapshot(`"<Svg></Svg>;"`)
})
it('should add import', () => {
const code = testPlugin(
`import Svg from 'react-native-svg'; <svg><g /><div /></svg>;`,
)
expect(code).toMatchInlineSnapshot(`
"import Svg, { G } from 'react-native-svg';
/* SVGR has dropped some elements not supported by react-native-svg: div */
<Svg><G /></Svg>;"
`)
})
it('should add deal with type imports properly', () => {
const code = transform(
`
import Svg from 'react-native-svg';
import type { SvgProps } from "react-native-svg";
const ComponentSvg = () => <svg><g /></svg>;
`,
{
plugins: [
'@babel/plugin-syntax-jsx',
['@babel/plugin-syntax-typescript', { isTSX: true }],
plugin,
],
configFile: false,
},
)?.code
expect(code).toMatchInlineSnapshot(`
"import Svg, { G } from 'react-native-svg';
import type { SvgProps } from "react-native-svg";
const ComponentSvg = () => <Svg><G /></Svg>;"
`)
})
})
================================================
FILE: packages/babel-plugin-transform-react-native-svg/src/index.ts
================================================
/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
import { NodePath, types as t } from '@babel/core'
interface State {
replacedComponents: Set<string>
unsupportedComponents: Set<string>
}
const elementToComponent: { [key: string]: string } = {
svg: 'Svg',
circle: 'Circle',
clipPath: 'ClipPath',
ellipse: 'Ellipse',
g: 'G',
linearGradient: 'LinearGradient',
radialGradient: 'RadialGradient',
line: 'Line',
path: 'Path',
pattern: 'Pattern',
polygon: 'Polygon',
polyline: 'Polyline',
rect: 'Rect',
symbol: 'Symbol',
text: 'Text',
textPath: 'TextPath',
tspan: 'TSpan',
use: 'Use',
defs: 'Defs',
stop: 'Stop',
mask: 'Mask',
image: 'Image',
foreignObject: 'ForeignObject',
}
const plugin = () => {
function replaceElement(path: NodePath<t.JSXElement>, state: State) {
const namePath = path.get('openingElement').get('name')
if (!namePath.isJSXIdentifier()) return
const { name } = namePath.node
// Replace element by react-native-svg components
const component = elementToComponent[name]
if (component) {
namePath.replaceWith(t.jsxIdentifier(component))
if (path.has('closingElement')) {
const closingNamePath = path
.get('closingElement')
.get('name') as NodePath<t.JSXIdentifier>
closingNamePath.replaceWith(t.jsxIdentifier(component))
}
state.replacedComponents.add(component)
return
}
// Remove element if not supported
state.unsupportedComponents.add(name)
path.remove()
}
const svgElementVisitor = {
JSXElement(path: NodePath<t.JSXElement>, state: State) {
if (
!path.get('openingElement').get('name').isJSXIdentifier({ name: 'svg' })
) {
return
}
replaceElement(path, state)
path.traverse(jsxElementVisitor, state)
},
}
const jsxElementVisitor = {
JSXElement(path: NodePath<t.JSXElement>, state: State) {
replaceElement(path, state)
},
}
const importDeclarationVisitor = {
ImportDeclaration(path: NodePath<t.ImportDeclaration>, state: State) {
const isNotTypeImport =
!path.get('importKind').hasNode() ||
path.node.importKind == null ||
path.node.importKind === 'value'
if (
path.get('source').isStringLiteral({ value: 'react-native-svg' }) &&
isNotTypeImport
) {
state.replacedComponents.forEach((component) => {
if (
path
.get('specifiers')
.some((specifier) =>
specifier.get('local').isIdentifier({ name: component }),
)
) {
return
}
path.pushContainer(
'specifiers',
t.importSpecifier(t.identifier(component), t.identifier(component)),
)
})
} else if (path.get('source').isStringLiteral({ value: 'expo' })) {
path.pushContainer(
'specifiers',
t.importSpecifier(t.identifier('Svg'), t.identifier('Svg')),
)
} else {
return
}
if (state.unsupportedComponents.size && !path.has('trailingComments')) {
const componentList = [...state.unsupportedComponents].join(', ')
path.addComment(
'trailing',
` SVGR has dropped some elements not supported by react-native-svg: ${componentList} `,
)
}
},
}
return {
visitor: {
Program(path: NodePath<t.Program>, state: Partial<State>) {
state.replacedComponents = new Set()
state.unsupportedComponents = new Set()
path.traverse(svgElementVisitor, state as State)
path.traverse(importDeclarationVisitor, state as State)
},
},
}
}
export default plugin
================================================
FILE: packages/babel-plugin-transform-react-native-svg/tsconfig.json
================================================
{
"extends": "../../tsconfig",
"include": ["src"]
}
================================================
FILE: packages/babel-plugin-transform-svg-component/.npmignore
================================================
/*
/dist/*
!/dist/index.{d.ts,js}
!/dist/index.js.map
================================================
FILE: packages/babel-plugin-transform-svg-component/CHANGELOG.md
================================================
# Change Log
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
# [8.0.0](https://github.com/gregberge/svgr/compare/v7.0.0...v8.0.0) (2023-05-09)
### Features
* **types:** change `SVGProps` from import to import type ([#853](https://github.com/gregberge/svgr/issues/853)) ([095f021](https://github.com/gregberge/svgr/commit/095f0216288ccb5b96a75f154fe3aead074bfa99))
# [7.0.0](https://github.com/gregberge/svgr/compare/v6.5.1...v7.0.0) (2023-03-24)
### Features
* allow specifying `jsxRuntimeImport` in config ([86bb86f](https://github.com/gregberge/svgr/commit/86bb86f47748618f729742e56199355d9c0bc518)), closes [#801](https://github.com/gregberge/svgr/issues/801) [#801](https://github.com/gregberge/svgr/issues/801)
## [6.5.1](https://github.com/gregberge/svgr/compare/v6.5.0...v6.5.1) (2022-10-27)
**Note:** Version bump only for package @svgr/babel-plugin-transform-svg-component
# [6.5.0](https://github.com/gregberge/svgr/compare/v6.4.0...v6.5.0) (2022-10-14)
**Note:** Version bump only for package @svgr/babel-plugin-transform-svg-component
## [6.3.1](https://github.com/gregberge/svgr/compare/v6.3.0...v6.3.1) (2022-07-22)
### Bug Fixes
- fix exports compat with ESM ([#749](https://github.com/gregberge/svgr/issues/749)) ([f3e304c](https://github.com/gregberge/svgr/commit/f3e304c166282f042ecd4d6c396a0798a7f0b490))
# [6.3.0](https://github.com/gregberge/svgr/compare/v6.2.1...v6.3.0) (2022-07-18)
### Bug Fixes
- **package.json:** fix exports ([#745](https://github.com/gregberge/svgr/issues/745)) ([2a368d1](https://github.com/gregberge/svgr/commit/2a368d1305949ec6426c7c7312c04224071ec2bd))
### Features
- add descProp option ([#729](https://github.com/gregberge/svgr/issues/729)) ([a0637d4](https://github.com/gregberge/svgr/commit/a0637d49b60243bbae461f7b96dab9b47cd82d8f))
# [6.2.0](https://github.com/gregberge/svgr/compare/v6.1.2...v6.2.0) (2022-01-10)
### Features
- support comments in templates ([#661](https://github.com/gregberge/svgr/issues/661)) ([9afb590](https://github.com/gregberge/svgr/commit/9afb590d1094793fca797449fb7017da9fa06b4e))
# [6.1.0](https://github.com/gregberge/svgr/compare/v6.0.0...v6.1.0) (2021-12-01)
### Bug Fixes
- fix previous export system ([1872829](https://github.com/gregberge/svgr/commit/187282977af841cd5a2243a23abba72b20eec2fa)), closes [#635](https://github.com/gregberge/svgr/issues/635)
# [5.5.0](https://github.com/gregberge/svgr/tree/master/packages/babel-plugin-transform-svg-component/compare/v5.4.0...v5.5.0) (2020-11-15)
### Bug Fixes
- **typescript:** fix react-native support [#465](https://github.com/gregberge/svgr/tree/master/packages/babel-plugin-transform-svg-component/issues/465) ([#488](https://github.com/gregberge/svgr/tree/master/packages/babel-plugin-transform-svg-component/issues/488)) ([d61e0cf](https://github.com/gregberge/svgr/tree/master/packages/babel-plugin-transform-svg-component/commit/d61e0cface065afc1478fdb44d87ca8177041eab))
### Features
- allow custom name for named export ([#493](https://github.com/gregberge/svgr/tree/master/packages/babel-plugin-transform-svg-component/issues/493)) ([16a58d6](https://github.com/gregberge/svgr/tree/master/packages/babel-plugin-transform-svg-component/commit/16a58d6e817c065f72a68be91600a1a360205f44))
# [5.4.0](https://github.com/gregberge/svgr/tree/master/packages/babel-plugin-transform-svg-component/compare/v5.3.1...v5.4.0) (2020-04-27)
### Bug Fixes
- wrap svg component directly with memo/forwardRef ([#440](https://github.com/gregberge/svgr/tree/master/packages/babel-plugin-transform-svg-component/issues/440)) ([#441](https://github.com/gregberge/svgr/tree/master/packages/babel-plugin-transform-svg-component/issues/441)) ([a6de2da](https://github.com/gregberge/svgr/tree/master/packages/babel-plugin-transform-svg-component/commit/a6de2dacb63e36572a2167b928418bdc39f3a9c2))
## [5.3.1](https://github.com/gregberge/svgr/tree/master/packages/babel-plugin-transform-svg-component/compare/v5.3.0...v5.3.1) (2020-04-05)
### Bug Fixes
- fix typescript types (ref, title) ([#419](https://github.com/gregberge/svgr/tree/master/packages/babel-plugin-transform-svg-component/issues/419)) ([6e7e6b2](https://github.com/gregberge/svgr/tree/master/packages/babel-plugin-transform-svg-component/commit/6e7e6b2e73d26d30f64604e0fc627f9ff94079c2))
# [5.3.0](https://github.com/gregberge/svgr/tree/master/packages/babel-plugin-transform-svg-component/compare/v5.2.0...v5.3.0) (2020-03-22)
### Features
- add typescript option ([4596d7b](https://github.com/gregberge/svgr/tree/master/packages/babel-plugin-transform-svg-component/commit/4596d7bb470babb5ec4b87f5281174fb182bd9c7)), closes [#373](https://github.com/gregberge/svgr/tree/master/packages/babel-plugin-transform-svg-component/issues/373)
# [5.2.0](https://github.com/gregberge/svgr/tree/master/packages/babel-plugin-transform-svg-component/compare/v5.1.0...v5.2.0) (2020-02-23)
**Note:** Version bump only for package @svgr/babel-plugin-transform-svg-component
## [5.0.1](https://github.com/gregberge/svgr/tree/master/packages/babel-plugin-transform-svg-component/compare/v5.0.0...v5.0.1) (2019-12-29)
### Bug Fixes
- fix engines in package.json ([a45d6fc](https://github.com/gregberge/svgr/tree/master/packages/babel-plugin-transform-svg-component/commit/a45d6fc8b43402bec60ed4e9273f90fdc65a23a7))
# [4.2.0](https://github.com/gregberge/svgr/tree/master/packages/babel-plugin-transform-svg-component/compare/v4.1.0...v4.2.0) (2019-04-11)
### Features
- add expo option ([#289](https://github.com/gregberge/svgr/tree/master/packages/babel-plugin-transform-svg-component/issues/289)) ([978db3e](https://github.com/gregberge/svgr/tree/master/packages/babel-plugin-transform-svg-component/commit/978db3e))
# [4.1.0](https://github.com/gregberge/svgr/compare/v4.0.4...v4.1.0) (2018-11-24)
**Note:** Version bump only for package @svgr/babel-plugin-transform-svg-component
## [4.0.1](https://github.com/gregberge/svgr/compare/v4.0.0...v4.0.1) (2018-11-08)
### Bug Fixes
- **babel-plugin-transform-svg:** support template that only return a single node ([80ac40f](https://github.com/gregberge/svgr/commit/80ac40f)), closes [#223](https://github.com/gregberge/svgr/issues/223)
- **babel-plugin-transform-svg-component:** parsing error of JSX template exports defs ([#225](https://github.com/gregberge/svgr/issues/225)) ([1e56309](https://github.com/gregberge/svgr/commit/1e56309)), closes [/github.com/gregberge/svgr/blob/master/packages/babel-plugin-transform-svg-component/src/util.js#L61](https://github.com//github.com/gregberge/svgr/blob/master/packages/babel-plugin-transform-svg-component/src/util.js/issues/L61)
# [4.0.0](https://github.com/gregberge/svgr/compare/v3.1.0...v4.0.0) (2018-11-04)
### Features
- **v4:** new architecture ([ac8b8ca](https://github.com/gregberge/svgr/commit/ac8b8ca))
### BREAKING CHANGES
- **v4:** - `template` option must now returns a Babel AST
* `@svgr/core` does not include svgo & prettier by default
================================================
FILE: packages/babel-plugin-transform-svg-component/README.md
================================================
# @svgr/babel-plugin-transform-svg-component
## Install
```
npm install --save-dev @svgr/babel-plugin-transform-svg-component
```
## Usage
**.babelrc**
```json
{
"plugins": [
["@svgr/babel-plugin-transform-svg-component", { "titleProp": true }]
]
}
```
## License
MIT
================================================
FILE: packages/babel-plugin-transform-svg-component/package.json
================================================
{
"name": "@svgr/babel-plugin-transform-svg-component",
"description": "Transform SVG into component",
"version": "8.0.0",
"main": "./dist/index.js",
"types": "./dist/index.d.ts",
"exports": {
".": {
"types": "./dist/index.d.ts",
"default": "./dist/index.js"
},
"./package.json": "./package.json"
},
"repository": "https://github.com/gregberge/svgr/tree/main/packages/babel-plugin-transform-svg-component",
"author": "Greg Bergé <berge.greg@gmail.com>",
"publishConfig": {
"access": "public"
},
"keywords": [
"babel-plugin"
],
"engines": {
"node": ">=12"
},
"homepage": "https://react-svgr.com",
"funding": {
"type": "github",
"url": "https://github.com/sponsors/gregberge"
},
"license": "MIT",
"peerDependencies": {
"@babel/core": "^7.0.0-0"
},
"scripts": {
"reset": "rm -rf dist",
"build": "rollup -c ../../build/rollup.config.mjs",
"prepublishOnly": "pnpm run reset && pnpm run build"
},
"devDependencies": {
"@types/babel__template": "^7.4.1"
}
}
================================================
FILE: packages/babel-plugin-transform-svg-component/src/__snapshots__/index.test.ts.snap
================================================
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`plugin javascript #jsxRuntime allows to specify a custom "classic" jsxRuntime using "defaultSpecifier" 1`] = `
"import h from "hyperapp-jsx-pragma";
const SvgComponent = () => <svg><g /></svg>;
export default SvgComponent;"
`;
exports[`plugin javascript #jsxRuntime allows to specify a custom "classic" jsxRuntime using "namespace" 1`] = `
"import * as Preact from "preact";
const SvgComponent = () => <svg><g /></svg>;
export default SvgComponent;"
`;
exports[`plugin javascript #jsxRuntime allows to specify a custom "classic" jsxRuntime using "specifiers" 1`] = `
"import { h } from "preact";
const SvgComponent = () => <svg><g /></svg>;
export default SvgComponent;"
`;
exports[`plugin javascript #jsxRuntime supports "automatic" jsxRuntime 1`] = `
"const SvgComponent = () => <svg><g /></svg>;
export default SvgComponent;"
`;
exports[`plugin javascript #jsxRuntime supports "classic" jsxRuntime 1`] = `
"import * as React from "react";
const SvgComponent = () => <svg><g /></svg>;
export default SvgComponent;"
`;
exports[`plugin javascript allows to specify a different import source 1`] = `
"import { h } from "preact";
import { forwardRef, memo } from "preact/compat";
const SvgComponent = (_, ref) => <svg><g /></svg>;
const ForwardRef = forwardRef(SvgComponent);
const Memo = memo(ForwardRef);
export default Memo;"
`;
exports[`plugin javascript custom templates support basic template 1`] = `
"import * as React from 'react';
const MyComponent = () => <svg><g /></svg>;
export default MyComponent;"
`;
exports[`plugin javascript custom templates supports JSX template 1`] = `
"import * as React from 'react';
const MyComponent = () => <main>{<svg><g /></svg>}</main>;
export default MyComponent;"
`;
exports[`plugin javascript custom templates supports TypeScript template 1`] = `
"import * as React from 'react';
const MyComponent = (props: React.SVGProps<SVGSVGElement>) => <svg><g /></svg>;
export default MyComponent;"
`;
exports[`plugin javascript custom templates supports comments in templates 1`] = `
"/**
* Comment
*/
const MyComponent = () => <svg><g /></svg>;
export default MyComponent;"
`;
exports[`plugin javascript custom templates supports template that does not return an array 1`] = `"<svg><g /></svg>;"`;
exports[`plugin javascript custom templates supports type annotation on component 1`] = `
"import * as React from "react";
interface Props {
x?: string;
}
export const SvgComponent:React.FC<Props> = ({
x
}) => {
return <svg><g /></svg>;
};
export default SvgComponent;"
`;
exports[`plugin javascript transforms whole program 1`] = `
"import * as React from "react";
const SvgComponent = () => <svg><g /></svg>;
export default SvgComponent;"
`;
exports[`plugin javascript with "descProp" adds "desc" and "descId" prop 1`] = `
"import * as React from "react";
const SvgComponent = ({
desc,
descId
}) => <svg><g /></svg>;
export default SvgComponent;"
`;
exports[`plugin javascript with "descProp" and "expandProps" adds "desc", "descId" props and expands props 1`] = `
"import * as React from "react";
const SvgComponent = ({
desc,
descId,
...props
}) => <svg><g /></svg>;
export default SvgComponent;"
`;
exports[`plugin javascript with "expandProps" add props 1`] = `
"import * as React from "react";
const SvgComponent = props => <svg><g /></svg>;
export default SvgComponent;"
`;
exports[`plugin javascript with "memo" option wrap component in "React.memo" 1`] = `
"import * as React from "react";
import { memo } from "react";
const SvgComponent = () => <svg><g /></svg>;
const Memo = memo(SvgComponent);
export default Memo;"
`;
exports[`plugin javascript with "namedExport" and "exportType" option and without "previousExport" state exports via named export 1`] = `
"import * as React from "react";
const SvgComponent = () => <svg><g /></svg>;
export { SvgComponent as ReactComponent };"
`;
exports[`plugin javascript with "namedExport" option and "previousExport" state has custom named export 1`] = `
"import * as React from "react";
const SvgComponent = () => <svg><g /></svg>;
export { SvgComponent as Component };
var img = new Image();
img.src = '...';
export default img;"
`;
exports[`plugin javascript with "native" and "expandProps" option adds import from "react-native-svg" and adds props 1`] = `
"import * as React from "react";
import Svg from "react-native-svg";
const SvgComponent = props => <Svg><g /></Svg>;
export default SvgComponent;"
`;
exports[`plugin javascript with "native" option adds import from "react-native-svg" 1`] = `
"import * as React from "react";
import Svg from "react-native-svg";
const SvgComponent = () => <Svg><g /></Svg>;
export default SvgComponent;"
`;
exports[`plugin javascript with "native", "ref" and "expandProps" option adds import from "react-native-svg" and adds props and adds ForwardRef component 1`] = `
"import * as React from "react";
import Svg from "react-native-svg";
import { forwardRef } from "react";
const SvgComponent = (props, ref) => <Svg><g /></Svg>;
const ForwardRef = forwardRef(SvgComponent);
export default ForwardRef;"
`;
exports[`plugin javascript with "native", "ref" option adds import from "react-native-svg" and adds ForwardRef component 1`] = `
"import * as React from "react";
import Svg from "react-native-svg";
import { forwardRef } from "react";
const SvgComponent = (_, ref) => <Svg><g /></Svg>;
const ForwardRef = forwardRef(SvgComponent);
export default ForwardRef;"
`;
exports[`plugin javascript with "ref" and "expandProps" option expands props 1`] = `
"import * as React from "react";
import { forwardRef } from "react";
const SvgComponent = (props, ref) => <svg><g /></svg>;
const ForwardRef = forwardRef(SvgComponent);
export default ForwardRef;"
`;
exports[`plugin javascript with "ref" option adds ForwardRef component 1`] = `
"import * as React from "react";
import { forwardRef } from "react";
const SvgComponent = (_, ref) => <svg><g /></svg>;
const ForwardRef = forwardRef(SvgComponent);
export default ForwardRef;"
`;
exports[`plugin javascript with "titleProp" "descProp" and "expandProps" adds "title", "titleId", "desc", "descId" props and expands props 1`] = `
"import * as React from "react";
const SvgComponent = ({
title,
titleId,
desc,
descId,
...props
}) => <svg><g /></svg>;
export default SvgComponent;"
`;
exports[`plugin javascript with "titleProp" adds "title" and "titleId" prop 1`] = `
"import * as React from "react";
const SvgComponent = ({
title,
titleId
}) => <svg><g /></svg>;
export default SvgComponent;"
`;
exports[`plugin javascript with "titleProp" and "descProp" adds "title", "titleId", "desc", and "descId prop 1`] = `
"import * as React from "react";
const SvgComponent = ({
title,
titleId,
desc,
descId
}) => <svg><g /></svg>;
export default SvgComponent;"
`;
exports[`plugin javascript with "titleProp" and "expandProps" adds "title", "titleId" props and expands props 1`] = `
"import * as React from "react";
const SvgComponent = ({
title,
titleId,
...props
}) => <svg><g /></svg>;
export default SvgComponent;"
`;
exports[`plugin javascript with both "memo" and "ref" option wrap component in "React.memo" and "React.forwardRef" 1`] = `
"import * as React from "react";
import { forwardRef, memo } from "react";
const SvgComponent = (_, ref) => <svg><g /></svg>;
const ForwardRef = forwardRef(SvgComponent);
const Memo = memo(ForwardRef);
export default Memo;"
`;
exports[`plugin typescript #jsxRuntime allows to specify a custom "classic" jsxRuntime using "defaultSpecifier" 1`] = `
"import h from "hyperapp-jsx-pragma";
const SvgComponent = () => <svg><g /></svg>;
export default SvgComponent;"
`;
exports[`plugin typescript #jsxRuntime allows to specify a custom "classic" jsxRuntime using "namespace" 1`] = `
"import * as Preact from "preact";
const SvgComponent = () => <svg><g /></svg>;
export default SvgComponent;"
`;
exports[`plugin typescript #jsxRuntime allows to specify a custom "classic" jsxRuntime using "specifiers" 1`] = `
"import { h } from "preact";
const SvgComponent = () => <svg><g /></svg>;
export default SvgComponent;"
`;
exports[`plugin typescript #jsxRuntime supports "automatic" jsxRuntime 1`] = `
"const SvgComponent = () => <svg><g /></svg>;
export default SvgComponent;"
`;
exports[`plugin typescript #jsxRuntime supports "classic" jsxRuntime 1`] = `
"import * as React from "react";
const SvgComponent = () => <svg><g /></svg>;
export default SvgComponent;"
`;
exports[`plugin typescript allows to specify a different import source 1`] = `
"import { h } from "preact";
import { Ref, forwardRef, memo } from "preact/compat";
const SvgComponent = (_, ref: Ref<SVGSVGElement>) => <svg><g /></svg>;
const ForwardRef = forwardRef(SvgComponent);
const Memo = memo(ForwardRef);
export default Memo;"
`;
exports[`plugin typescript custom templates support basic template 1`] = `
"import * as React from 'react';
const MyComponent = () => <svg><g /></svg>;
export default MyComponent;"
`;
exports[`plugin typescript custom templates supports JSX template 1`] = `
"import * as React from 'react';
const MyComponent = () => <main>{<svg><g /></svg>}</main>;
export default MyComponent;"
`;
exports[`plugin typescript custom templates supports TypeScript template 1`] = `
"import * as React from 'react';
const MyComponent = (props: React.SVGProps<SVGSVGElement>) => <svg><g /></svg>;
export default MyComponent;"
`;
exports[`plugin typescript custom templates supports comments in templates 1`] = `
"/**
* Comment
*/
const MyComponent = () => <svg><g /></svg>;
export default MyComponent;"
`;
exports[`plugin typescript custom templates supports template that does not return an array 1`] = `"<svg><g /></svg>;"`;
exports[`plugin typescript custom templates supports type annotation on component 1`] = `
"import * as React from "react";
interface Props {
x?: string;
}
export const SvgComponent:React.FC<Props> = ({
x
}) => {
return <svg><g /></svg>;
};
export default SvgComponent;"
`;
exports[`plugin typescript transforms whole program 1`] = `
"import * as React from "react";
const SvgComponent = () => <svg><g /></svg>;
export default SvgComponent;"
`;
exports[`plugin typescript with "descProp" adds "desc" and "descId" prop 1`] = `
"import * as React from "react";
interface SVGRProps {
desc?: string;
descId?: string;
}
const SvgComponent = ({
desc,
descId
}: SVGRProps) => <svg><g /></svg>;
export default SvgComponent;"
`;
exports[`plugin typescript with "descProp" and "expandProps" adds "desc", "descId" props and expands props 1`] = `
"import * as React from "react";
import type { SVGProps } from "react";
interface SVGRProps {
desc?: string;
descId?: string;
}
const SvgComponent = ({
desc,
descId,
...props
}: SVGProps<SVGSVGElement> & SVGRProps) => <svg><g /></svg>;
export default SvgComponent;"
`;
exports[`plugin typescript with "expandProps" add props 1`] = `
"import * as React from "react";
import type { SVGProps } from "react";
const SvgComponent = (props: SVGProps<SVGSVGElement>) => <svg><g /></svg>;
export default SvgComponent;"
`;
exports[`plugin typescript with "memo" option wrap component in "React.memo" 1`] = `
"import * as React from "react";
import { memo } from "react";
const SvgComponent = () => <svg><g /></svg>;
const Memo = memo(SvgComponent);
export default Memo;"
`;
exports[`plugin typescript with "namedExport" and "exportType" option and without "previousExport" state exports via named export 1`] = `
"import * as React from "react";
const SvgComponent = () => <svg><g /></svg>;
export { SvgComponent as ReactComponent };"
`;
exports[`plugin typescript with "namedExport" option and "previousExport" state has custom named export 1`] = `
"import * as React from "react";
const SvgComponent = () => <svg><g /></svg>;
export { SvgComponent as Component };
var img = new Image();
img.src = '...';
export default img;"
`;
exports[`plugin typescript with "native" and "expandProps" option adds import from "react-native-svg" and adds props 1`] = `
"import * as React from "react";
import Svg from "react-native-svg";
import type { SvgProps } from "react-native-svg";
const SvgComponent = (props: SvgProps) => <Svg><g /></Svg>;
export default SvgComponent;"
`;
exports[`plugin typescript with "native" option adds import from "react-native-svg" 1`] = `
"import * as React from "react";
import Svg from "react-native-svg";
const SvgComponent = () => <Svg><g /></Svg>;
export default SvgComponent;"
`;
exports[`plugin typescript with "native", "ref" and "expandProps" option adds import from "react-native-svg" and adds props and adds ForwardRef component 1`] = `
"import * as React from "react";
import Svg from "react-native-svg";
import type { SvgProps } from "react-native-svg";
import { Ref, forwardRef } from "react";
const SvgComponent = (props: SvgProps, ref: Ref<SVGSVGElement>) => <Svg><g /></Svg>;
const ForwardRef = forwardRef(SvgComponent);
export default ForwardRef;"
`;
exports[`plugin typescript with "native", "ref" option adds import from "react-native-svg" and adds ForwardRef component 1`] = `
"import * as React from "react";
import Svg from "react-native-svg";
import { Ref, forwardRef } from "react";
const SvgComponent = (_, ref: Ref<SVGSVGElement>) => <Svg><g /></Svg>;
const ForwardRef = forwardRef(SvgComponent);
export default ForwardRef;"
`;
exports[`plugin typescript with "ref" and "expandProps" option expands props 1`] = `
"import * as React from "react";
import type { SVGProps } from "react";
import { Ref, forwardRef } from "react";
const SvgComponent = (props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => <svg><g /></svg>;
const ForwardRef = forwardRef(SvgComponent);
export default ForwardRef;"
`;
exports[`plugin typescript with "ref" option adds ForwardRef component 1`] = `
"import * as React from "react";
import { Ref, forwardRef } from "react";
const SvgComponent = (_, ref: Ref<SVGSVGElement>) => <svg><g /></svg>;
const ForwardRef = forwardRef(SvgComponent);
export default ForwardRef;"
`;
exports[`plugin typescript with "titleProp" "descProp" and "expandProps" adds "title", "titleId", "desc", "descId" props and expands props 1`] = `
"import * as React from "react";
import type { SVGProps } from "react";
interface SVGRProps {
title?: string;
titleId?: string;
desc?: string;
descId?: string;
}
const SvgComponent = ({
title,
titleId,
desc,
descId,
...props
}: SVGProps<SVGSVGElement> & SVGRProps) => <svg><g /></svg>;
export default SvgComponent;"
`;
exports[`plugin typescript with "titleProp" adds "title" and "titleId" prop 1`] = `
"import * as React from "react";
interface SVGRProps {
title?: string;
titleId?: string;
}
const SvgComponent = ({
title,
titleId
}: SVGRProps) => <svg><g /></svg>;
export default SvgComponent;"
`;
exports[`plugin typescript with "titleProp" and "descProp" adds "title", "titleId", "desc", and "descId prop 1`] = `
"import * as React from "react";
interface SVGRProps {
title?: string;
titleId?: string;
desc?: string;
descId?: string;
}
const SvgComponent = ({
title,
titleId,
desc,
descId
}: SVGRProps) => <svg><g /></svg>;
export default SvgComponent;"
`;
exports[`plugin typescript with "titleProp" and "expandProps" adds "title", "titleId" props and expands props 1`] = `
"import * as React from "react";
import type { SVGProps } from "react";
interface SVGRProps {
title?: string;
titleId?: string;
}
const SvgComponent = ({
title,
titleId,
...props
}: SVGProps<SVGSVGElement> & SVGRProps) => <svg><g /></svg>;
export default SvgComponent;"
`;
exports[`plugin typescript with both "memo" and "ref" option wrap component in "React.memo" and "React.forwardRef" 1`] = `
"import * as React from "react";
import { Ref, forwardRef, memo } from "react";
const SvgComponent = (_, ref: Ref<SVGSVGElement>) => <svg><g /></svg>;
const ForwardRef = forwardRef(SvgComponent);
const Memo = memo(ForwardRef);
export default Memo;"
`;
================================================
FILE: packages/babel-plugin-transform-svg-component/src/defaultTemplate.ts
================================================
import type { Template } from './types'
export const defaultTemplate: Template = (variables, { tpl }) => {
return tpl`
${variables.imports};
${variables.interfaces};
const ${variables.componentName} = (${variables.props}) => (
${variables.jsx}
);
${variables.exports};
`
}
================================================
FILE: packages/babel-plugin-transform-svg-component/src/index.test.ts
================================================
import { transform } from '@babel/core'
import plugin, { Options } from '.'
const defaultOptions = {
namedExport: 'ReactComponent',
state: { componentName: 'SvgComponent' },
}
const testPlugin =
(language: string) =>
(code: string, options: Partial<Options> = {}) => {
const result = transform(code, {
plugins: [
'@babel/plugin-syntax-jsx',
[
plugin,
{
typescript: language === 'typescript',
...defaultOptions,
...options,
},
],
],
configFile: false,
})
if (!result) {
throw new Error(`No result`)
}
return result
}
describe('plugin', () => {
describe.each(['javascript', 'typescript'])('%s', (language) => {
it('transforms whole program', () => {
const { code } = testPlugin(language)('<svg><g /></svg>')
expect(code).toMatchSnapshot()
})
describe('with "native" option', () => {
it('adds import from "react-native-svg"', () => {
const { code } = testPlugin(language)('<Svg><g /></Svg>', {
native: true,
})
expect(code).toMatchSnapshot()
})
})
describe('with "ref" option', () => {
it('adds ForwardRef component', () => {
const { code } = testPlugin(language)('<svg><g /></svg>', {
ref: true,
})
expect(code).toMatchSnapshot()
})
})
describe('with "titleProp"', () => {
it('adds "title" and "titleId" prop', () => {
const { code } = testPlugin(language)('<svg><g /></svg>', {
titleProp: true,
})
expect(code).toMatchSnapshot()
})
})
describe('with "titleProp" and "expandProps"', () => {
it('adds "title", "titleId" props and expands props', () => {
const { code } = testPlugin(language)('<svg><g /></svg>', {
...defaultOptions,
expandProps: true,
titleProp: true,
})
expect(code).toMatchSnapshot()
})
})
describe('with "descProp"', () => {
it('adds "desc" and "descId" prop', () => {
const { code } = testPlugin(language)('<svg><g /></svg>', {
descProp: true,
})
expect(code).toMatchSnapshot()
})
})
describe('with "descProp" and "expandProps"', () => {
it('adds "desc", "descId" props and expands props', () => {
const { code } = testPlugin(language)('<svg><g /></svg>', {
...defaultOptions,
expandProps: true,
descProp: true,
})
expect(code).toMatchSnapshot()
})
})
describe('with "titleProp" and "descProp"', () => {
it('adds "title", "titleId", "desc", and "descId prop', () => {
const { code } = testPlugin(language)('<svg><g /></svg>', {
titleProp: true,
descProp: true,
})
expect(code).toMatchSnapshot()
})
})
describe('with "titleProp" "descProp" and "expandProps"', () => {
it('adds "title", "titleId", "desc", "descId" props and expands props', () => {
const { code } = testPlugin(language)('<svg><g /></svg>', {
...defaultOptions,
expandProps: true,
titleProp: true,
descProp: true,
})
expect(code).toMatchSnapshot()
})
})
describe('with "expandProps"', () => {
it('add props', () => {
const { code } = testPlugin(language)('<svg><g /></svg>', {
...defaultOptions,
state: { componentName: 'SvgComponent' },
expandProps: true,
})
expect(code).toMatchSnapshot()
})
})
describe('with "ref" and "expandProps" option', () => {
it('expands props', () => {
const { code } = testPlugin(language)('<svg><g /></svg>', {
state: { componentName: 'SvgComponent' },
expandProps: true,
ref: true,
})
expect(code).toMatchSnapshot()
})
})
describe('with "native", "ref" option', () => {
it('adds import from "react-native-svg" and adds ForwardRef component', () => {
const { code } = testPlugin(language)('<Svg><g /></Svg>', {
state: { componentName: 'SvgComponent' },
native: true,
ref: true,
})
expect(code).toMatchSnapshot()
})
})
describe('with "native" and "expandProps" option', () => {
it('adds import from "react-native-svg" and adds props', () => {
const { code } = testPlugin(language)('<Svg><g /></Svg>', {
state: { componentName: 'SvgComponent' },
native: true,
expandProps: true,
})
expect(code).toMatchSnapshot()
})
})
describe('with "native", "ref" and "expandProps" option', () => {
it('adds import from "react-native-svg" and adds props and adds ForwardRef component', () => {
const { code } = testPlugin(language)('<Svg><g /></Svg>', {
state: { componentName: 'SvgComponent' },
native: true,
expandProps: true,
ref: true,
})
expect(code).toMatchSnapshot()
})
})
describe('with "memo" option', () => {
it('wrap component in "React.memo"', () => {
const { code } = testPlugin(language)('<svg><g /></svg>', {
state: { componentName: 'SvgComponent' },
memo: true,
})
expect(code).toMatchSnapshot()
})
})
describe('with both "memo" and "ref" option', () => {
it('wrap component in "React.memo" and "React.forwardRef"', () => {
const { code } = testPlugin(language)('<svg><g /></svg>', {
state: { componentName: 'SvgComponent' },
memo: true,
ref: true,
})
expect(code).toMatchSnapshot()
})
})
describe('with "namedExport" option and "previousExport" state', () => {
it('has custom named export', () => {
const { code } = testPlugin(language)('<svg><g /></svg>', {
state: {
componentName: 'SvgComponent',
caller: {
previousExport: `var img = new Image(); img.src = '...'; export default img;`,
},
},
namedExport: 'Component',
})
expect(code).toMatchSnapshot()
})
})
describe('with "namedExport" and "exportType" option and without "previousExport" state', () => {
it('exports via named export', () => {
const { code } = testPlugin(language)('<svg><g /></svg>', {
state: {
componentName: 'SvgComponent',
caller: { previousExport: null },
},
namedExport: 'ReactComponent',
exportType: 'named',
})
expect(code).toMatchSnapshot()
})
})
describe('custom templates', () => {
it('support basic template', () => {
const { code } = testPlugin(language)('<svg><g /></svg>', {
template: ({ jsx }, { tpl }) => tpl`import * as React from 'react';
const MyComponent = () => ${jsx}
export default MyComponent
`,
state: { componentName: 'SvgComponent' },
})
expect(code).toMatchSnapshot()
})
it('supports JSX template', () => {
const { code } = testPlugin(language)('<svg><g /></svg>', {
template: ({ jsx }, { tpl }) => {
return tpl`import * as React from 'react';
const MyComponent = () => <main>{${jsx}}</main>
export default MyComponent
`
},
state: { componentName: 'SvgComponent' },
})
expect(code).toMatchSnapshot()
})
it('supports TypeScript template', () => {
const { code } = testPlugin(language)('<svg><g /></svg>', {
template: ({ jsx }, { tpl }) => {
return tpl`
import * as React from 'react';
const MyComponent = (props: React.SVGProps<SVGSVGElement>) => ${jsx};
export default MyComponent;
`
},
typescript: true,
state: { componentName: 'SvgComponent' },
})
expect(code).toMatchSnapshot()
})
it('supports template that does not return an array', () => {
const { code } = testPlugin(language)('<svg><g /></svg>', {
template: ({ jsx }, { tpl }) => tpl`${jsx}`,
state: { componentName: 'SvgComponent' },
})
expect(code).toMatchSnapshot()
})
it('supports type annotation on component', () => {
const { code } = testPlugin(language)('<svg><g /></svg>', {
typescript: true,
template: (
{ jsx, imports, interfaces, componentName, exports },
{ tpl },
) => tpl`
${imports}
${interfaces}
interface Props { x?: string }
export const ${`${componentName}:React.FC<Props>`} = ({ x }) => {
return (${jsx});
}
${exports}`,
state: { componentName: 'SvgComponent' },
})
expect(code).toMatchSnapshot()
})
it('supports comments in templates', () => {
const { code } = testPlugin(language)('<svg><g /></svg>', {
template: ({ jsx }, { tpl }) => tpl`
/**
* Comment
*/
const MyComponent = () => ${jsx}
export default MyComponent;
`,
state: { componentName: 'SvgComponent' },
})
expect(code).toMatchSnapshot()
})
})
describe('#jsxRuntime', () => {
it('supports "automatic" jsxRuntime', () => {
const { code } = testPlugin(language)('<svg><g /></svg>', {
jsxRuntime: 'automatic',
})
expect(code).toMatchSnapshot()
})
it('supports "classic" jsxRuntime', () => {
const { code } = testPlugin(language)('<svg><g /></svg>', {
jsxRuntime: 'classic',
})
expect(code).toMatchSnapshot()
})
it('allows to specify a custom "classic" jsxRuntime using "specifiers"', () => {
const { code } = testPlugin(language)('<svg><g /></svg>', {
jsxRuntime: 'classic',
jsxRuntimeImport: { specifiers: ['h'], source: 'preact' },
})
expect(code).toMatchSnapshot()
})
it('allows to specify a custom "classic" jsxRuntime using "namespace"', () => {
const { code } = testPlugin(language)('<svg><g /></svg>', {
jsxRuntime: 'classic',
jsxRuntimeImport: { namespace: 'Preact', source: 'preact' },
})
expect(code).toMatchSnapshot()
})
it('allows to specify a custom "classic" jsxRuntime using "defaultSpecifier"', () => {
const { code } = testPlugin(language)('<svg><g /></svg>', {
jsxRuntime: 'classic',
jsxRuntimeImport: {
defaultSpecifier: 'h',
source: 'hyperapp-jsx-pragma',
},
})
expect(code).toMatchSnapshot()
})
it('throws with invalid configuration', () => {
expect(() => {
testPlugin(language)('<svg><g /></svg>', {
jsxRuntime: 'classic',
jsxRuntimeImport: { source: 'preact' },
})
}).toThrow(
'Specify "namespace", "defaultSpecifier", or "specifiers" in "jsxRuntimeImport" option',
)
})
})
it('allows to specify a different import source', () => {
const { code } = testPlugin(language)('<svg><g /></svg>', {
memo: true,
ref: true,
importSource: 'preact/compat',
jsxRuntimeImport: { specifiers: ['h'], source: 'preact' },
})
expect(code).toMatchSnapshot()
})
})
})
================================================
FILE: packages/babel-plugin-transform-svg-component/src/index.ts
================================================
/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
import {
ConfigAPI,
NodePath,
types as t,
template as babelTemplate,
ParserOptions,
} from '@babel/core'
import type { Options } from './types'
import { defaultTemplate } from './defaultTemplate'
import { getVariables } from './variables'
export type { Options, Template } from './types'
const plugin = (_: ConfigAPI, opts: Options) => {
const template = opts.template || defaultTemplate
const plugins: ParserOptions['plugins'] = opts.typescript
? ['jsx', 'typescript']
: ['jsx']
const tpl = babelTemplate.smart({ plugins, preserveComments: true }).ast
return {
visitor: {
Program(path: NodePath<t.Program>) {
const jsx = (path.node.body[0] as t.ExpressionStatement)
.expression as t.JSXElement
const variables = getVariables({
opts,
jsx,
})
const body = template(variables, { options: opts, tpl })
path.node.body = Array.isArray(body) ? body : [body]
path.replaceWith(path.node)
},
},
}
}
export default plugin
================================================
FILE: packages/babel-plugin-transform-svg-component/src/types.ts
================================================
import type { types as t } from '@babel/core'
import type { TemplateBuilder } from '@babel/template'
export interface TemplateVariables {
componentName: string
interfaces: t.TSInterfaceDeclaration[]
props: (t.ObjectPattern | t.Identifier)[]
imports: t.ImportDeclaration[]
exports: (t.VariableDeclaration | t.ExportDeclaration | t.Statement)[]
jsx: t.JSXElement
}
interface TemplateContext {
options: Options
tpl: TemplateBuilder<t.Statement | t.Statement[]>['ast']
}
export interface Template {
(variables: TemplateVariables, context: TemplateContext):
| t.Statement
| t.Statement[]
}
interface State {
componentName: string
caller?: { previousExport?: string | null }
}
export interface JSXRuntimeImport {
source: string
namespace?: string
defaultSpecifier?: string
specifiers?: string[]
}
export interface Options {
typescript?: boolean
titleProp?: boolean
descProp?: boolean
expandProps?: boolean | 'start' | 'end'
ref?: boolean
template?: Template
state: State
native?: boolean
memo?: boolean
exportType?: 'named' | 'default'
namedExport?: string
jsxRuntime?: 'automatic' | 'classic'
jsxRuntimeImport?: JSXRuntimeImport
importSource?: string
}
================================================
FILE: packages/babel-plugin-transform-svg-component/src/variables.ts
================================================
import { types as t, template } from '@babel/core'
import type { Options, TemplateVariables, JSXRuntimeImport } from './types'
import type { ImportDeclaration } from '@babel/types'
const tsOptionalPropertySignature = (
...args: Parameters<typeof t.tsPropertySignature>
) => {
return {
...t.tsPropertySignature(...args),
optional: true,
} as t.TSPropertySignature
}
interface Context {
opts: Options
interfaces: t.TSInterfaceDeclaration[]
props: (t.Identifier | t.ObjectPattern)[]
imports: t.ImportDeclaration[]
importSource: string
}
const getOrCreateImport = (
{ imports }: Context,
sourceValue: string,
importKind: ImportDeclaration['importKind'] = undefined,
) => {
const existing = imports.find(
(imp) =>
imp.source.value === sourceValue &&
imp.importKind === importKind &&
!imp.specifiers.some(
(specifier) => specifier.type === 'ImportNamespaceSpecifier',
),
)
if (existing) return existing
const imp = t.importDeclaration([], t.stringLiteral(sourceValue))
if (importKind !== undefined) {
imp.importKind = importKind
}
imports.push(imp)
return imp
}
const tsTypeReferenceSVGProps = (ctx: Context) => {
if (ctx.opts.native) {
const identifier = t.identifier('SvgProps')
getOrCreateImport(ctx, 'react-native-svg', 'type').specifiers.push(
t.importSpecifier(identifier, identifier),
)
return t.tsTypeReference(identifier)
}
const identifier = t.identifier('SVGProps')
getOrCreateImport(ctx, ctx.importSource, 'type').specifiers.push(
t.importSpecifier(identifier, identifier),
)
return t.tsTypeReference(
identifier,
t.tsTypeParameterInstantiation([
t.tsTypeReference(t.identifier('SVGSVGElement')),
]),
)
}
const tsTypeReferenceSVGRef = (ctx: Context) => {
const identifier = t.identifier('Ref')
getOrCreateImport(ctx, ctx.importSource).specifiers.push(
t.importSpecifier(identifier, identifier),
)
return t.tsTypeReference(
identifier,
t.tsTypeParameterInstantiation([
t.tsTypeReference(t.identifier('SVGSVGElement')),
]),
)
}
const getJsxRuntimeImport = (cfg: JSXRuntimeImport) => {
const specifiers = (() => {
if (cfg.namespace)
return [t.importNamespaceSpecifier(t.identifier(cfg.namespace))]
if (cfg.defaultSpecifier) {
const identifier = t.identifier(cfg.defaultSpecifier)
return [t.importDefaultSpecifier(identifier)]
}
if (cfg.specifiers)
return cfg.specifiers.map((specifier) => {
const identifier = t.identifier(specifier)
return t.importSpecifier(identifier, identifier)
})
throw new Error(
`Specify "namespace", "defaultSpecifier", or "specifiers" in "jsxRuntimeImport" option`,
)
})()
return t.importDeclaration(specifiers, t.stringLiteral(cfg.source))
}
const defaultJsxRuntimeImport: JSXRuntimeImport = {
source: 'react',
namespace: 'React',
}
const defaultImportSource = 'react'
export const getVariables = ({
opts,
jsx,
}: {
opts: Options
jsx: t.JSXElement
}): TemplateVariables => {
const interfaces: t.TSInterfaceDeclaration[] = []
const props: (t.Identifier | t.ObjectPattern)[] = []
const imports: t.ImportDeclaration[] = []
const exports: (t.VariableDeclaration | t.ExportDeclaration | t.Statement)[] =
[]
const ctx = {
importSource: opts.importSource ?? defaultImportSource,
exportIdentifier: t.identifier(opts.state.componentName),
opts,
interfaces,
props,
imports,
exports,
}
if (opts.jsxRuntime !== 'automatic') {
imports.push(
getJsxRuntimeImport(opts.jsxRuntimeImport ?? defaultJsxRuntimeImport),
)
}
if (opts.native) {
getOrCreateImport(ctx, 'react-native-svg').specifiers.push(
t.importDefaultSpecifier(t.identifier('Svg')),
)
}
if (opts.titleProp || opts.descProp) {
const properties = []
const propertySignatures = []
const createProperty = (attr: string) => {
return t.objectProperty(
t.identifier(attr),
t.identifier(attr),
false,
true,
)
}
const createSignature = (attr: string) => {
return tsOptionalPropertySignature(
t.identifier(attr),
t.tsTypeAnnotation(t.tsStringKeyword()),
)
}
if (opts.titleProp) {
properties.push(createProperty('title'), createProperty('titleId'))
if (opts.typescript) {
propertySignatures.push(
createSignature('title'),
createSignature('titleId'),
)
}
}
if (opts.descProp) {
properties.push(createProperty('desc'), createProperty('descId'))
if (opts.typescript) {
propertySignatures.push(
createSignature('desc'),
createSignature('descId'),
)
}
}
const prop = t.objectPattern(properties)
props.push(prop)
if (opts.typescript) {
interfaces.push(
t.tsInterfaceDeclaration(
t.identifier('SVGRProps'),
null,
null,
t.tSInterfaceBody(propertySignatures),
),
)
prop.typeAnnotation = t.tsTypeAnnotation(
t.tsTypeReference(t.identifier('SVGRProps')),
)
}
}
if (opts.expandProps) {
const identifier = t.identifier('props')
if (t.isObjectPattern(props[0])) {
props[0].properties.push(t.restElement(identifier))
if (opts.typescript) {
props[0].typeAnnotation = t.tsTypeAnnotation(
t.tsIntersectionType([
tsTypeReferenceSVGProps(ctx),
(props[0].typeAnnotation as t.TSTypeAnnotation).typeAnnotation,
]),
)
}
} else {
props.push(identifier)
if (opts.typescript) {
identifier.typeAnnotation = t.tsTypeAnnotation(
tsTypeReferenceSVGProps(ctx),
)
}
}
}
if (opts.ref) {
if (props.length === 0) {
props.push(t.identifier('_'))
}
const prop = t.identifier('ref')
props.push(prop)
if (opts.typescript) {
prop.typeAnnotation = t.tsTypeAnnotation(tsTypeReferenceSVGRef(ctx))
}
const forwardRef = t.identifier('forwardRef')
const ForwardRef = t.identifier('ForwardRef')
getOrCreateImport(ctx, ctx.importSource).specifiers.push(
t.importSpecifier(forwardRef, forwardRef),
)
exports.push(
t.variableDeclaration('const', [
t.variableDeclarator(
ForwardRef,
t.callExpression(forwardRef, [ctx.exportIdentifier]),
),
]),
)
ctx.exportIdentifier = ForwardRef
}
if (opts.memo) {
const memo = t.identifier('memo')
const Memo = t.identifier('Memo')
getOrCreateImport(ctx, ctx.importSource).specifiers.push(
t.importSpecifier(memo, memo),
)
exports.push(
t.variableDeclaration('const', [
t.variableDeclarator(
Memo,
t.callExpression(memo, [ctx.exportIdentifier]),
),
]),
)
ctx.exportIdentifier = Memo
}
if (opts.state.caller?.previousExport || opts.exportType === 'named') {
if (!opts.namedExport) {
throw new Error(`"namedExport" not specified`)
}
exports.push(
t.exportNamedDeclaration(null, [
t.exportSpecifier(ctx.exportIdentifier, t.identifier(opts.namedExport)),
]),
)
if (opts.state.caller?.previousExport) {
const previousExportAst = template.ast(opts.state.caller.previousExport)
exports.push(
...(Array.isArray(previousExportAst)
? previousExportAst
: [previousExportAst]),
)
}
} else {
exports.push(t.exportDefaultDeclaration(ctx.exportIdentifier))
}
return {
componentName: opts.state.componentName,
props,
interfaces,
imports,
exports,
jsx,
}
}
================================================
FILE: packages/babel-plugin-transform-svg-component/tsconfig.json
================================================
{
"extends": "../../tsconfig",
"include": ["src"]
}
================================================
FILE: packages/babel-preset/.npmignore
================================================
/*
/dist/*
!/dist/index.{d.ts,js}
!/dist/index.js.map
================================================
FILE: packages/babel-preset/CHANGELOG.md
================================================
# Change Log
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
# [8.1.0](https://github.com/gregberge/svgr/compare/v8.0.1...v8.1.0) (2023-08-15)
**Note:** Version bump only for package @svgr/babel-preset
# [8.0.0](https://github.com/gregberge/svgr/compare/v7.0.0...v8.0.0) (2023-05-09)
**Note:** Version bump only for package @svgr/babel-preset
# [7.0.0](https://github.com/gregberge/svgr/compare/v6.5.1...v7.0.0) (2023-03-24)
**Note:** Version bump only for package @svgr/babel-preset
## [6.5.1](https://github.com/gregberge/svgr/compare/v6.5.0...v6.5.1) (2022-10-27)
### Reverts
- Revert "feat(a11y): add attribute role="img" to the svg element (#750)" ([1382232](https://github.com/gregberge/svgr/commit/138223284ad9aebc5bbf94ed3ae7174a66dbc7f5)), closes [#750](https://github.com/gregberge/svgr/issues/750)
# [6.5.0](https://github.com/gregberge/svgr/compare/v6.4.0...v6.5.0) (2022-10-14)
### Features
- **babel-preset:** fix 'role' attribute on svg element for react native ([#787](https://github.com/gregberge/svgr/issues/787)) ([35d85e0](https://github.com/gregberge/svgr/commit/35d85e069ebfef1b26ba181f443d9377a7bc003e))
# [6.4.0](https://github.com/gregberge/svgr/compare/v6.3.1...v6.4.0) (2022-10-01)
### Features
- **a11y:** add attribute role="img" to the svg element ([#750](https://github.com/gregberge/svgr/issues/750)) ([8b9edc4](https://github.com/gregberge/svgr/commit/8b9edc4e712f3adbd9f9c503dfc5e4d627f763cd))
## [6.3.1](https://github.com/gregberge/svgr/compare/v6.3.0...v6.3.1) (2022-07-22)
### Bug Fixes
- fix duplicate plugin/preset detected error ([#747](https://github.com/gregberge/svgr/issues/747)) ([3c6a54c](https://github.com/gregberge/svgr/commit/3c6a54c494bb8ff15f332ff2d44e9f6465a6c19a)), closes [#746](https://github.com/gregberge/svgr/issues/746)
- fix exports compat with ESM ([#749](https://github.com/gregberge/svgr/issues/749)) ([f3e304c](https://github.com/gregberge/svgr/commit/f3e304c166282f042ecd4d6c396a0798a7f0b490))
# [6.3.0](https://github.com/gregberge/svgr/compare/v6.2.1...v6.3.0) (2022-07-18)
### Bug Fixes
- **package.json:** fix exports ([#745](https://github.com/gregberge/svgr/issues/745)) ([2a368d1](https://github.com/gregberge/svgr/commit/2a368d1305949ec6426c7c7312c04224071ec2bd))
### Features
- add descProp option ([#729](https://github.com/gregberge/svgr/issues/729)) ([a0637d4](https://github.com/gregberge/svgr/commit/a0637d49b60243bbae461f7b96dab9b47cd82d8f))
# [6.2.0](https://github.com/gregberge/svgr/compare/v6.1.2...v6.2.0) (2022-01-10)
**Note:** Version bump only for package @svgr/babel-preset
# [6.1.0](https://github.com/gregberge/svgr/compare/v6.0.0...v6.1.0) (2021-12-01)
**Note:** Version bump only for package @svgr/babel-preset
# [5.5.0](https://github.com/gregberge/svgr/tree/master/packages/babel-preset/compare/v5.4.0...v5.5.0) (2020-11-15)
### Bug Fixes
- prevent removing the namespace by svgr ([[#475](https://github.com/gregberge/svgr/tree/master/packages/babel-preset/issues/475)](https://github.com/gregberge/svgr/issues/475) ([#498](https://github.com/gregberge/svgr/tree/master/packages/babel-preset/issues/498)) ([00e84ea](https://github.com/gregberge/svgr/tree/master/packages/babel-preset/commit/00e84ead96d89bcbd072b9585b4db1365e392d33))
# [5.4.0](https://github.com/gregberge/svgr/tree/master/packages/babel-preset/compare/v5.3.1...v5.4.0) (2020-04-27)
**Note:** Version bump only for package @svgr/babel-preset
## [5.3.1](https://github.com/gregberge/svgr/tree/master/packages/babel-preset/compare/v5.3.0...v5.3.1) (2020-04-05)
**Note:** Version bump only for package @svgr/babel-preset
# [5.3.0](https://github.com/gregberge/svgr/tree/master/packages/babel-preset/compare/v5.2.0...v5.3.0) (2020-03-22)
**Note:** Version bump only for package @svgr/babel-preset
# [5.2.0](https://github.com/gregberge/svgr/tree/master/packages/babel-preset/compare/v5.1.0...v5.2.0) (2020-02-23)
**Note:** Version bump only for package @svgr/babel-preset
## [5.0.1](https://github.com/gregberge/svgr/tree/master/packages/babel-preset/compare/v5.0.0...v5.0.1) (2019-12-29)
### Bug Fixes
- fix engines in package.json ([a45d6fc](https://github.com/gregberge/svgr/tree/master/packages/babel-preset/commit/a45d6fc8b43402bec60ed4e9273f90fdc65a23a7))
## [4.3.3](https://github.com/gregberge/svgr/tree/master/packages/babel-preset/compare/v4.3.2...v4.3.3) (2019-09-24)
### Bug Fixes
- **babel-plugin-svg-dynamic-title:** dont render empty title ([#341](https://github.com/gregberge/svgr/tree/master/packages/babel-preset/issues/341)) ([88b24c5](https://github.com/gregberge/svgr/tree/master/packages/babel-preset/commit/88b24c5)), closes [#333](https://github.com/gregberge/svgr/tree/master/packages/babel-preset/issues/333)
## [4.3.1](https://github.com/gregberge/svgr/tree/master/packages/babel-preset/compare/v4.3.0...v4.3.1) (2019-07-01)
### Bug Fixes
- **titleProp:** handle the existing title case by using element instead of value (children) ([#315](https://github.com/gregberge/svgr/tree/master/packages/babel-preset/issues/315)) ([065e7a9](https://github.com/gregberge/svgr/tree/master/packages/babel-preset/commit/065e7a9))
# [4.3.0](https://github.com/gregberge/svgr/tree/master/packages/babel-preset/compare/v4.2.0...v4.3.0) (2019-05-28)
### Features
- titleProps fallbacks to svg's title ([#311](https://github.com/gregberge/svgr/tree/master/packages/babel-preset/issues/311)) ([8f92366](https://github.com/gregberge/svgr/tree/master/packages/babel-preset/commit/8f92366))
# [4.2.0](https://github.com/gregberge/svgr/tree/master/packages/babel-preset/compare/v4.1.0...v4.2.0) (2019-04-11)
### Bug Fixes
- **babel-preset:** expandProps + icon option ([ddfae22](https://github.com/gregberge/svgr/tree/master/packages/babel-preset/commit/ddfae22)), closes [#277](https://github.com/gregberge/svgr/tree/master/packages/babel-preset/issues/277)
### Features
- add expo option ([#289](https://github.com/gregberge/svgr/tree/master/packages/babel-preset/issues/289)) ([978db3e](https://github.com/gregberge/svgr/tree/master/packages/babel-preset/commit/978db3e))
# [4.1.0](https://github.com/gregberge/svgr/compare/v4.0.4...v4.1.0) (2018-11-24)
**Note:** Version bump only for package @svgr/babel-preset
## [4.0.3](https://github.com/gregberge/svgr/compare/v4.0.2...v4.0.3) (2018-11-13)
**Note:** Version bump only for package @svgr/babel-preset
## [4.0.1](https://github.com/gregberge/svgr/compare/v4.0.0...v4.0.1) (2018-11-08)
**Note:** Version bump only for package @svgr/babel-preset
# [4.0.0](https://github.com/gregberge/svgr/compare/v3.1.0...v4.0.0) (2018-11-04)
### Features
- **v4:** new architecture ([ac8b8ca](https://github.com/gregberge/svgr/commit/ac8b8ca))
- allow dynamic properties in replaceAttrValues option ([15f55fe](https://github.com/gregberge/svgr/commit/15f55fe)), closes [#205](https://github.com/gregberge/svgr/issues/205)
### BREAKING CHANGES
- **v4:** - `template` option must now returns a Babel AST
* `@svgr/core` does not include svgo & prettier by default
================================================
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
================================================
FILE: packages/babel-preset/package.json
================================================
{
"name": "@svgr/babel-preset",
"description": "SVGR preset that apply transformations from config",
"version": "8.1.0",
"main": "./dist/index.js",
"types": "./dist/index.d.ts",
"exports": {
".": {
"types": "./dist/index.d.ts",
"default": "./dist/index.js"
},
"./package.json": "./package.json"
},
"repository": "https://github.com/gregberge/svgr/tree/main/packages/babel-preset",
"author": "Greg Bergé <berge.greg@gmail.com>",
"publishConfig": {
"access": "public"
},
"keywords": [
"babel-plugin",
"babel-preset"
],
"engines": {
"node": ">=14"
},
"homepage": "https://react-svgr.com",
"funding": {
"type": "github",
"url": "https://github.com/sponsors/gregberge"
},
"license": "MIT",
"dependencies": {
"@svgr/babel-plugin-add-jsx-attribute": "workspace:*",
"@svgr/babel-plugin-remove-jsx-attribute": "workspace:*",
"@svgr/babel-plugin-remove-jsx-empty-expression": "workspace:*",
"@svgr/babel-plugin-replace-jsx-attribute-value": "workspace:*",
"@svgr/babel-plugin-svg-dynamic-title": "workspace:*",
"@svgr/babel-plugin-svg-em-dimensions": "workspace:*",
"@svgr/babel-plugin-transform-react-native-svg": "workspace:*",
"@svgr/babel-plugin-transform-svg-component": "workspace:*"
},
"peerDependencies": {
"@babel/core": "^7.0.0-0"
},
"scripts": {
"reset": "rm -rf dist",
"build": "rollup -c ../../build/rollup.config.mjs",
"prepublishOnly": "pnpm run reset && pnpm run build"
}
}
================================================
FILE: packages/babel-preset/src/index.test.ts
================================================
import { transform } from '@babel/core'
import preset, { Options } from '.'
const defaultOptions = {
namedExport: 'ReactComponent',
state: { componentName: 'SvgComponent' },
}
const testPreset = (code: string, options: Partial<Options>) => {
const result = transform(code, {
plugins: ['@babel/plugin-syntax-jsx'],
presets: [[preset, { ...defaultOptions, ...options }]],
configFile: false,
})
return result?.code
}
describe('preset', () => {
it('handles svgProps', () => {
expect(
testPreset('<svg />', {
svgProps: {
foo: 'bar',
x: '{y}',
},
}),
).toMatchInlineSnapshot(`
"import * as React from "react";
const SvgComponent = () => <svg foo="bar" x={y} />;
export default SvgComponent;"
`)
})
it('handles titleProp', () => {
expect(
testPreset('<svg></svg>', {
titleProp: true,
}),
).toMatchInlineSnapshot(`
"import * as React from "react";
const SvgComponent = ({
title,
titleId
}) => <svg aria-labelledby={titleId}>{title ? <title id={titleId}>{title}</title> : null}</svg>;
export default SvgComponent;"
`)
})
it('handles titleProp and fallback on existing title', () => {
// testing when existing title has string as chilren
expect(
testPreset(`<svg><title>Hello</title></svg>`, {
titleProp: true,
}),
).toMatchInlineSnapshot(`
"import * as React from "react";
const SvgComponent = ({
title,
titleId
}) => <svg aria-labelledby={titleId}>{title === undefined ? <title id={titleId}>Hello</title> : title ? <title id={titleId}>{title}</title> : null}</svg>;
export default SvgComponent;"
`)
// testing when existing title has JSXExpression as children
expect(
testPreset(`<svg><title>{"Hello"}</title></svg>`, {
titleProp: true,
}),
).toMatchInlineSnapshot(`
"import * as React from "react";
const SvgComponent = ({
title,
titleId
}) => <svg aria-labelledby={titleId}>{title === undefined ? <title id={titleId}>{"Hello"}</title> : title ? <title id={titleId}>{title}</title> : null}</svg>;
export default SvgComponent;"
`)
})
it('handles descProp', () => {
expect(
testPreset('<svg></svg>', {
descProp: true,
}),
).toMatchInlineSnapshot(`
"import * as React from "react";
const SvgComponent = ({
desc,
descId
}) => <svg aria-describedby={descId}>{desc ? <desc id={descId}>{desc}</desc> : null}</svg>;
export default SvgComponent;"
`)
})
it('handles descProp and fallback on existing desc', () => {
// testing when existing desc has string as chilren
expect(
testPreset(`<svg><desc>Hello</desc></svg>`, {
descProp: true,
}),
).toMatchInlineSnapshot(`
"import * as React from "react";
const SvgComponent = ({
desc,
descId
}) => <svg aria-describedby={descId}>{desc === undefined ? <desc id={descId}>Hello</desc> : desc ? <desc id={descId}>{desc}</desc> : null}</svg>;
export default SvgComponent;"
`)
// testing when existing desc has JSXExpression as children
expect(
testPreset(`<svg><desc>{"Hello"}</desc></svg>`, {
descProp: true,
}),
).toMatchInlineSnapshot(`
"import * as React from "react";
const SvgComponent = ({
desc,
descId
}) => <svg aria-describedby={descId}>{desc === undefined ? <desc id={descId}>{"Hello"}</desc> : desc ? <desc id={descId}>{desc}</desc> : null}</svg>;
export default SvgComponent;"
`)
})
it('handles descProp and titleProp', () => {
expect(
testPreset('<svg></svg>', {
titleProp: true,
descProp: true,
}),
).toMatchInlineSnapshot(`
"import * as React from "react";
const SvgComponent = ({
title,
titleId,
desc,
descId
}) => <svg aria-labelledby={titleId} aria-describedby={descId}>{desc ? <desc id={descId}>{desc}</desc> : null}{title ? <title id={titleId}>{title}</title> : null}</svg>;
export default SvgComponent;"
`)
})
it('handles replaceAttrValues', () => {
expect(
testPreset('<svg a="#000" b="#fff" />', {
replaceAttrValues: {
'#000': 'black',
'#fff': '{props.white}',
},
}),
).toMatchInlineSnapshot(`
"import * as React from "react";
const SvgComponent = () => <svg a="black" b={props.white} />;
export default SvgComponent;"
`)
})
it('handles expandProps & icon & dimensions', () => {
expect(
testPreset('<svg a="#000" b="#fff" />', {
expandProps: 'end',
icon: true,
dimensions: true,
}),
).toMatchInlineSnapshot(`
"import * as React from "react";
const SvgComponent = props => <svg a="#000" b="#fff" width="1em" height="1em" {...props} />;
export default SvgComponent;"
`)
})
it('handles custom icon size', () => {
expect(
testPreset('<svg a="#000" b="#fff" />', {
expandProps: 'end',
icon: 24,
dimensions: true,
}),
).toMatchInlineSnapshot(`
"import * as React from "react";
const SvgComponent = props => <svg a="#000" b="#fff" width={24} height={24} {...props} />;
export default SvgComponent;"
`)
})
it('defaults to 24 on native', () => {
expect(
testPreset('<svg a="#000
gitextract_w9d7ejze/
├── .eslintignore
├── .eslintrc.json
├── .github/
│ ├── FUNDING.yml
│ ├── ISSUE_TEMPLATE/
│ │ ├── bug.md
│ │ ├── feature.md
│ │ ├── question.md
│ │ └── regression.md
│ ├── ISSUE_TEMPLATE.md
│ ├── PULL_REQUEST_TEMPLATE.md
│ ├── SUPPORT.md
│ ├── opencollective.yml
│ ├── stale.yml
│ └── workflows/
│ └── ci.yml
├── .gitignore
├── .nvmrc
├── .prettierignore
├── .prettierrc
├── BACKERS.md
├── CHANGELOG.md
├── CODE_OF_CONDUCT.md
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── __fixtures__/
│ ├── custom-index-template.js
│ ├── custom-index.config.js
│ ├── overrides.config.js
│ ├── simple-existing/
│ │ ├── File..js
│ │ ├── File.js
│ │ └── index..js
│ ├── template.js
│ ├── withPrettierRc/
│ │ └── .prettierrc
│ ├── withSvgoConfig/
│ │ ├── svgo.config.cjs
│ │ └── svgo.config.js
│ └── withSvgrRc/
│ └── .svgrrc
├── api/
│ ├── api/
│ │ └── svgr.js
│ ├── package.json
│ ├── pnpm-workspace.yaml
│ └── vercel.json
├── babel.config.js
├── build/
│ └── rollup.config.mjs
├── deprecated-packages/
│ └── svgr/
│ ├── message.js
│ └── package.json
├── examples/
│ ├── mocha-esm/
│ │ ├── CHANGELOG.md
│ │ ├── __mocks__/
│ │ │ └── svg.js
│ │ ├── example.js
│ │ ├── example.test.js
│ │ ├── mock-loader.js
│ │ └── package.json
│ └── webpack/
│ ├── .gitignore
│ ├── CHANGELOG.md
│ ├── package.json
│ ├── src/
│ │ └── index.js
│ └── webpack.config.js
├── jest.config.js
├── lerna.json
├── package.json
├── packages/
│ ├── babel-plugin-add-jsx-attribute/
│ │ ├── .npmignore
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── index.test.ts
│ │ │ └── index.ts
│ │ └── tsconfig.json
│ ├── babel-plugin-remove-jsx-attribute/
│ │ ├── .npmignore
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── index.test.ts
│ │ │ └── index.ts
│ │ └── tsconfig.json
│ ├── babel-plugin-remove-jsx-empty-expression/
│ │ ├── .npmignore
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── index.test.ts
│ │ │ └── index.ts
│ │ └── tsconfig.json
│ ├── babel-plugin-replace-jsx-attribute-value/
│ │ ├── .npmignore
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── index.test.ts
│ │ │ └── index.ts
│ │ └── tsconfig.json
│ ├── babel-plugin-svg-dynamic-title/
│ │ ├── .npmignore
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── index.test.ts
│ │ │ └── index.ts
│ │ └── tsconfig.json
│ ├── babel-plugin-svg-em-dimensions/
│ │ ├── .npmignore
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── index.test.ts
│ │ │ └── index.ts
│ │ └── tsconfig.json
│ ├── babel-plugin-transform-react-native-svg/
│ │ ├── .npmignore
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── index.test.ts
│ │ │ └── index.ts
│ │ └── tsconfig.json
│ ├── babel-plugin-transform-svg-component/
│ │ ├── .npmignore
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── __snapshots__/
│ │ │ │ └── index.test.ts.snap
│ │ │ ├── defaultTemplate.ts
│ │ │ ├── index.test.ts
│ │ │ ├── index.ts
│ │ │ ├── types.ts
│ │ │ └── variables.ts
│ │ └── tsconfig.json
│ ├── babel-preset/
│ │ ├── .npmignore
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── index.test.ts
│ │ │ └── index.ts
│ │ └── tsconfig.json
│ ├── cli/
│ │ ├── .npmignore
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── bin/
│ │ │ └── svgr
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── __snapshots__/
│ │ │ │ ├── index.test.ts.snap
│ │ │ │ └── util.test.ts.snap
│ │ │ ├── dirCommand.ts
│ │ │ ├── fileCommand.ts
│ │ │ ├── index.test.ts
│ │ │ ├── index.ts
│ │ │ ├── util.test.ts
│ │ │ └── util.ts
│ │ └── tsconfig.json
│ ├── core/
│ │ ├── .npmignore
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── __fixtures__/
│ │ │ │ ├── svgo/
│ │ │ │ │ └── svgo.config.js
│ │ │ │ └── svgr/
│ │ │ │ └── .svgrrc
│ │ │ ├── __snapshots__/
│ │ │ │ ├── config.test.ts.snap
│ │ │ │ └── transform.test.ts.snap
│ │ │ ├── config.test.ts
│ │ │ ├── config.ts
│ │ │ ├── index.ts
│ │ │ ├── plugins.test.ts
│ │ │ ├── plugins.ts
│ │ │ ├── state.test.ts
│ │ │ ├── state.ts
│ │ │ ├── transform.test.ts
│ │ │ └── transform.ts
│ │ └── tsconfig.json
│ ├── hast-util-to-babel-ast/
│ │ ├── .npmignore
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── __snapshots__/
│ │ │ │ └── index.test.ts.snap
│ │ │ ├── all.ts
│ │ │ ├── getAttributes.ts
│ │ │ ├── handlers.ts
│ │ │ ├── helpers.ts
│ │ │ ├── index.test.ts
│ │ │ ├── index.ts
│ │ │ ├── mappings.ts
│ │ │ ├── one.ts
│ │ │ ├── stringToObjectStyle.ts
│ │ │ └── util.ts
│ │ └── tsconfig.json
│ ├── plugin-jsx/
│ │ ├── .npmignore
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── index.test.ts
│ │ │ └── index.ts
│ │ └── tsconfig.json
│ ├── plugin-prettier/
│ │ ├── .npmignore
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── index.test.ts
│ │ │ └── index.ts
│ │ └── tsconfig.json
│ ├── plugin-svgo/
│ │ ├── .npmignore
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── __snapshots__/
│ │ │ │ └── index.test.ts.snap
│ │ │ ├── config.test.ts
│ │ │ ├── config.ts
│ │ │ ├── index.test.ts
│ │ │ └── index.ts
│ │ └── tsconfig.json
│ ├── rollup/
│ │ ├── .npmignore
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── __snapshots__/
│ │ │ │ └── index.test.ts.snap
│ │ │ ├── index.test.ts
│ │ │ └── index.ts
│ │ └── tsconfig.json
│ └── webpack/
│ ├── .npmignore
│ ├── CHANGELOG.md
│ ├── README.md
│ ├── package.json
│ ├── src/
│ │ ├── __snapshots__/
│ │ │ └── index.test.ts.snap
│ │ ├── index.test.ts
│ │ └── index.ts
│ └── tsconfig.json
├── pnpm-workspace.yaml
├── public/
│ └── .exists
├── resources/
│ └── svgr-logo.sketch
├── tsconfig.json
└── website/
├── .eslintignore
├── .eslintrc.js
├── .gitignore
├── .npmrc
├── .nvmrc
├── README.md
├── _redirects
├── gatsby-config.js
├── netlify.toml
├── package.json
├── pages/
│ ├── docs/
│ │ ├── cli.mdx
│ │ ├── configuration-files.mdx
│ │ ├── custom-templates.mdx
│ │ ├── custom-transformations.mdx
│ │ ├── ecosystem.mdx
│ │ ├── getting-started.mdx
│ │ ├── index.mdx
│ │ ├── jest.mdx
│ │ ├── migrate.mdx
│ │ ├── mocha.mdx
│ │ ├── next.mdx
│ │ ├── node-api.mdx
│ │ ├── options.mdx
│ │ ├── parcel.mdx
│ │ ├── remix.mdx
│ │ ├── rollup.mdx
│ │ ├── supporting-svgr.mdx
│ │ ├── webpack.mdx
│ │ └── what-is-svgr.mdx
│ ├── index.mdx
│ └── playground.mdx
└── src/
├── components/
│ ├── Home.js
│ └── playground/
│ ├── Ad.js
│ ├── CheckGroup.js
│ ├── DropArea.js
│ ├── Editor.js
│ ├── Loading.js
│ ├── Playground.js
│ ├── Query.js
│ ├── Settings.js
│ ├── SettingsFieldBoolean.js
│ ├── SettingsFieldEnum.js
│ ├── SettingsFieldInteger.js
│ ├── SettingsFieldString.js
│ ├── SettingsGroup.js
│ ├── SmallLabel.js
│ ├── config/
│ │ └── settings.js
│ ├── controls/
│ │ ├── CheckboxControl.js
│ │ ├── InputControl.js
│ │ ├── RadioControl.js
│ │ └── TextareaControl.js
│ ├── defaultSVG.js
│ ├── icons/
│ │ └── ChevronLeft.js
│ └── modules/
│ └── svgr.js
└── smooth-doc/
└── theme.js
SYMBOL INDEX (90 symbols across 44 files)
FILE: __fixtures__/custom-index-template.js
function indexTemplate (line 3) | function indexTemplate(files) {
FILE: __fixtures__/custom-index.config.js
function template (line 3) | function template(
FILE: __fixtures__/simple-existing/File..js
function SvgFile (line 3) | function SvgFile(props) {
FILE: examples/mocha-esm/mock-loader.js
constant SVG_REGEX (line 5) | const SVG_REGEX = /^[./a-zA-Z0-9$_-]+\.svg$/
function resolve (line 7) | async function resolve(specifier, context, defaultResolve) {
FILE: packages/babel-plugin-add-jsx-attribute/src/index.ts
type Attribute (line 4) | interface Attribute {
type Options (line 12) | interface Options {
function getAttributeValue (line 23) | function getAttributeValue({
function getAttribute (line 51) | function getAttribute({ spread, name, value, literal }: Attribute) {
method JSXOpeningElement (line 64) | JSXOpeningElement(path: NodePath<t.JSXOpeningElement>) {
FILE: packages/babel-plugin-remove-jsx-attribute/src/index.ts
type Options (line 4) | interface Options {
method JSXOpeningElement (line 11) | JSXOpeningElement(path: NodePath<t.JSXOpeningElement>) {
FILE: packages/babel-plugin-remove-jsx-empty-expression/src/index.ts
method JSXExpressionContainer (line 6) | JSXExpressionContainer(path: NodePath<t.JSXExpressionContainer>) {
FILE: packages/babel-plugin-replace-jsx-attribute-value/src/index.ts
type Value (line 4) | interface Value {
type Options (line 10) | interface Options {
method JSXAttribute (line 42) | JSXAttribute(path: NodePath<t.JSXAttribute>) {
FILE: packages/babel-plugin-svg-dynamic-title/src/index.ts
type tag (line 6) | type tag = 'title' | 'desc'
type Options (line 8) | interface Options {
type State (line 12) | interface State {
method JSXElement (line 56) | JSXElement(path: NodePath<t.JSXElement>, state: State) {
FILE: packages/babel-plugin-svg-em-dimensions/src/index.ts
type Options (line 6) | interface Options {
method JSXOpeningElement (line 25) | JSXOpeningElement(path: NodePath<t.JSXOpeningElement>) {
FILE: packages/babel-plugin-transform-react-native-svg/src/index.ts
type State (line 4) | interface State {
function replaceElement (line 36) | function replaceElement(path: NodePath<t.JSXElement>, state: State) {
method JSXElement (line 62) | JSXElement(path: NodePath<t.JSXElement>, state: State) {
method JSXElement (line 75) | JSXElement(path: NodePath<t.JSXElement>, state: State) {
method ImportDeclaration (line 81) | ImportDeclaration(path: NodePath<t.ImportDeclaration>, state: State) {
method Program (line 127) | Program(path: NodePath<t.Program>, state: Partial<State>) {
FILE: packages/babel-plugin-transform-svg-component/src/index.ts
method Program (line 23) | Program(path: NodePath<t.Program>) {
FILE: packages/babel-plugin-transform-svg-component/src/types.ts
type TemplateVariables (line 4) | interface TemplateVariables {
type TemplateContext (line 13) | interface TemplateContext {
type Template (line 18) | interface Template {
type State (line 24) | interface State {
type JSXRuntimeImport (line 29) | interface JSXRuntimeImport {
type Options (line 36) | interface Options {
FILE: packages/babel-plugin-transform-svg-component/src/variables.ts
type Context (line 14) | interface Context {
FILE: packages/babel-preset/src/index.ts
type Options (line 18) | interface Options extends TransformOptions {
function replaceMapToValues (line 43) | function replaceMapToValues(replaceMap: { [key: string]: string }): Valu...
FILE: packages/cli/src/dirCommand.ts
type IndexTemplate (line 37) | interface IndexTemplate {
type FileInfo (line 41) | interface FileInfo {
function handle (line 121) | async function handle(filename: string, root: string) {
FILE: packages/cli/src/index.ts
type Options (line 76) | interface Options extends Config {
type SvgrCommand (line 89) | interface SvgrCommand {
function run (line 178) | async function run() {
FILE: packages/cli/src/util.test.ts
constant FIXTURES (line 4) | const FIXTURES = path.join(__dirname, '../../../__fixtures__')
FILE: packages/cli/src/util.ts
function transformFilename (line 14) | function transformFilename(
FILE: packages/core/src/config.ts
type Config (line 9) | interface Config {
constant DEFAULT_CONFIG (line 52) | const DEFAULT_CONFIG: Config = {
FILE: packages/core/src/plugins.ts
type Plugin (line 4) | interface Plugin {
type ConfigPlugin (line 8) | type ConfigPlugin = string | Plugin
constant DEFAULT_PLUGINS (line 10) | const DEFAULT_PLUGINS: Plugin[] = []
FILE: packages/core/src/state.ts
type State (line 6) | interface State {
constant VALID_CHAR_REGEX (line 16) | const VALID_CHAR_REGEX = /[^a-zA-Z0-9 _-]/g
FILE: packages/core/src/transform.test.ts
function convertWithAllPlugins (line 3) | function convertWithAllPlugins(
function convertSyncWithAllPlugins (line 22) | function convertSyncWithAllPlugins(
FILE: packages/hast-util-to-babel-ast/src/handlers.ts
constant SPACE_REGEX (line 25) | const SPACE_REGEX = /^\s+$/
FILE: packages/hast-util-to-babel-ast/src/helpers.ts
type Helpers (line 5) | type Helpers = typeof helpers
FILE: packages/hast-util-to-babel-ast/src/index.test.ts
function transform (line 5) | function transform(code: string) {
FILE: packages/hast-util-to-babel-ast/src/mappings.ts
constant ATTRIBUTE_MAPPING (line 2) | const ATTRIBUTE_MAPPING = {
constant ELEMENT_ATTRIBUTE_MAPPING (line 488) | const ELEMENT_ATTRIBUTE_MAPPING = {
constant ELEMENT_TAG_NAME_MAPPING (line 500) | const ELEMENT_TAG_NAME_MAPPING: Record<string, string> = {
FILE: packages/hast-util-to-babel-ast/src/stringToObjectStyle.ts
constant PX_REGEX (line 5) | const PX_REGEX = /^\d+px$/
constant MS_REGEX (line 6) | const MS_REGEX = /^-ms-/
constant VAR_REGEX (line 7) | const VAR_REGEX = /^--/
FILE: packages/hast-util-to-babel-ast/src/util.ts
constant KEBAB_REGEX (line 29) | const KEBAB_REGEX = /[A-Z\u00C0-\u00D6\u00D8-\u00DE]/g
constant SPACES_REGEXP (line 35) | const SPACES_REGEXP = /[\t\r\n\u0085\u2028\u2029]+/g
FILE: packages/plugin-jsx/src/index.test.ts
method JSXElement (line 57) | JSXElement(path: any) {
FILE: packages/rollup/src/index.ts
type Options (line 37) | interface Options extends Config {
method transform (line 50) | async transform(data, id) {
FILE: packages/webpack/src/index.test.ts
function compile (line 6) | function compile(rules: ModuleOptions['rules']) {
FILE: packages/webpack/src/index.ts
type LoaderOptions (line 38) | interface LoaderOptions extends Config {
function svgrLoader (line 58) | function svgrLoader(
FILE: website/src/components/playground/Editor.js
function Editor (line 14) | function Editor(props) {
FILE: website/src/components/playground/Loading.js
constant QUERY (line 5) | const QUERY = graphql`
FILE: website/src/components/playground/Playground.js
function trackLink (line 166) | function trackLink(event) {
function CopyFeedback (line 179) | function CopyFeedback(props) {
function Playground (line 252) | function Playground() {
FILE: website/src/components/playground/Query.js
function formatQuery (line 5) | function formatQuery(state, initialState) {
function parseQuery (line 19) | function parseQuery(query) {
function getLocation (line 23) | function getLocation() {
function useHistory (line 31) | function useHistory() {
function useLocation (line 40) | function useLocation() {
function useQuery (line 50) | function useQuery(getInitialState = {}) {
FILE: website/src/components/playground/SettingsFieldBoolean.js
function SettingsFieldBoolean (line 5) | function SettingsFieldBoolean({ setting }) {
FILE: website/src/components/playground/SettingsFieldEnum.js
function SettingsFieldEnum (line 6) | function SettingsFieldEnum({ setting }) {
FILE: website/src/components/playground/SettingsFieldInteger.js
function SettingsFieldInteger (line 5) | function SettingsFieldInteger({ setting }) {
FILE: website/src/components/playground/SettingsFieldString.js
function SettingsFieldString (line 5) | function SettingsFieldString({ setting }) {
FILE: website/src/components/playground/SettingsGroup.js
function SettingsGroup (line 65) | function SettingsGroup({ title, children }) {
FILE: website/src/components/playground/config/settings.js
function stateToSettings (line 179) | function stateToSettings(state) {
FILE: website/src/components/playground/modules/svgr.js
function svgr (line 4) | async function svgr(code, options = {}) {
Condensed preview — 270 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (561K chars).
[
{
"path": ".eslintignore",
"chars": 96,
"preview": "node_modules/\n__fixtures__/\n__fixtures_build__/\ncoverage/\nexamples/\nsvgr.now.sh/\n/website/\ndist/"
},
{
"path": ".eslintrc.json",
"chars": 599,
"preview": "{\n \"root\": true,\n \"env\": {\n \"node\": true\n },\n \"parser\": \"@typescript-eslint/parser\",\n \"plugins\": [\"@typescript-e"
},
{
"path": ".github/FUNDING.yml",
"chars": 40,
"preview": "github: gregberge\nopen_collective: svgr\n"
},
{
"path": ".github/ISSUE_TEMPLATE/bug.md",
"chars": 699,
"preview": "---\nname: 🐛 Bug report\nabout: Create a report to help us improve\n---\n\n<!-- Love SVGR? Please consider supporting our col"
},
{
"path": ".github/ISSUE_TEMPLATE/feature.md",
"chars": 464,
"preview": "---\nname: 🚀 Feature Proposal\nabout: Submit a proposal for a new feature\n---\n\n<!-- Love SVGR? Please consider supporting "
},
{
"path": ".github/ISSUE_TEMPLATE/question.md",
"chars": 466,
"preview": "---\nname: 💬 Questions / Help\nabout: If you have questions, please read full readme first\n---\n\n<!-- Love SVGR? Please con"
},
{
"path": ".github/ISSUE_TEMPLATE/regression.md",
"chars": 822,
"preview": "---\nname: 💥 Regression Report\nabout: Report unexpected behavior that worked in previous versions\n---\n\n<!-- Love SVGR? Pl"
},
{
"path": ".github/ISSUE_TEMPLATE.md",
"chars": 349,
"preview": "## 👉 [Please follow one of these issue templates](https://github.com/gregberge/svgr/issues/new/choose) 👈\n\n<!-- Love SVGR"
},
{
"path": ".github/PULL_REQUEST_TEMPLATE.md",
"chars": 448,
"preview": "<!-- Thanks for submitting a pull request! Please provide enough information so that others can review your pull request"
},
{
"path": ".github/SUPPORT.md",
"chars": 164,
"preview": "Please read carefully the README before asking questions.\n\n<!-- Love SVGR? Please consider supporting our collective: 👉 "
},
{
"path": ".github/opencollective.yml",
"chars": 570,
"preview": "collective: svgr\ntiers:\n - tiers: '*'\n labels: ['backer']\n message: |\n Hey <author> :wave:,\n Thank you "
},
{
"path": ".github/stale.yml",
"chars": 496,
"preview": "# Number of days of inactivity before an issue becomes stale\ndaysUntilStale: 60\n# Number of days of inactivity before a "
},
{
"path": ".github/workflows/ci.yml",
"chars": 904,
"preview": "name: CI\n\non:\n push:\n branches: [main]\n pull_request:\n branches: [main]\n\npermissions:\n contents: read # to fet"
},
{
"path": ".gitignore",
"chars": 96,
"preview": "node_modules/\nlib/\ndist/\n!svgr.now.sh/lib/\n__fixtures_build__/\nsrc/__fixtures__/dist/\ncoverage/\n"
},
{
"path": ".nvmrc",
"chars": 2,
"preview": "18"
},
{
"path": ".prettierignore",
"chars": 152,
"preview": "__fixtures_build__/\n__fixtures__/\nCHANGELOG.md\npackage.json\nlerna.json\ndist/\n.next/\n/website/.cache/\n/website/public/\npn"
},
{
"path": ".prettierrc",
"chars": 69,
"preview": "{\n \"singleQuote\": true,\n \"trailingComma\": \"all\",\n \"semi\": false\n}\n"
},
{
"path": "BACKERS.md",
"chars": 1311,
"preview": "# Sponsors & Backers\n\n<p class=\"description\">Support SVGR’s development through donations.</p>\n\nSVGR is an MIT-licensed "
},
{
"path": "CHANGELOG.md",
"chars": 34422,
"preview": "# Change Log\n\nAll notable changes to this project will be documented in this file.\nSee [Conventional Commits](https://co"
},
{
"path": "CODE_OF_CONDUCT.md",
"chars": 3214,
"preview": "# Contributor Covenant Code of Conduct\n\n## Our Pledge\n\nIn the interest of fostering an open and welcoming environment, w"
},
{
"path": "CONTRIBUTING.md",
"chars": 3950,
"preview": "# How to Contribute\n\nSVGR is a small project, it is widely used but has not a lot of contributors. We're still working o"
},
{
"path": "LICENSE",
"chars": 1051,
"preview": "Copyright 2017 Smooth Code\n\nPermission is hereby granted, free of charge, to any person obtaining a copy of this softwar"
},
{
"path": "README.md",
"chars": 4128,
"preview": "<h1 align=\"center\">\n <img src=\"https://raw.githubusercontent.com/gregberge/svgr/master/resources/svgr-logo.png\" alt=\"sv"
},
{
"path": "__fixtures__/custom-index-template.js",
"chars": 308,
"preview": "const path = require('path')\n\nfunction indexTemplate(files) {\n const exportEntries = files.map(({path: file}) => {\n "
},
{
"path": "__fixtures__/custom-index.config.js",
"chars": 288,
"preview": "const indexTemplate = require('./custom-index-template.js')\n\nfunction template(\n { imports, componentName, props, jsx, "
},
{
"path": "__fixtures__/overrides.config.js",
"chars": 98,
"preview": "module.exports = {\n expandProps: false,\n dimensions: false,\n svgo: false,\n prettier: false,\n}\n"
},
{
"path": "__fixtures__/simple-existing/File..js",
"chars": 219,
"preview": "import * as React from 'react'\n\nfunction SvgFile(props) {\n return (\n <svg width={48} height={1} {...props}>\n <p"
},
{
"path": "__fixtures__/simple-existing/File.js",
"chars": 10,
"preview": "// nothing"
},
{
"path": "__fixtures__/simple-existing/index..js",
"chars": 40,
"preview": "export { default as File } from './File'"
},
{
"path": "__fixtures__/template.js",
"chars": 146,
"preview": "module.exports = () => (code, state) => `\nimport * as React from 'react'\n\nexport default function ${state.componentName}"
},
{
"path": "__fixtures__/withPrettierRc/.prettierrc",
"chars": 20,
"preview": "{\n \"tabWidth\": 5\n}\n"
},
{
"path": "__fixtures__/withSvgoConfig/svgo.config.cjs",
"chars": 167,
"preview": "module.exports = {\n plugins: [\n {\n name: 'preset-default',\n params: {\n overrides: {\n remov"
},
{
"path": "__fixtures__/withSvgoConfig/svgo.config.js",
"chars": 167,
"preview": "module.exports = {\n plugins: [\n {\n name: 'preset-default',\n params: {\n overrides: {\n remov"
},
{
"path": "__fixtures__/withSvgrRc/.svgrrc",
"chars": 19,
"preview": "{\n \"icon\": true\n}\n"
},
{
"path": "api/api/svgr.js",
"chars": 580,
"preview": "/* eslint-disable @typescript-eslint/no-var-requires */\nconst { transform } = require('@svgr/core')\nconst jsx = require("
},
{
"path": "api/package.json",
"chars": 216,
"preview": "{\n \"private\": true,\n \"packageManager\": \"pnpm@8.1.1\",\n \"dependencies\": {\n \"@svgr/core\": \"latest\",\n \"@svgr/plugin"
},
{
"path": "api/pnpm-workspace.yaml",
"chars": 144,
"preview": "# https://github.com/pnpm/pnpm/issues/2412\n# This is only created so that api package doesn't try to use the virtual sto"
},
{
"path": "api/vercel.json",
"chars": 691,
"preview": "{\n \"public\": true,\n \"redirects\": [\n {\n \"source\": \"/\",\n \"destination\": \"https://react-svgr.com/playground\""
},
{
"path": "babel.config.js",
"chars": 140,
"preview": "module.exports = {\n presets: [\n ['@babel/preset-env', { targets: { node: '12' }, loose: true }],\n '@babel/preset-"
},
{
"path": "build/rollup.config.mjs",
"chars": 1155,
"preview": "import { resolve } from 'node:path'\nimport { readFileSync } from 'node:fs'\nimport json from '@rollup/plugin-json'\nimport"
},
{
"path": "deprecated-packages/svgr/message.js",
"chars": 592,
"preview": "/* eslint-disable @typescript-eslint/no-var-requires */\nconst githubCurrentUser = require('github-current-user')\n\ngithub"
},
{
"path": "deprecated-packages/svgr/package.json",
"chars": 508,
"preview": "{\n \"name\": \"svgr\",\n \"description\": \"Convert raw SVG into React components.\",\n \"version\": \"2.0.0\",\n \"repository\": \"gi"
},
{
"path": "examples/mocha-esm/CHANGELOG.md",
"chars": 466,
"preview": "# Change Log\n\nAll notable changes to this project will be documented in this file.\nSee [Conventional Commits](https://co"
},
{
"path": "examples/mocha-esm/__mocks__/svg.js",
"chars": 22,
"preview": "export default 'Icon'\n"
},
{
"path": "examples/mocha-esm/example.js",
"chars": 47,
"preview": "import Icon from './icon.svg'\n\nexport { Icon }\n"
},
{
"path": "examples/mocha-esm/example.test.js",
"chars": 120,
"preview": "import { Icon } from './example.js'\n\nit('works', () => {\n if (Icon !== 'Icon') {\n throw new Error('Invalid')\n }\n})\n"
},
{
"path": "examples/mocha-esm/mock-loader.js",
"chars": 404,
"preview": "import { cwd } from 'node:process'\nimport { pathToFileURL } from 'node:url'\n\nconst baseURL = pathToFileURL(`${cwd()}/`)."
},
{
"path": "examples/mocha-esm/package.json",
"chars": 234,
"preview": "{\n \"name\": \"@svgr/mocha-esm-example\",\n \"private\": true,\n \"type\": \"module\",\n \"scripts\": {\n \"test\": \"mocha --loader"
},
{
"path": "examples/webpack/.gitignore",
"chars": 6,
"preview": "dist/\n"
},
{
"path": "examples/webpack/CHANGELOG.md",
"chars": 763,
"preview": "# Change Log\n\nAll notable changes to this project will be documented in this file.\nSee [Conventional Commits](https://co"
},
{
"path": "examples/webpack/package.json",
"chars": 343,
"preview": "{\n \"name\": \"@svgr/webpack-example\",\n \"private\": true,\n \"scripts\": {\n \"start\": \"webpack serve\"\n },\n \"devDependenc"
},
{
"path": "examples/webpack/src/index.js",
"chars": 182,
"preview": "import star, { ReactComponent } from './star.url.svg'\nimport Star from './star.simple.svg'\n\nconsole.log('url', typeof st"
},
{
"path": "examples/webpack/webpack.config.js",
"chars": 388,
"preview": "const HtmlWebpackPlugin = require('html-webpack-plugin')\n\nmodule.exports = {\n mode: 'development',\n module: {\n rule"
},
{
"path": "jest.config.js",
"chars": 192,
"preview": "module.exports = {\n watchPathIgnorePatterns: ['__fixtures__', '__fixtures__build__'],\n rootDir: 'packages',\n transfor"
},
{
"path": "lerna.json",
"chars": 93,
"preview": "{\n \"lerna\": \"2.9.0\",\n \"version\": \"8.1.0\",\n \"npmClient\": \"pnpm\",\n \"useWorkspaces\": true\n}\n"
},
{
"path": "package.json",
"chars": 1298,
"preview": "{\n \"private\": true,\n \"scripts\": {\n \"build\": \"pnpm -r run build\",\n \"dev\": \"pnpm -r --parallel run build --watch\","
},
{
"path": "packages/babel-plugin-add-jsx-attribute/.npmignore",
"chars": 8,
"preview": "src/\n.*\n"
},
{
"path": "packages/babel-plugin-add-jsx-attribute/CHANGELOG.md",
"chars": 2464,
"preview": "# Change Log\n\nAll notable changes to this project will be documented in this file.\nSee [Conventional Commits](https://co"
},
{
"path": "packages/babel-plugin-add-jsx-attribute/README.md",
"chars": 505,
"preview": "# @svgr/babel-plugin-add-jsx-attribute\n\n## Install\n\n```\b\nnpm install --save-dev @svgr/babel-plugin-add-jsx-attribute\n```"
},
{
"path": "packages/babel-plugin-add-jsx-attribute/package.json",
"chars": 975,
"preview": "{\n \"name\": \"@svgr/babel-plugin-add-jsx-attribute\",\n \"description\": \"Add JSX attribute\",\n \"version\": \"8.0.0\",\n \"main\""
},
{
"path": "packages/babel-plugin-add-jsx-attribute/src/index.test.ts",
"chars": 2577,
"preview": "import { transform } from '@babel/core'\nimport plugin, { Options } from '.'\n\nconst testPlugin = (code: string, options: "
},
{
"path": "packages/babel-plugin-add-jsx-attribute/src/index.ts",
"chars": 2877,
"preview": "/* eslint-disable @typescript-eslint/explicit-module-boundary-types */\nimport { ConfigAPI, types as t, NodePath, templat"
},
{
"path": "packages/babel-plugin-add-jsx-attribute/tsconfig.json",
"chars": 56,
"preview": "{\n \"extends\": \"../../tsconfig\",\n \"include\": [\"src\"]\n}\n"
},
{
"path": "packages/babel-plugin-remove-jsx-attribute/.npmignore",
"chars": 53,
"preview": "/*\n/dist/*\n!/dist/index.{d.ts,js}\n!/dist/index.js.map"
},
{
"path": "packages/babel-plugin-remove-jsx-attribute/CHANGELOG.md",
"chars": 2628,
"preview": "# Change Log\n\nAll notable changes to this project will be documented in this file.\nSee [Conventional Commits](https://co"
},
{
"path": "packages/babel-plugin-remove-jsx-attribute/README.md",
"chars": 352,
"preview": "# @svgr/babel-plugin-remove-jsx-attribute\n\n## Install\n\n```\b\nnpm install --save-dev @svgr/babel-plugin-remove-jsx-attribu"
},
{
"path": "packages/babel-plugin-remove-jsx-attribute/package.json",
"chars": 984,
"preview": "{\n \"name\": \"@svgr/babel-plugin-remove-jsx-attribute\",\n \"description\": \"Remove JSX attribute\",\n \"version\": \"8.0.0\",\n "
},
{
"path": "packages/babel-plugin-remove-jsx-attribute/src/index.test.ts",
"chars": 847,
"preview": "import { transform } from '@babel/core'\nimport plugin, { Options } from '.'\n\nconst testPlugin = (code: string, options: "
},
{
"path": "packages/babel-plugin-remove-jsx-attribute/src/index.ts",
"chars": 818,
"preview": "/* eslint-disable @typescript-eslint/explicit-module-boundary-types */\nimport { ConfigAPI, types as t, NodePath } from '"
},
{
"path": "packages/babel-plugin-remove-jsx-attribute/tsconfig.json",
"chars": 56,
"preview": "{\n \"extends\": \"../../tsconfig\",\n \"include\": [\"src\"]\n}\n"
},
{
"path": "packages/babel-plugin-remove-jsx-empty-expression/.npmignore",
"chars": 53,
"preview": "/*\n/dist/*\n!/dist/index.{d.ts,js}\n!/dist/index.js.map"
},
{
"path": "packages/babel-plugin-remove-jsx-empty-expression/CHANGELOG.md",
"chars": 2183,
"preview": "# Change Log\n\nAll notable changes to this project will be documented in this file.\nSee [Conventional Commits](https://co"
},
{
"path": "packages/babel-plugin-remove-jsx-empty-expression/README.md",
"chars": 263,
"preview": "# @svgr/babel-plugin-remove-jsx-empty-expression\n\n## Install\n\n```\b\nnpm install --save-dev @svgr/babel-plugin-remove-jsx-"
},
{
"path": "packages/babel-plugin-remove-jsx-empty-expression/package.json",
"chars": 1005,
"preview": "{\n \"name\": \"@svgr/babel-plugin-remove-jsx-empty-expression\",\n \"description\": \"Remove JSX empty expression\",\n \"version"
},
{
"path": "packages/babel-plugin-remove-jsx-empty-expression/src/index.test.ts",
"chars": 439,
"preview": "import { transform } from '@babel/core'\nimport plugin from '.'\n\nconst testPlugin = (code: string) => {\n const result = "
},
{
"path": "packages/babel-plugin-remove-jsx-empty-expression/src/index.ts",
"chars": 395,
"preview": "/* eslint-disable @typescript-eslint/explicit-module-boundary-types */\nimport { types as t, NodePath } from '@babel/core"
},
{
"path": "packages/babel-plugin-remove-jsx-empty-expression/tsconfig.json",
"chars": 56,
"preview": "{\n \"extends\": \"../../tsconfig\",\n \"include\": [\"src\"]\n}\n"
},
{
"path": "packages/babel-plugin-replace-jsx-attribute-value/.npmignore",
"chars": 61,
"preview": "src/\n.*\n/*\n/dist/*\n!/dist/index.{d.ts,js}\n!/dist/index.js.map"
},
{
"path": "packages/babel-plugin-replace-jsx-attribute-value/CHANGELOG.md",
"chars": 2509,
"preview": "# Change Log\n\nAll notable changes to this project will be documented in this file.\nSee [Conventional Commits](https://co"
},
{
"path": "packages/babel-plugin-replace-jsx-attribute-value/README.md",
"chars": 457,
"preview": "# @svgr/babel-plugin-replace-jsx-attribute-value\n\n## Install\n\n```\b\nnpm install --save-dev @svgr/babel-plugin-replace-jsx"
},
{
"path": "packages/babel-plugin-replace-jsx-attribute-value/package.json",
"chars": 1005,
"preview": "{\n \"name\": \"@svgr/babel-plugin-replace-jsx-attribute-value\",\n \"description\": \"Replace JSX attribute value\",\n \"version"
},
{
"path": "packages/babel-plugin-replace-jsx-attribute-value/src/index.test.ts",
"chars": 772,
"preview": "import { transform } from '@babel/core'\nimport plugin, { Options } from '.'\n\nconst testPlugin = (code: string, options: "
},
{
"path": "packages/babel-plugin-replace-jsx-attribute-value/src/index.ts",
"chars": 1466,
"preview": "/* eslint-disable @typescript-eslint/explicit-module-boundary-types */\nimport { ConfigAPI, types as t, NodePath, templat"
},
{
"path": "packages/babel-plugin-replace-jsx-attribute-value/tsconfig.json",
"chars": 56,
"preview": "{\n \"extends\": \"../../tsconfig\",\n \"include\": [\"src\"]\n}\n"
},
{
"path": "packages/babel-plugin-svg-dynamic-title/.npmignore",
"chars": 53,
"preview": "/*\n/dist/*\n!/dist/index.{d.ts,js}\n!/dist/index.js.map"
},
{
"path": "packages/babel-plugin-svg-dynamic-title/CHANGELOG.md",
"chars": 4074,
"preview": "# Change Log\n\nAll notable changes to this project will be documented in this file.\nSee [Conventional Commits](https://co"
},
{
"path": "packages/babel-plugin-svg-dynamic-title/README.md",
"chars": 347,
"preview": "# @svgr/babel-plugin-svg-dynamic-title\n\n## Install\n\n```\b\nnpm install --save-dev @svgr/babel-plugin-svg-dynamic-title\n```"
},
{
"path": "packages/babel-plugin-svg-dynamic-title/package.json",
"chars": 1005,
"preview": "{\n \"name\": \"@svgr/babel-plugin-svg-dynamic-title\",\n \"description\": \"Transform SVG by adding a dynamic title element\",\n"
},
{
"path": "packages/babel-plugin-svg-dynamic-title/src/index.test.ts",
"chars": 4284,
"preview": "import { transform } from '@babel/core'\nimport plugin, { Options } from '.'\n\nconst testPlugin = (code: string, options: "
},
{
"path": "packages/babel-plugin-svg-dynamic-title/src/index.ts",
"chars": 3950,
"preview": "/* eslint-disable @typescript-eslint/explicit-module-boundary-types */\nimport { NodePath, types as t } from '@babel/core"
},
{
"path": "packages/babel-plugin-svg-dynamic-title/tsconfig.json",
"chars": 56,
"preview": "{\n \"extends\": \"../../tsconfig\",\n \"include\": [\"src\"]\n}\n"
},
{
"path": "packages/babel-plugin-svg-em-dimensions/.npmignore",
"chars": 61,
"preview": "src/\n.*\n/*\n/dist/*\n!/dist/index.{d.ts,js}\n!/dist/index.js.map"
},
{
"path": "packages/babel-plugin-svg-em-dimensions/CHANGELOG.md",
"chars": 2464,
"preview": "# Change Log\n\nAll notable changes to this project will be documented in this file.\nSee [Conventional Commits](https://co"
},
{
"path": "packages/babel-plugin-svg-em-dimensions/README.md",
"chars": 274,
"preview": "# @svgr/babel-plugin-svg-em-dimensions\n\n## Install\n\n```\b\nnpm install --save-dev @svgr/babel-plugin-svg-em-dimensions\n```"
},
{
"path": "packages/babel-plugin-svg-em-dimensions/package.json",
"chars": 998,
"preview": "{\n \"name\": \"@svgr/babel-plugin-svg-em-dimensions\",\n \"description\": \"Transform SVG to use em-based dimensions\",\n \"vers"
},
{
"path": "packages/babel-plugin-svg-em-dimensions/src/index.test.ts",
"chars": 1113,
"preview": "import { transform } from '@babel/core'\nimport plugin, { Options } from '.'\n\nconst testPlugin = (code: string, options?:"
},
{
"path": "packages/babel-plugin-svg-em-dimensions/src/index.ts",
"chars": 1771,
"preview": "/* eslint-disable @typescript-eslint/explicit-module-boundary-types */\nimport { types as t, NodePath, ConfigAPI } from '"
},
{
"path": "packages/babel-plugin-svg-em-dimensions/tsconfig.json",
"chars": 56,
"preview": "{\n \"extends\": \"../../tsconfig\",\n \"include\": [\"src\"]\n}\n"
},
{
"path": "packages/babel-plugin-transform-react-native-svg/.npmignore",
"chars": 61,
"preview": "src/\n.*\n/*\n/dist/*\n!/dist/index.{d.ts,js}\n!/dist/index.js.map"
},
{
"path": "packages/babel-plugin-transform-react-native-svg/CHANGELOG.md",
"chars": 3281,
"preview": "# Change Log\n\nAll notable changes to this project will be documented in this file.\nSee [Conventional Commits](https://co"
},
{
"path": "packages/babel-plugin-transform-react-native-svg/README.md",
"chars": 260,
"preview": "# @svgr/babel-plugin-transform-react-native-svg\n\n## Install\n\n```\b\nnpm install --save-dev @svgr/babel-plugin-transform-re"
},
{
"path": "packages/babel-plugin-transform-react-native-svg/package.json",
"chars": 1031,
"preview": "{\n \"name\": \"@svgr/babel-plugin-transform-react-native-svg\",\n \"description\": \"Transform DOM elements into react-native-"
},
{
"path": "packages/babel-plugin-transform-react-native-svg/src/index.test.ts",
"chars": 1448,
"preview": "import { transform } from '@babel/core'\nimport plugin from '.'\n\nconst testPlugin = (code: string) => {\n const result = "
},
{
"path": "packages/babel-plugin-transform-react-native-svg/src/index.ts",
"chars": 3777,
"preview": "/* eslint-disable @typescript-eslint/explicit-module-boundary-types */\nimport { NodePath, types as t } from '@babel/core"
},
{
"path": "packages/babel-plugin-transform-react-native-svg/tsconfig.json",
"chars": 56,
"preview": "{\n \"extends\": \"../../tsconfig\",\n \"include\": [\"src\"]\n}\n"
},
{
"path": "packages/babel-plugin-transform-svg-component/.npmignore",
"chars": 53,
"preview": "/*\n/dist/*\n!/dist/index.{d.ts,js}\n!/dist/index.js.map"
},
{
"path": "packages/babel-plugin-transform-svg-component/CHANGELOG.md",
"chars": 7095,
"preview": "# Change Log\n\nAll notable changes to this project will be documented in this file.\nSee [Conventional Commits](https://co"
},
{
"path": "packages/babel-plugin-transform-svg-component/README.md",
"chars": 284,
"preview": "# @svgr/babel-plugin-transform-svg-component\n\n## Install\n\n```\b\nnpm install --save-dev @svgr/babel-plugin-transform-svg-c"
},
{
"path": "packages/babel-plugin-transform-svg-component/package.json",
"chars": 1065,
"preview": "{\n \"name\": \"@svgr/babel-plugin-transform-svg-component\",\n \"description\": \"Transform SVG into component\",\n \"version\": "
},
{
"path": "packages/babel-plugin-transform-svg-component/src/__snapshots__/index.test.ts.snap",
"chars": 15990,
"preview": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`plugin javascript #jsxRuntime allows to specify a custom \"classic\" "
},
{
"path": "packages/babel-plugin-transform-svg-component/src/defaultTemplate.ts",
"chars": 282,
"preview": "import type { Template } from './types'\n\nexport const defaultTemplate: Template = (variables, { tpl }) => {\n return tpl"
},
{
"path": "packages/babel-plugin-transform-svg-component/src/index.test.ts",
"chars": 11727,
"preview": "import { transform } from '@babel/core'\nimport plugin, { Options } from '.'\n\nconst defaultOptions = {\n namedExport: 'Re"
},
{
"path": "packages/babel-plugin-transform-svg-component/src/index.ts",
"chars": 1112,
"preview": "/* eslint-disable @typescript-eslint/explicit-module-boundary-types */\nimport {\n ConfigAPI,\n NodePath,\n types as t,\n "
},
{
"path": "packages/babel-plugin-transform-svg-component/src/types.ts",
"chars": 1220,
"preview": "import type { types as t } from '@babel/core'\nimport type { TemplateBuilder } from '@babel/template'\n\nexport interface T"
},
{
"path": "packages/babel-plugin-transform-svg-component/src/variables.ts",
"chars": 7772,
"preview": "import { types as t, template } from '@babel/core'\nimport type { Options, TemplateVariables, JSXRuntimeImport } from './"
},
{
"path": "packages/babel-plugin-transform-svg-component/tsconfig.json",
"chars": 56,
"preview": "{\n \"extends\": \"../../tsconfig\",\n \"include\": [\"src\"]\n}\n"
},
{
"path": "packages/babel-preset/.npmignore",
"chars": 53,
"preview": "/*\n/dist/*\n!/dist/index.{d.ts,js}\n!/dist/index.js.map"
},
{
"path": "packages/babel-preset/CHANGELOG.md",
"chars": 7149,
"preview": "# Change Log\n\nAll notable changes to this project will be documented in this file.\nSee [Conventional Commits](https://co"
},
{
"path": "packages/babel-preset/README.md",
"chars": 215,
"preview": "# @svgr/babel-preset\n\n## Install\n\n```\b\nnpm install --save-dev @svgr/babel-preset\n```\n\n## Usage\n\n**.babelrc**\n\n```json\n{\n"
},
{
"path": "packages/babel-preset/package.json",
"chars": 1526,
"preview": "{\n \"name\": \"@svgr/babel-preset\",\n \"description\": \"SVGR preset that apply transformations from config\",\n \"version\": \"8"
},
{
"path": "packages/babel-preset/src/index.test.ts",
"chars": 5912,
"preview": "import { transform } from '@babel/core'\nimport preset, { Options } from '.'\n\nconst defaultOptions = {\n namedExport: 'Re"
},
{
"path": "packages/babel-preset/src/index.ts",
"chars": 4001,
"preview": "/* eslint-disable @typescript-eslint/explicit-module-boundary-types */\nimport { ConfigAPI } from '@babel/core'\nimport ad"
},
{
"path": "packages/babel-preset/tsconfig.json",
"chars": 56,
"preview": "{\n \"extends\": \"../../tsconfig\",\n \"include\": [\"src\"]\n}\n"
},
{
"path": "packages/cli/.npmignore",
"chars": 64,
"preview": "/*\n/dist/*\n!/dist/index.{d.ts,js}\n!/dist/index.js.map\n!/bin/svgr"
},
{
"path": "packages/cli/CHANGELOG.md",
"chars": 14932,
"preview": "# Change Log\n\nAll notable changes to this project will be documented in this file.\nSee [Conventional Commits](https://co"
},
{
"path": "packages/cli/README.md",
"chars": 2762,
"preview": "# @svgr/cli\n\n[![Build Status][build-badge]][build]\n[![version][version-badge]][package]\n[![MIT License][license-badge]]["
},
{
"path": "packages/cli/bin/svgr",
"chars": 46,
"preview": "#!/usr/bin/env node\n\nrequire('../dist/index')\n"
},
{
"path": "packages/cli/package.json",
"chars": 1131,
"preview": "{\n \"name\": \"@svgr/cli\",\n \"description\": \"SVGR command line.\",\n \"version\": \"8.1.0\",\n \"repository\": \"https://github.co"
},
{
"path": "packages/cli/src/__snapshots__/index.test.ts.snap",
"chars": 17513,
"preview": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`cli should add Svg prefix to index.js exports staring with number 1"
},
{
"path": "packages/cli/src/__snapshots__/util.test.ts.snap",
"chars": 698,
"preview": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`util #convertFile should convert a file 1`] = `\n\"import * as React "
},
{
"path": "packages/cli/src/dirCommand.ts",
"chars": 5016,
"preview": "/* eslint-disable no-underscore-dangle, no-console */\nimport { promises as fs } from 'fs'\nimport * as path from 'path'\ni"
},
{
"path": "packages/cli/src/fileCommand.ts",
"chars": 1348,
"preview": "/* eslint-disable no-underscore-dangle */\nimport { promises as fs } from 'fs'\nimport { convert, convertFile, exitError }"
},
{
"path": "packages/cli/src/index.test.ts",
"chars": 7812,
"preview": "import { promises as fs } from 'fs'\nimport * as path from 'path'\nimport { exec as execCb } from 'child_process'\nimport {"
},
{
"path": "packages/cli/src/index.ts",
"chars": 6282,
"preview": "/* eslint-disable no-console */\nimport { program, Command } from 'commander'\nimport * as path from 'path'\nimport { glob "
},
{
"path": "packages/cli/src/util.test.ts",
"chars": 1673,
"preview": "import * as path from 'path'\nimport { convertFile, transformFilename, formatExportName } from './util'\n\nconst FIXTURES ="
},
{
"path": "packages/cli/src/util.ts",
"chars": 1820,
"preview": "/* eslint-disable no-console */\nimport { promises as fs } from 'fs'\nimport { red } from 'chalk'\nimport { transform, Conf"
},
{
"path": "packages/cli/tsconfig.json",
"chars": 56,
"preview": "{\n \"extends\": \"../../tsconfig\",\n \"include\": [\"src\"]\n}\n"
},
{
"path": "packages/core/.npmignore",
"chars": 53,
"preview": "/*\n/dist/*\n!/dist/index.{d.ts,js}\n!/dist/index.js.map"
},
{
"path": "packages/core/CHANGELOG.md",
"chars": 15893,
"preview": "# Change Log\n\nAll notable changes to this project will be documented in this file.\nSee [Conventional Commits](https://co"
},
{
"path": "packages/core/README.md",
"chars": 1363,
"preview": "# @svgr/core\n\n[![Build Status][build-badge]][build]\n[![version][version-badge]][package]\n[![MIT License][license-badge]]"
},
{
"path": "packages/core/package.json",
"chars": 1148,
"preview": "{\n \"name\": \"@svgr/core\",\n \"description\": \"Transform SVG into React Components.\",\n \"version\": \"8.1.0\",\n \"main\": \"./di"
},
{
"path": "packages/core/src/__fixtures__/svgo/svgo.config.js",
"chars": 166,
"preview": "module.exports = {\n plugins: [\n {\n name: 'preset-default',\n params: {\n overrides: {\n remov"
},
{
"path": "packages/core/src/__fixtures__/svgr/.svgrrc",
"chars": 90,
"preview": "{\n noSemi: true,\n icon: true,\n replaceAttrValues: [[\"#063855\", \"currentColor\"]]\n}"
},
{
"path": "packages/core/src/__snapshots__/config.test.ts.snap",
"chars": 4983,
"preview": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`svgo async #loadConfig [async] should load config using filePath 1`"
},
{
"path": "packages/core/src/__snapshots__/transform.test.ts.snap",
"chars": 15755,
"preview": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`convert config accepts options {\"descProp\":true} 1`] = `\n\"import * "
},
{
"path": "packages/core/src/config.test.ts",
"chars": 2518,
"preview": "import * as path from 'path'\nimport { resolveConfig, resolveConfigFile, loadConfig } from './config'\n\nconst getMethod = "
},
{
"path": "packages/core/src/config.ts",
"chars": 3484,
"preview": "import { cosmiconfig, cosmiconfigSync } from 'cosmiconfig'\nimport type { Options as PrettierOptions } from 'prettier'\nim"
},
{
"path": "packages/core/src/index.ts",
"chars": 156,
"preview": "export { transform } from './transform'\nexport * from './config'\nexport type { State } from './state'\nexport type { Plug"
},
{
"path": "packages/core/src/plugins.test.ts",
"chars": 1224,
"preview": "import jsx from '@svgr/plugin-jsx'\nimport { getPlugins, resolvePlugin } from './plugins'\nimport { State, Config } from '"
},
{
"path": "packages/core/src/plugins.ts",
"chars": 1401,
"preview": "import { Config } from './config'\nimport type { State } from './state'\n\nexport interface Plugin {\n (code: string, confi"
},
{
"path": "packages/core/src/state.test.ts",
"chars": 1130,
"preview": "import { expandState } from './state'\n\ndescribe('state', () => {\n describe('#expandState', () => {\n it('should trans"
},
{
"path": "packages/core/src/state.ts",
"chars": 807,
"preview": "import { parse as parsePath } from 'path'\n// @ts-ignore\nimport camelCase from 'camelcase'\nimport type { ConfigPlugin } f"
},
{
"path": "packages/core/src/transform.test.ts",
"chars": 10463,
"preview": "import { transform, Config, State } from '.'\n\nfunction convertWithAllPlugins(\n code: string,\n config?: Config,\n state"
},
{
"path": "packages/core/src/transform.ts",
"chars": 992,
"preview": "import { expandState } from './state'\nimport { loadConfig } from './config'\nimport { resolvePlugin, getPlugins } from '."
},
{
"path": "packages/core/tsconfig.json",
"chars": 56,
"preview": "{\n \"extends\": \"../../tsconfig\",\n \"include\": [\"src\"]\n}\n"
},
{
"path": "packages/hast-util-to-babel-ast/.npmignore",
"chars": 61,
"preview": "src/\n.*\n/*\n/dist/*\n!/dist/index.{d.ts,js}\n!/dist/index.js.map"
},
{
"path": "packages/hast-util-to-babel-ast/CHANGELOG.md",
"chars": 5001,
"preview": "# Change Log\n\nAll notable changes to this project will be documented in this file.\nSee [Conventional Commits](https://co"
},
{
"path": "packages/hast-util-to-babel-ast/README.md",
"chars": 736,
"preview": "# @svgr/hast-util-to-babel-ast\n\n[](https://travis-ci."
},
{
"path": "packages/hast-util-to-babel-ast/package.json",
"chars": 1122,
"preview": "{\n \"name\": \"@svgr/hast-util-to-babel-ast\",\n \"description\": \"Transform HAST to Babel AST (JSX)\",\n \"version\": \"8.0.0\",\n"
},
{
"path": "packages/hast-util-to-babel-ast/src/__snapshots__/index.test.ts.snap",
"chars": 1811,
"preview": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`hast-util-to-babel-ast should handle spaces and tab 1`] = `\"<svg vi"
},
{
"path": "packages/hast-util-to-babel-ast/src/all.ts",
"chars": 698,
"preview": "import { one } from './one'\nimport type * as t from '@babel/types'\nimport type { RootNode, ElementNode } from 'svg-parse"
},
{
"path": "packages/hast-util-to-babel-ast/src/getAttributes.ts",
"chars": 2042,
"preview": "import * as t from '@babel/types'\nimport type { ElementNode } from 'svg-parser'\nimport { isNumeric, kebabCase, replaceSp"
},
{
"path": "packages/hast-util-to-babel-ast/src/handlers.ts",
"chars": 1856,
"preview": "import * as t from '@babel/types'\nimport { decodeXML } from 'entities'\nimport { all } from './all'\nimport { getAttribute"
},
{
"path": "packages/hast-util-to-babel-ast/src/helpers.ts",
"chars": 114,
"preview": "import * as handlers from './handlers'\n\nexport const helpers = { handlers }\n\nexport type Helpers = typeof helpers\n"
},
{
"path": "packages/hast-util-to-babel-ast/src/index.test.ts",
"chars": 4163,
"preview": "import { parse } from 'svg-parser'\nimport generate from '@babel/generator'\nimport hastToBabelAst from './index'\n\nfunctio"
},
{
"path": "packages/hast-util-to-babel-ast/src/index.ts",
"chars": 250,
"preview": "import type { RootNode } from 'svg-parser'\nimport type * as t from '@babel/types'\nimport { root } from './handlers'\nimpo"
},
{
"path": "packages/hast-util-to-babel-ast/src/mappings.ts",
"chars": 15882,
"preview": "// From https://raw.githubusercontent.com/facebook/react/master/packages/react-dom/src/shared/possibleStandardNames.js\ne"
},
{
"path": "packages/hast-util-to-babel-ast/src/one.ts",
"chars": 591,
"preview": "import type { Node, RootNode, ElementNode } from 'svg-parser'\nimport type { Helpers } from './helpers'\nimport type * as "
},
{
"path": "packages/hast-util-to-babel-ast/src/stringToObjectStyle.ts",
"chars": 1685,
"preview": "// Inspired by https://github.com/reactjs/react-magic/blob/master/src/htmltojsx.js\nimport * as t from '@babel/types'\nimp"
},
{
"path": "packages/hast-util-to-babel-ast/src/util.ts",
"chars": 1136,
"preview": "/**\n * Determines if the specified string consists entirely of numeric characters.\n */\nexport const isNumeric = (value: "
},
{
"path": "packages/hast-util-to-babel-ast/tsconfig.json",
"chars": 56,
"preview": "{\n \"extends\": \"../../tsconfig\",\n \"include\": [\"src\"]\n}\n"
},
{
"path": "packages/plugin-jsx/.npmignore",
"chars": 53,
"preview": "/*\n/dist/*\n!/dist/index.{d.ts,js}\n!/dist/index.js.map"
},
{
"path": "packages/plugin-jsx/CHANGELOG.md",
"chars": 6859,
"preview": "# Change Log\n\nAll notable changes to this project will be documented in this file.\nSee [Conventional Commits](https://co"
},
{
"path": "packages/plugin-jsx/README.md",
"chars": 2408,
"preview": "# @svgr/plugin-jsx\n\n[](https://travis-ci.org/smooth-c"
},
{
"path": "packages/plugin-jsx/package.json",
"chars": 1200,
"preview": "{\n \"name\": \"@svgr/plugin-jsx\",\n \"description\": \"Transform SVG into JSX\",\n \"version\": \"8.1.0\",\n \"main\": \"./dist/index"
},
{
"path": "packages/plugin-jsx/src/index.test.ts",
"chars": 3847,
"preview": "import jsx from '.'\n\nconst svgBaseCode = `\n<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<svg width=\"88px\" height=\"88px\" viewBo"
},
{
"path": "packages/plugin-jsx/src/index.ts",
"chars": 2383,
"preview": "import { parse } from 'svg-parser'\nimport hastToBabelAst from '@svgr/hast-util-to-babel-ast'\nimport { transformFromAstSy"
},
{
"path": "packages/plugin-jsx/tsconfig.json",
"chars": 56,
"preview": "{\n \"extends\": \"../../tsconfig\",\n \"include\": [\"src\"]\n}\n"
},
{
"path": "packages/plugin-prettier/.npmignore",
"chars": 8,
"preview": "src/\n.*\n"
},
{
"path": "packages/plugin-prettier/CHANGELOG.md",
"chars": 4344,
"preview": "# Change Log\n\nAll notable changes to this project will be documented in this file.\nSee [Conventional Commits](https://co"
},
{
"path": "packages/plugin-prettier/README.md",
"chars": 583,
"preview": "# @svgr/plugin-prettier\n\n[](https://travis-ci.org/smo"
},
{
"path": "packages/plugin-prettier/package.json",
"chars": 1082,
"preview": "{\n \"name\": \"@svgr/plugin-prettier\",\n \"description\": \"Format code using Prettier\",\n \"version\": \"8.1.0\",\n \"main\": \"./d"
},
{
"path": "packages/plugin-prettier/src/index.test.ts",
"chars": 2057,
"preview": "/* eslint-disable @typescript-eslint/no-var-requires */\nimport prettier from '.'\n\nconst state = { componentName: 'Foo' }"
},
{
"path": "packages/plugin-prettier/src/index.ts",
"chars": 584,
"preview": "import { format, resolveConfig } from 'prettier'\n// @ts-ignore\nimport deepmerge from 'deepmerge'\nimport type { Plugin } "
},
{
"path": "packages/plugin-prettier/tsconfig.json",
"chars": 56,
"preview": "{\n \"extends\": \"../../tsconfig\",\n \"include\": [\"src\"]\n}\n"
},
{
"path": "packages/plugin-svgo/.npmignore",
"chars": 53,
"preview": "/*\n/dist/*\n!/dist/index.{d.ts,js}\n!/dist/index.js.map"
},
{
"path": "packages/plugin-svgo/CHANGELOG.md",
"chars": 6564,
"preview": "# Change Log\n\nAll notable changes to this project will be documented in this file.\nSee [Conventional Commits](https://co"
},
{
"path": "packages/plugin-svgo/README.md",
"chars": 552,
"preview": "# @svgr/plugin-svgo\n\n[](https://travis-ci.org/smooth-"
},
{
"path": "packages/plugin-svgo/package.json",
"chars": 1085,
"preview": "{\n \"name\": \"@svgr/plugin-svgo\",\n \"description\": \"Optimize SVG\",\n \"version\": \"8.1.0\",\n \"main\": \"./dist/index.js\",\n \""
},
{
"path": "packages/plugin-svgo/src/__snapshots__/index.test.ts.snap",
"chars": 3275,
"preview": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`svgo does not load runtime configuration with \\`runtimeConfig: fals"
},
{
"path": "packages/plugin-svgo/src/config.test.ts",
"chars": 1317,
"preview": "import { getSvgoConfig } from './config'\n\nconst state = { componentName: 'Icon' }\n\ndescribe('#getSvgoConfig', () => {\n "
},
{
"path": "packages/plugin-svgo/src/config.ts",
"chars": 1163,
"preview": "import { cosmiconfigSync } from 'cosmiconfig'\nimport type { Config, State } from '@svgr/core'\n\nconst explorer = cosmicon"
},
{
"path": "packages/plugin-svgo/src/index.test.ts",
"chars": 3165,
"preview": "import * as path from 'path'\nimport svgo from '.'\n\nconst state = { componentName: 'SvgComponent' }\n\nconst baseSvg = `<?x"
},
{
"path": "packages/plugin-svgo/src/index.ts",
"chars": 471,
"preview": "import { optimize } from 'svgo'\nimport { getSvgoConfig } from './config'\nimport type { Plugin } from '@svgr/core'\n\nconst"
},
{
"path": "packages/plugin-svgo/tsconfig.json",
"chars": 56,
"preview": "{\n \"extends\": \"../../tsconfig\",\n \"include\": [\"src\"]\n}\n"
},
{
"path": "packages/rollup/.npmignore",
"chars": 53,
"preview": "/*\n/dist/*\n!/dist/index.{d.ts,js}\n!/dist/index.js.map"
},
{
"path": "packages/rollup/CHANGELOG.md",
"chars": 9875,
"preview": "# Change Log\n\nAll notable changes to this project will be documented in this file.\nSee [Conventional Commits](https://co"
},
{
"path": "packages/rollup/README.md",
"chars": 1976,
"preview": "# @svgr/rollup\n\n[](https://travis-ci.org/smooth-code/"
},
{
"path": "packages/rollup/package.json",
"chars": 1431,
"preview": "{\n \"name\": \"@svgr/rollup\",\n \"description\": \"SVGR Rollup plugin.\",\n \"version\": \"8.1.0\",\n \"main\": \"./dist/index.js\",\n "
},
{
"path": "packages/rollup/src/__snapshots__/index.test.ts.snap",
"chars": 5021,
"preview": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`rollup loader should convert file 1`] = `\n\"var _path;\nfunction _ext"
}
]
// ... and 70 more files (download for full content)
About this extraction
This page contains the full source code of the gregberge/svgr GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 270 files (506.3 KB), approximately 163.5k tokens, and a symbol index with 90 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.