How can I change the default icon size in React?

[wenchonglee]

Hey,

Is there a good way to change the default size of icons, say from 24px to 20px?
Initially I opted to use something like below, but it will override every instance; causing changes to the size prop to not work.

svg.tabler-icon {
  width: 20px;
  height: 20px;
}

<IconApple size={32} /> // will be 20px even with the size prop, because the css overrides it

[Ebuka636]

<style> .tabler-icon { width: 20px; height: 20px; } </style>

[Ebuka636]

However, it is important to note that this CSS rule will only work if it is applied to an HTML element that contains the SVG icon. For example, if you have an HTML page with an SVG icon that has a class of "tabler-icon", you can apply this CSS rule to that element using the following code:

[wenchonglee]

Appreciate the reply, but that's the same as what I said I'm already doing. It stops the size prop from working

// this will not work anymore after adding that css 
<IconAlertCircle size={32} /> 

[axeldvp]

I had same problem, it should fix it :

svg.tabler-icon[width="24"] { width: 1rem; height: 1rem; }