react-svgs 🚀

Transform a directory of SVG files into one easily usable React component.

Installation

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

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.

// package.json

{
    "scripts": {
        "svg": "react-svgs -i src/assets/svg -o src/components/vector -n Vector -t"
    }
}

// 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 | ❌ |

🔸 name prop must be one of the strings exported in types.js or types.ts - if using TypeScript this will be enforced.

Basic Example

// src/components/settings-icon/index.jsx

import React from "react"
import SVG from "../svg"

export const SettingsIcon = () => (
    <SVG
        name="settings"
        className="settings-icon"
        style={{fill: "red"}}
    />
);

Complete Example

This example demonstrates using a "wrapper" component around the generated component.

// 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:

npm run icons
yarn icons
react-svgs

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

// 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 (
        <SVG
            name={icon}
            style={{
                width: sizePx,
                height: sizePx
            }}
        />
    );
};

Assumptions

• SVG file names must contain only letters or hyphens, such as:
  • settings.svg -> settings
  • alarm-clock.svg -> alarmClock