svgr custom index-template.tsx

svgr-custom-index-template.tsx

const path = require('path')

function defaultIndexTemplate(filePaths) {
  // named exportの定義
  const exportEntries = filePaths.map((filePath) => {
    const basename = path.basename(filePath, path.extname(filePath))
    const exportName = /^\d/.test(basename) ? `Svg${basename}` : basename
    return `
import Icon${exportName} from './${basename}'
export { Icon${exportName} }`
  })

  // StorybookでIconを一覧表示するため
  const allIconsStory = filePaths.map((filePath) => {
    const basename = path.basename(filePath, path.extname(filePath))
    const exportName = /^\d/.test(basename) ? `Svg${basename}` : basename
    return `      <HStack><Icon${exportName} width={20} height={20} {...args} /><span>${exportName}</span></HStack>`
  })

  // ここから左記が実際ファイルとして出力される部分。上記で処理した文字列を入れる
  return `
import { Story } from '@storybook/react/types-6-0'
import React from 'react'
import { colors, Colors } from '../../styles/colors'
import { VStack, HStack } from '../Stack'
${exportEntries.join('\n')}

// for storybook
export default {
  title: 'Icons',
  args: {
    color: colors.blueBase,
  },
}

type AllIconsProps = {
  color: Colors,
}
export const AllIcons: Story<AllIconsProps> = (args) => {
  return (
    <VStack>
${allIconsStory.join('\n')}
    </VStack>
  )
}
`
}

module.exports = defaultIndexTemplate