Svgr: Generate index.js when `--out-dir` option is used

[gregberge]

As suggested in #161, we could generate an index.js containing all icons when we use --out-dir option.

Be careful to be compatible with #182.

[sis]

This package may help https://github.com/gajus/create-index

[kushalmahajan]

@sis @gregberge the package above doesn't have options to generate index.ts. Rest all good.

Open issue here - https://github.com/gajus/create-index/issues/48

[kushalmahajan]

Here, I have written a tiny nodejs script to achieve the same after create-index generates an index.js ( I have a Typescript project ).
Basically I had to replace .tsx from all import statements in index.js. Second, I had to rename it to index.ts.

const path = require("path");
const fs = require("fs");

const filePath = path.join("src", "icons");
const fileName = "index.js";

fs.readFile(`${filePath}/${fileName}`, "utf8", (err, data) => {
    if (err) throw err;
    const newStr = data.replace(/.tsx/g, "");
    fs.writeFile(`${filePath}/${fileName}`, newStr, writeErr => {
        if (writeErr) throw err;
        fs.rename(`${filePath}/${fileName}`, `${filePath}/index.ts`, renameErr => {
            if (renameErr) throw renameErr;
            console.log("rename completed");
        });
    });
});

package.json scripts as follows:

"build-icons": "rm -rf src/icons && npx @svgr/cli -d src/icons svg-icons --ext tsx",
"create-index": "npx create-index src/icons --extensions tsx",
"recreate-index": "node scripts/regenerate-icon-index.js",
"lint:icons": "eslint './src/icons/*.{ts,tsx}' --fix",
"generate-icons": "yarn run build-icons && yarn run create-index && yarn run recreate-index && yarn run lint:icons"

[kelly-tock]

could we have semicolons at the end of the default template or an example of how to customize it?

[gregberge]

Custom templates are now supported. A next step would be to run prettier on the index file. Do you want to submit a PR to do it?

[kelly-tock]

Figured it out in a different issue, thanks!