https://github.com/budavariam/babel-react-extract-svg
A quick proof of concept babel plugin that refactors a react codebase to extract inline svg as separate svg files.
https://github.com/budavariam/babel-react-extract-svg
babel babel-plugin create-react-app refactoring refactoring-tools svg
Last synced: 3 months ago
JSON representation
A quick proof of concept babel plugin that refactors a react codebase to extract inline svg as separate svg files.
- Host: GitHub
- URL: https://github.com/budavariam/babel-react-extract-svg
- Owner: budavariam
- License: mit
- Created: 2020-05-09T12:19:39.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T05:24:04.000Z (over 3 years ago)
- Last Synced: 2025-12-28T13:33:40.983Z (6 months ago)
- Topics: babel, babel-plugin, create-react-app, refactoring, refactoring-tools, svg
- Language: JavaScript
- Size: 4.04 MB
- Stars: 1
- Watchers: 1
- Forks: 1
- Open Issues: 21
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Babel React Extract SVG
A quick proof of concept babel plugin that refactors a react codebase
to extract inline svg as separate svg files.
Main inspiration: I learned that you can
[import svg files as components](https://create-react-app.dev/docs/adding-images-fonts-and-files#adding-svgs)
with create-react-app.
## Getting started
```bash
yarn
yarn run svg-extract
```
## Expected structure
It expects that the icons are loccated in a certain folder.
The icons are js filles that contain svg assets as function components.
More assets can be stored in a single file.
```js
import React from "react"
export const logo = ({ width, height }) => (
)
```
## Generated structure
It extracts the top level svg components from these kind of js files,
and saves them to a separate place.
For project backward compatibility it keeps the file structure,
and the variables to export.
I think it is better to export them here,
if any extra logic needed they can manipulate props in these js files.
```js
import React from "react"
import { ReactComponent as Logo } from "../icons/logo.svg"
export const logo = (width, height) => ()
```
> NOTE: This plugin is meant to be run only one time,
> while refactoring code to this approach from the previous one.
## Disclaimer
This is my fist ever babel plugin.
This code is not prepared for any kind of case, I made it to have some fun.
I just wanted to try if babel can save me many hours of
repetitive copy/paste file creation, function renaming work.
I'm happy that it worked exactly as I wanted it to be.
It should not do anything desctructive, but I'm sure
it won't work for the first time in any repository that has different constrains.