@heydovetail/svg-to-react
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.2 • Public • Published

    NPM version CircleCI badge Greenkeeper badge Module formats

    Utilising a simple CLI and your existing SVG files, svg-to-react allows you to generate optimised React components from your SVG files. With sensible (but overridable defaults), it takes the pain out of integrating SVG images into your React project.

    By generating files, svg-to-react lets you commit React components to SCM, so you stay in complete control of final production assets.

    Features

    • Uses SVGO to minify SVG data
    • React props for size and color
    • SVG scale preserved via viewport
    • Import in TypeScript or JavaScript
    • Modules formatted via Prettier
    • Tiny bundle size
    • CLI interface

    Usage

    Install via NPM, then run:

    npm install --save-dev @heydovetail/svg-to-react
    svg-to-react your/project/path

    svg-to-react will search a directory tree for __svgs__ folders containing SVG files (files with an .svg extension). For each file, a TypeScript module will be created in the parent directory containing a React component for the SVG.

    Example:

    $ tree icons/
    icons/
    └── __svgs__
        ├── arrow-down-mini.svg
        └── arrow-down.svg
    $ npm install -g @heydovetail/svg-to-react
    $ svg-to-react icons
    $ tree icons/
    icons/
    ├── ArrowDown.tsx
    ├── ArrowDownMini.tsx
    └── __svgs__
        ├── arrow-down-mini.svg
        └── arrow-down.svg
    

    You can now use those in your React components:

    import * as React from "react";
    import ArrowDown from "./icons/ArrowDown";
     
    export function MyDownButton() {
      return (
        <button>
          <span>
            Down <ArrowDown size={48} color="red" />
          </span>
        </button>
      );
    }

    React component props

    type CssValue = number | string;
     
    interface Size {
      width?: CssValue;
      height?: CssValue;
    }
     
    interface Props {
      color?: string;
      size?: CssValue | Size;
    }

    Configuration (.config.json)

    A .config.json file in __svgs__ can be used to provide configuration.

    color (optional)

    Default: omitted

    Example: Specify that the color #000000 should be overridable via the color prop.

    {
      "color": "#000000"
    }

    moduleNameTemplate (optional)

    Default: {capitalizedCamelBaseNameNoExt}.tsx

    Example: Specify that modules should use .tsx extension.

    {
      "moduleNameTemplate": "{capitalizedCamelBaseNameNoExt}.tsx"
    }

    Available variables:

    Variable Example (foo-Bar_baz.svg)
    baseName foo-Bar_baz.svg
    baseNameNoExt foo-Bar_baz
    camelBaseName fooBarBaz.svg
    camelBaseNameNoExt fooBarBaz
    capitalizedCamelBaseName FooBarBaz.svg
    capitalizedCamelBaseNameNoExt FooBarBaz

    NPM script

    It's convenient to add a NPM script to your project, so that you can choose supply the root directoy:

    Example:

    {
      "scripts": {
        "generate:types": "svg-to-react src/"
      }
    }

    Keywords

    none

    Install

    npm i @heydovetail/svg-to-react

    DownloadsWeekly Downloads

    1

    Version

    1.1.2

    License

    Apache-2.0

    Unpacked Size

    199 kB

    Total Files

    53

    Last publish

    Collaborators

    • cmanou
    • releasebot-dovetail
    • bradley.ayers
    • humphreybc