react-svgs

0.3.17 • Public • Published

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

Package Sidebar

Install

npm i react-svgs

Weekly Downloads

0

Version

0.3.17

License

MIT

Unpacked Size

24 kB

Total Files

4

Last publish

Collaborators

  • wllkle