Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/a1exalexander/svg-to-react
CLI tool for generating React icons from SVG files
https://github.com/a1exalexander/svg-to-react
react svg
Last synced: 3 days ago
JSON representation
CLI tool for generating React icons from SVG files
- Host: GitHub
- URL: https://github.com/a1exalexander/svg-to-react
- Owner: a1exalexander
- Created: 2024-02-15T16:36:34.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2024-02-21T15:34:14.000Z (11 months ago)
- Last Synced: 2025-01-01T20:53:43.205Z (6 days ago)
- Topics: react, svg
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/@onlyredcats/svg-to-react
- Size: 23.4 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# @onlyredcats/svg-to-react
This is a CLI tool for generating React icons from SVG files. It generates a React component for each SVG file and exports them as a single module with a common interface and types for the icons.
## Installation
To install the package run the following command:
```bash
npm install @onlyredcats/svg-to-react
```
## Usage
Use the following command to generate React icons from SVG files:
```bash
svg-to-react --input="./src/assets/" --output="./src/components/Icon/" --clean
```
In this command:
- `--input` specifies the path to the directory where the SVG files are located.
- `--output` specifies the path to the output directory where the generated React icon files will be saved.
- `--clean` flag is optional and specifies whether to clean width, height and fill attributes from the SVG files in input directory. By default, it is set to `false`.
## Example
Let's assume you have the following directory structure:
```
my-project/
├── src/
│ ├── assets/
│ │ ├── icon1.svg
│ │ └── icon2.svg
│ └── components/
│ └── common/
│ └── Icon/
└── package.json
```
To generate React icons from SVG files in the `src/assets` directory and save them in `src/components/common/Icon`, you can run the mentioned command
```bash
svg-to-react --input="./src/assets/" --output="./src/components/Icon/"
```
After running CLI command, the `src/components/common/Icon` directory will contain generated React icon files based on the SVG files.
```
my-project/
├── src/
│ ├── assets/
│ │ ├── icon1.svg
│ │ └── icon2.svg
│ ├── components/
│ │ ├── common/
│ │ │ ├── Icon/
│ │ │ │ ├── Icon.tsx
│ │ │ │ ├── icons.ts
│ │ │ │ ├── index.tsx
│ │ │ │ └── types.ts
└── package.json
```
### Generated files
`Icon.tsx` - contains the React component for the icon.
```tsx
import {CSSProperties, DOMAttributes, FC, FunctionComponent, memo, SVGProps} from 'react';
import * as iconComponents from './icons';
import { IconType } from './types';
export interface IconProps {
className?: string;
name: IconType;
size?: number;
width?: number;
height?: number;
fill?: string;
style?: CSSProperties;
onClick?: DOMAttributes['onClick'];
}
export const iconTestId = 'icon';
const getIconName = (name: IconType) => `Icon${name}`;
export const Icon: FC = memo(({ className, name, fill = 'currentColor', size, width, height, style, onClick, ...rest }) => {
const IconComponent =
(iconComponents[getIconName(name) as keyof typeof iconComponents] as FunctionComponent>) ||
null;
return (
IconComponent && (
)
);
});
```
`icons.ts` - contains the imports of the icons.
```ts
export { ReactComponent as IconIcon1 } from '../../svg/icon1.svg';
export { ReactComponent as IconIcon2 } from '../../svg/icon2.svg';
```
`index.tsx` - contains the exports of the icons.
```tsx
export * from './Icon';
export * from './types';
```
`types.ts` - contains the types of the icons.
```ts
export const iconNames = [
'icon1',
'icon2',
] as const;
export type IconType = typeof iconNames[number];
```
## Contributing
Contributions are welcome. Please open an issue or submit a pull request.
## Author
Oleksandr Ratushnyi
[https://sashkoratushnyi.com](https://sashkoratushnyi.com)
## License
This package is distributed under the MIT license.