Skip to content

Commit

Permalink
docs: 858 Index template docs improvements (#872)
Browse files Browse the repository at this point in the history
  • Loading branch information
balsick authored May 14, 2023
1 parent a6699e7 commit 82928f0
Show file tree
Hide file tree
Showing 2 changed files with 38 additions and 2 deletions.
2 changes: 1 addition & 1 deletion website/pages/docs/cli.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,7 @@ Advanced use cases could lead you to customize the index template. The `--index-
const path = require('path')

function defaultIndexTemplate(filePaths) {
const exportEntries = filePaths.map(({ path: filePath }) => {
const exportEntries = filePaths.map(({ path: filePath, originalPath }) => {
const basename = path.basename(filePath, path.extname(filePath))
const exportName = /^\d/.test(basename) ? `Svg${basename}` : basename
return `export { default as ${exportName} } from './${basename}'`
Expand Down
38 changes: 37 additions & 1 deletion website/pages/docs/custom-templates.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,12 @@ module.exports = {

When you use the CLI with `--out-dir` option, an index file is automatically generated.

The customization is the same, a file that exports a function:
The customization is the same, a file that exports a function. The function receives an argument that is an array containing objects made of the original file path and the path of the file containing the generated React component:

- `originalPath`: the original file's path
- `path`: the React component's file's path

Default template only uses `path` and it is similar to this:

```js
const path = require('path')
Expand All @@ -116,6 +121,37 @@ function defaultIndexTemplate(filePaths) {
module.exports = defaultIndexTemplate
```

but you could implement a more advanced template exploiting the original file name too:

```js
const path = require('path')

function defaultIndexTemplate(filePaths) {
const entries = filePaths.map(({ path: filePath, originalPath }) => {
const originalFileName = path.basename(
originalPath,
path.extname(originalPath),
)
const basename = path.basename(filePath, path.extname(filePath))
const exportName = /^\d/.test(basename) ? `Svg${basename}` : basename
const importLine = `import ${exportName} from './${basename}';`
const mapLine = `${
/.*[.-].*/.test(originalFileName)
? `'${originalFileName}'`
: originalFileName
}: ${exportName}`
return { importLine, mapLine }
})
return `${entries.map(({ importLine }) => importLine).join('\n')}
export const map = {
${entries.map(({ mapLine }) => mapLine).join(',\n')}
}
`
}

module.exports = defaultIndexTemplate
```

### Use with CLI

You can use component template in the CLI:
Expand Down

1 comment on commit 82928f0

@vercel
Copy link

@vercel vercel bot commented on 82928f0 May 14, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

svgr – ./

svgr-git-main-gregberge.vercel.app
svgr-gregberge.vercel.app
api.react-svgr.com

Please sign in to comment.