How to add custom style at svg element

I want add custom style into svg element when compile it. Because svg is not aligned with text by default

My config file like this

module.exports = {
    outDir: 'src/components',
    ref: true,
    icon: true,
    typescript: true,
    svgProps: {
        focusable: { },  // ✅ this attruibute add correctly
        style: { verticalAlign: '-0.125em' },   // ❌ align svg element with text or inline element
    },
};

Does svgr support passing object as svg props?

[raoooool]

Can be added with svgo’s addAttributesToSVGElement plugin. Like this:

module.exports = {
  svgoConfig: {
    plugins: [
      { name: "removeAttrs", params: { attrs: "(fill|stroke|height|width)" } },
      {
        name: "addAttributesToSVGElement",
        params: {
          attributes: [
            {
              style: "vertical-align:-0.125em;",
            },
          ],
        },
      },
    ],
  },
};

[hec9527]

add config as below into your svgr.config.js， you can custom style at svg element. Maybe you can try the above method，it is more perfect

    svgoConfig: {
        plugins: [
            {
                name: 'preset-default',
                params: {
                    overrides: {
                        inlineStyles: {
                            onlyMatchedOnce: false,
                        },
                        removeDoctype: false,
                    },
                },
            },
            {
                name: 'addAttributesToSVGElement',
                params: {
                    attributes: [
                        {
                            style: 'vertical-align:-0.125em;',
                        },
                    ],
                },
            },
        ],
    },