Nicely Presented Misnomer

    react-svgs

    0.3.15 • 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

    Install

    npm i react-svgs

    DownloadsWeekly Downloads

    2

    Version

    0.3.15

    License

    MIT

    Unpacked Size

    24 kB

    Total Files

    4

    Last publish

    Collaborators

    • wllkle