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:

import Logo from './logo.jsx';
import Icon from './icon.jsx';

const SVGPreview = () => {
    return (
        <div style={{padding: '60px'}}>
            <p>Logo:</p> <br/><ArrowSvg/> <br/> <br/> <br/> <br/>
            <p>Icon:</p> <br/><BedSvg/> <br/> <br/> <br/> <br/>
        </div>
    )
}

export {
    SVGPreview,
    Logo,
    Icon
};

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

import { SVGPreview } from './my-svg-folder';

// ...

<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.