README.md

@react-vector-graphics/plugin-github

Usage

The plugin works in two stages discovery and storage.

{
    "plugins": [
        "@react-vector-graphics/plugin-github",
        "@svgr/plugin-svgo",
        "@react-vector-graphics/plugin-github"
    ],
    "options": {
        "assets/globPattern": "assets/*.svg",
        "assets/fileExt": "js",
        "assets/nameScheme": "PascalCase",
        "assets/outputPath": "components",
        "github/folderPath": "src",
        "github/head": "current-branch-or-commit"
    }
}

Discovery

This should be run before any other plugin that relies on having the svg code in the state.

It uses the globPattern supplied to find matching files and loaded them into the process.

Splitting off a new branch for each discovered file adding it to the state.

{
    "componentName": "BarIcon",
    "filePath": "assets/bar.icon.svg"
}

{
    "componentName": "FooIcon",
    "filePath": "assets/foo.icon.svg"
}

Storage

At the end of all state manipulations, the plugin is the run with the updated state.

Saving each icon in the output folder as well as any componentFiles that have been added.

Options

Fixed options that do not change through run lifecycle. Any option without a default is Required.

github/api

Octokit powered github rest api, see octokit rest.js

This will need push access to the repository to commit the file changes.

github/base

Base to compare changes in head against.

Default: master

github/commitCreate

Pattern used when commit a newly added svg react component.

Default: feat: ${message}

The ${message} portion is replaced with 'add ComponentName fileName.fileExt' before committing.

github/commitDelete

Pattern used when deleting a remove svg component.

Default: refactor: ${message}\nBREAKING CHANGE: ${message}

The ${message} portion is replaced with 'removed ComponentName' before committing.

github/commitUpdate

Pattern used when updating an svg react component.

Default: fix: ${message}

The ${message} portion is replaced with 'modify ComponentName fileName.fileExt' before committing.

assets/fileExt

The file extension that is used to write the react component file

Default: ''

NOTE: This is shared with @react-vector-graphics/plugin-assets

github/folderPath

The base folder for all actions in the repository.

Default: ''

assets/globPattern

Glob string pattern, see minimatch

NOTE: This is shared with @react-vector-graphics/plugin-assets

github/head

The current commit or branch ref that has the svg changes.

assets/nameScheme

String reprenting the naming scheme used to tranform the icon filename to a component name

Supported schemes
camelCase
PascalCase
CONSTANT_CASE
snake_case
spinal-case

Default: PascalCase

NOTE: This is shared with @react-vector-graphics/plugin-assets

assets/outputPath

String pointing to final location all react components are stored in.

NOTE: This is shared with @react-vector-graphics/plugin-assets

github/owner

The repository owner e.g. tophat.

github/repo

The repository name e.g. react-vector-graphics.

State

Mutable context that can be used to pass information between subsequent run stages

componentName

String representing the name of the react component.

NOTE: This is shared with @svgr/plugin-jsx

filePath

String representing the path to the svg file that was discovered

NOTE: This is shared with @svgr/plugin-jsx

assets/componentFiles

Map of file names to content that are associated with the generated components.

If this is a non empty map then a component folder is used instead of a single file.

Example having this in the state

{
    "componentName": "FooIcon",
    "filePath": "assets/foo.icon.svg",
    "assets/componentFiles": {
        "README.md": "# FooIcon"
    }
}

Would result in

src/components/FooIcon/index.js # svg component code
src/components/FooIcon/README.md

NOTE: This is shared with @react-vector-graphics/plugin-assets

github/componentNameOld

This is only set when an svg file has been marked as moved/renamed by github.

This will result in the a new component being added at componentName and the componentNameOld being deleted.

github/diffType

This status indicates the type of change for the svg file discovered.

Statuses
added
modified
removed
renamed