jsx-svg-preview

jsx-svg-preview is a package that simplifies the process of converting SVG files to JSX files in a ReactJS project. It also creates an index.js file that exports all SVG components and a preview component.

Installation

---

You can install the package via npm:

npm install jsx-svg-preview

Usage

---

To use the package, simply run the following command:

jsp -p <path-to-svg-folder>

The -p option is a required parameter that specifies the path to the SVG folder.

Example

---

Suppose you have an SVG folder in your project with the following files:

my-svg-folder/
├── logo.svg
└── icon.svg

You can convert these SVG files into React components using jsp as follows:

jsp -p <path-to-svg-folder>

This will generate the following files:

my-svg-folder/
├── logo.jsx
├── icon.jsx
└── index.js

index.js will contain the following code:

1import Logo from './logo.jsx';
2import Icon from './icon.jsx';
3
4const SVGPreview = () => {
5    return (
6        <div style={{padding: '60px'}}>
7            <p>Logo:</p> <br/><ArrowSvg/> <br/> <br/> <br/> <br/>
8            <p>Icon:</p> <br/><BedSvg/> <br/> <br/> <br/> <br/>
9        </div>
10    )
11}
12
13export {
14    SVGPreview,
15    Logo,
16    Icon
17};

You can use the SVGPreview component to preview your SVG images on a separate page:

1import { SVGPreview } from './my-svg-folder';
2
3// ...
4
5<Route exact path="/svg" element={<SVGPreview />} />

This will display all SVG components on a separate page.

License

---

This package is licensed under the MIT license. See the LICENSE file for more information.

Contributing

---

Contributions to this package are always welcome! Please see the CONTRIBUTING file for more information.

Issues

---

If you encounter any issues or bugs, please create an issue on the issue tracker on GitHub.

GitHub

---

Visit the GitHub repository for this package.