How to create a custom size property

[jkinley]

In an icon library you don't really want the aspect ratio to change. How can I add a custom size prop to SVGR so that I don't have to set a height and width? So in my component I could use <Icon size={24} />. Do I use a custom template for this? Any examples handy?

[gregberge]

Hello @jkinley. I think you could achieve it using SVG Props Options without custom template.

--svg-props height="{props.size || '1em'}" --svg-props width="{props.size || '1em'}"

Not sure if it works.

[jkinley]

Thanks, @gregberge. I am not sure I understand. You don't need to add width and height props as that already works out of the box. My thought is to NOT have to pass two props. With my icon library, the aspect ratio should not change. I am trying to reduce the prop to one value (size); not two (width and height).

[gregberge]

Using --icon + --svg-props it should work: https://react-svgr.com/playground/?icon=true&svgProps=height%3D%7Bprops.size%20%7C%7C%20%221em%22%7D%2Cwidth%3D%7Bprops.size%20%7C%7C%20%221em%22%7D

[jkinley]

Thanks! I get it now. I made some progress. I will let you know how it works out.

[jkinley]

@gregberge Hi! I wanted to thank you again for the assistance. This is what I ended up with and it seems to be working well.

// svgrrc.js

module.exports = {
  "icon": true,
  "titleProp": true,
  "svgProps": {
    "width": "{props.size || '1em'}",
    "height": "{props.size || '1em'}"
  },
  "replaceAttrValues": { 
    "#000": "currentColor"
  },
  "ext": "jsx",
  "indexTemplate": require("./index-template.cjs")
}

Also, just want to mention that in icon mode, it seems that the aspect ratio seems to be fixed, which I think is sensible. I tested and if you use different values for height and width, it does NOT distort the SVG (I assumed it would). Anyway, configuring an icon library this way makes more sense and make it more user-friendly.