# react-svgs
> Transform a directory of SVG files into an easily usable React component.
Latest version **0.3.17** (published 2024-03-26) · MIT license · 0 weekly downloads
## Install
```sh
npm install react-svgs
pnpm add react-svgs
yarn add react-svgs
bun add react-svgs
```
Provides the command `react-svgs`.
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support; pre 1.0.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 0.3.17 |
| Published | 2024-03-26 |
| First published | 2022-03-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 23.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | Rob Wilkie |
| Maintainers | wllkle |
| Keywords | react, svg, icons, script, devtools |
## Links
- npm: https://www.npmjs.com/package/react-svgs
- Repository: https://github.com/wllkle/react-svgs
- Homepage: https://wilkie.io/projects/react-svgs
- Issues: https://github.com/wllkle/react-svgs/issues
- npm.io page: https://npm.io/package/react-svgs
## Dependencies (4)
- [svgo](https://npm.io/package/svgo.md) ^2.8.0
- [yargs](https://npm.io/package/yargs.md) ^17.3.0
- [svgson](https://npm.io/package/svgson.md) ^5.2.1
- [cli-color](https://npm.io/package/cli-color.md) ^2.0.1
## Alternatives
- [@fortawesome/react-fontawesome](https://npm.io/package/@fortawesome/react-fontawesome.md) — 2.2M weekly downloads
- [roboto-fontface](https://npm.io/package/roboto-fontface.md) — 196.0K weekly downloads
- [@react-native-vector-icons/common](https://npm.io/package/@react-native-vector-icons/common.md) — 150.4K weekly downloads
- [@procore/core-icons](https://npm.io/package/@procore/core-icons.md) — 4.6K weekly downloads
- [@react-md/material-icons](https://npm.io/package/@react-md/material-icons.md) — 1.6K weekly downloads
## Recent versions
- 0.3.17 (latest) — 2024-03-26
- 0.3.16 — 2024-03-26
- 0.3.15 — 2022-03-31
- 0.3.14 — 2022-03-31
- 0.3.13 — 2022-03-31
- 0.3.12 — 2022-03-31
- 0.3.11 — 2022-03-30
- 0.3.10 — 2022-03-30
- 0.3.9 — 2022-03-19
- 0.3.8 — 2022-03-19
- 0.3.6 — 2022-03-19
- 0.3.5 — 2022-03-19
- 0.3.4 — 2022-03-19
- 0.3.3 — 2022-03-19
- 0.3.2 — 2022-03-19
- … 30 more at https://npm.io/package/react-svgs/versions
## README
# react-svgs 🚀
Transform a directory of SVG files into one easily usable React component.
## Installation
```shell
npm i -D react-svgs
yarn add -D react-svgs
```
## Usage
This tool can be used in two ways; with command line arguments or with a config object (`svg`) in your `package.json`
file.
### Command Line Arguments
```shell
react-svgs -i src/assets/svg -o src/components/vector -t
```
This will take SVG files from directory `src/assets/svg` and generate TypeScript files containing the component and SVG
data. From the directory where the command is executed; the generated files will be:
- `src/components/vector/index.tsx` - component
- `src/components/vector/types.ts` - SVG data, TypeScript types (if `-t` flag is provided)
### Parameters
| Parameter | Description | Type | Required |
|----------------------|---------------------------------------------|---------|----------|
| `--input`, `-i` | Path to directory containing SVG files | string | ✔ |
| `--out`, `-o` | Output path (directory will be created) | string | ✔ |
| `--name`, `-n` | Generated React component name | string | ❌ |
| `--typescript`, `-t` | Output TypeScript files | boolean | ❌ |
| `--force`, `-f` 🔸 | Overwrite existing component file | boolean | ❌ |
| `--nojsx` | Use `.js` / `.ts` file extensions | boolean | ❌ |
| `--proptypes` | Generate PropTypes definition for component | boolean | ❌ |
🔸 _SVG data file is always overwritten to ensure it is up to date._
### Usage in package.json
The scripts below can be run using `npm run svg`, both examples achieve the same result.
```json5
// package.json
{
"scripts": {
"svg": "react-svgs -i src/assets/svg -o src/components/vector -n Vector -t"
}
}
```
```json5
// package.json
{
"scripts": {
"svg": "react-svgs"
},
"svg": {
"input": "src/assets/svg",
"output": "src/components/vector",
"name": "Vector",
"typescript": true
}
}
```
### Component Usage
#### Props
| Prop | Type | Required |
|-----------|-------------------------------------------------------------------|----------|
| name 🔸 | string | ✔ |
| className | string | ❌ |
| style | [CSSProperties](https://reactjs.org/docs/dom-elements.html#style) | ❌ |
🔸 _name prop must be one of the strings exported in `types.js` or `types.ts` - if using TypeScript this will be
enforced._
#### Basic Example
```typescript jsx
// src/components/settings-icon/index.jsx
import React from "react"
import SVG from "../svg"
export const SettingsIcon = () => (
);
```
#### Complete Example
This example demonstrates using a "wrapper" component around the generated component.
```json5
// package.json
{
"scripts": {
"icons": "react-svgs"
},
"svg": {
"input": "src/assets",
"output": "src/components/icon/svg",
"typescript": true
}
}
```
Run the script using one of the following commands:
```shell
npm run icons
yarn icons
react-svgs
```
```json5
// project structure
before after
------ -----
src src
├── assets ├── assets
│ ├── alarm-clock.svg │ ├── alarm-clock.svg
│ └── settings.svg │ └── settings.svg
├── components ├── components
│ └── icon │ └── icon
│ └── index.tsx │ ├── index.tsx
└── package.json │ └── svg
│ ├── index.tsx
│ └── types.ts
└── package.json
```
```typescript jsx
// src/components/icon/index.tsx
import React from "react";
import SVG, {SVGTypes} from "./svg";
interface IconProps {
icon: SVGTypes,
size: "small" | "medium" | "large"
}
export const Icon = ({icon, size}: IconProps) => {
const sizePx = size === "small" ? "10px" : "20px";
return (
);
};
```
## Assumptions
- SVG file names must contain only letters or hyphens, such as:
- `settings.svg` -> `settings`
- `alarm-clock.svg` -> `alarmClock`
---
_Source: https://npm.io/package/react-svgs · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._