Custom configs for different paths?

[fatso83]

Is there a way I can use this plugin so that it treats different paths differently? I would like to treat an icon package with some custom options and one way I would do that in webpack is like this, using two matchers:

const svgrOptionsForUnicons = {
  svgProps: {
    height: 24,
    width: 24,
  },
}

module.exports.webpackRules = [
  {
    test: uniconsRegExp,
    use: [
      {
        loader: '@svgr/webpack',
        options: svgrOptionsForUnicons,
      },
    ],
  },
  {
    test: function (path) {
      return /\.svg$/.test(path) && !uniconsRegExp.test(path)
    },
    use: ['@svgr/webpack'],
  },
]

This allows me to have most icons with a set height and width, while leaving all other svgs untouched.

I see the current approach is kind of crude, but maybe one could wrap the loader somehow? Everything is possible, of course, but I would like to stick to the most conventional way, if possible.

[fatso83]

To scratch my itch I went with implementing a minimal plugin that just delegates to vite-plugin-svgr. If there is a better approach, it would be interesting to know.

using custom svgr options for different paths by wrapping the vite-plugin-svgr plugin
This setup uses a default config for svgr that will be used by any svg file that does not mach any of the more specific ones. You can add custom ones by implementing a matcher function that tells whether or not the custom options should be used or not for that file.

import customSvgrPluginSupportingOverrides from '../common/custom-svgr-plugin'

const uniconsRegExp = new RegExp('@iconscout/unicons/svg/line/.*svg$')
const svgrOptionsForUnicons = {
  namedExport: 'ReactComponent',
  svgProps: {
    height: 24,
    width: 24,
    className: 'iconscout_unicons',
  },
}

export default defineConfig({
  plugins: [
    reactRefresh(),
    customSvgrPluginSupportingOverrides({
      defaultConfig: {
        svgrOptions: {
          // ...svgr options (https://react-svgr.com/docs/options/)
        },
      },
      customConfigs: [
        {
          matcher(id) {
            return uniconsRegExp.test(id)
          },
          svgrOptions: svgrOptionsForUnicons,
        },
        // add additional overrides for specific packages or file patterns here
      ],
    }),
  ],
}

custom-svgr-plugin.js

const svgrPlugin = require('vite-plugin-svgr')
const debug = require('debug')('myapp-custom-svgr-plugin')

// wrap the default svgr loader to enable processing different paths differently possible
module.exports = function ({ defaultConfig, customConfigs = [] }) {
  const defaultPlugin = svgrPlugin(defaultConfig)
  const customConfiguredPluginsWithMatchers = customConfigs.map((config) => ({
    matcher: config.matcher,
    plugin: svgrPlugin(config),
  }))

  return {
    name: 'vite:custom-svgr',
    async transform(code, id) {
      if (id.endsWith('.svg')) {
        const plugin = customConfiguredPluginsWithMatchers.find(({ matcher, plugin }) => matcher(id)).plugin || defaultPlugin

        if (plugin === defaultPlugin) {
          debug(`No custom plugin matching ${id} found. Falling back to default config`)
        } else {
          debug(`Found custom plugin setup for ${id}!`)
        }

        return plugin.transform(code, id)
      }
    },
  }
})