# iconos

> Transform all svg from the current folder to react components elements

Latest version **1.0.8** (published 2023-06-08) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install iconos
pnpm add iconos
yarn add iconos
bun add iconos
```

Provides the command `iconos`.

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.8 |
| Published | 2023-06-08 |
| First published | 2023-03-17 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 5 |
| Unpacked size | 5.4 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | Benoit Carquillat & Tymate |
| Maintainers | benoitcarquillat |

## Links

- npm: https://www.npmjs.com/package/iconos
- npm.io page: https://npm.io/package/iconos

## Dependencies (5)

- [fs](https://npm.io/package/fs.md) 0.0.1-security
- [path](https://npm.io/package/path.md) ^0.12.7
- [prompts](https://npm.io/package/prompts.md) ^2.4.2
- [prettier](https://npm.io/package/prettier.md) ^2.8.4
- [@svgr/core](https://npm.io/package/@svgr/core.md) ^6.5.1

## Recent versions

- 1.0.8 (latest) — 2023-06-08
- 1.0.7 — 2023-04-24
- 1.0.6 — 2023-03-24
- 1.0.5 — 2023-03-22
- 1.0.4 — 2023-03-22
- 1.0.3 — 2023-03-22
- 1.0.2 — 2023-03-20
- 1.0.1 — 2023-03-17
- 1.0.0 — 2023-03-17

## README

# SVG to React Component CLI

This command-line interface (CLI) tool converts SVG files into React components from your current folder.
It allows developers to easily import SVG icons into their React projects.

## Quick start

Go to your folder with your list of svgs and run:

```
cd paths/to/your/svg/files
npx iconos
```

## Installation (optional) if you want to use the cli without npx.

To use this tool, you must first install it by running the following commands:

```
npm install -g iconos
```

## Usage

Once the tool is installed, you can run the following command in the folder containing your SVG files:

```
iconos
```

This command will convert all SVG files in the current folder into React components and save them in a new folder called Iconos.

ex:
your svg in your folder:

- bell.svg

```
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.73 21C13.5542 21.3031 13.3018 21.5547 12.9982 21.7295C12.6946 21.9044 12.3504 21.9965 12 21.9965C11.6496 21.9965 11.3054 21.9044 11.0018 21.7295C10.6982 21.5547 10.4458 21.3031 10.27 21M18 8C18 6.4087 17.3679 4.88258 16.2426 3.75736C15.1174 2.63214 13.5913 2 12 2C10.4087 2 8.88258 2.63214 7.75736 3.75736C6.63214 4.88258 6 6.4087 6 8C6 15 3 17 3 17H21C21 17 18 15 18 8Z" stroke="#101828" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
```

Will create Bell.tsx in a components folder.

```
import { SVGProps } from 'react';

const Bell = (props: SVGProps<SVGSVGElement> & { size?: number }) => (
  <svg
    width="1em"
    height="1em"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    {...props}
    style={{ ...props.style, color: props.color, fontSize: props.size }}
  >
    <path
      d="M13.73 21C13.5542 21.3031 13.3018 21.5547 12.9982 21.7295C12.6946 21.9044 12.3504 21.9965 12 21.9965C11.6496 21.9965 11.3054 21.9044 11.0018 21.7295C10.6982 21.5547 10.4458 21.3031 10.27 21M18 8C18 6.4087 17.3679 4.88258 16.2426 3.75736C15.1174 2.63214 13.5913 2 12 2C10.4087 2 8.88258 2.63214 7.75736 3.75736C6.63214 4.88258 6 6.4087 6 8C6 15 3 17 3 17H21C21 17 18 15 18 8Z"
      stroke="currentColor"
      strokeWidth={2}
      strokeLinecap="round"
      strokeLinejoin="round"
    />
  </svg>
);

export default Bell;
```

---
_Source: https://npm.io/package/iconos · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._