// Configuration for SVGR, a tool that transforms SVG files into React components.
// To use, add your raw SVG files to the "./svg" folder and run the following command:
// pnpm dlx @svgr/cli --index-template ./index-template.js --typescript --out-dir ../library ./svg
// This command uses the settings defined in "./index-template.js" and "./svgr-template.js".

import svgrTemplate from './svgr-template.ts'

const config = {
  exportType: 'named',
  typescript: true,
  template: svgrTemplate,
  replaceAttrValues: {
    '#141921': 'currentColor',
  },
  icon: 16,
  svgo: true,
  svgoConfig: {
    plugins: [
      {
        name: 'removeAttrs',
        params: {
          // Remove stroke-width regardless of case
          attrs: '(stroke-width|strokeWidth)',
        },
      },
      {
        name: 'addAttributesToPaths',
        description:
          'Adds vectorEffect="non-scaling-stroke" to every <path> element.',
        fn: () => ({
          element: {
            enter: (node) => {
              if (node.name === 'path') {
                node.attributes = node.attributes || {}
                node.attributes.vectorEffect = 'non-scaling-stroke'
              }
            },
          },
        }),
      },
    ],
  },
  prettier: true,
  prettierConfig: {
    semi: false,
    singleQuote: true,
    printWidth: 80,
    endOfLine: 'auto',
    trailingComma: 'all',
    tailwindFunctions: ['clsx', 'cn'],
    overrides: [
      {
        files: '*.yaml',
        options: {
          bracketSpacing: false,
        },
      },
    ],
  },
}

export default config