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; }

[friedBrain123]

legend worked perfectly

[Yamazaki93]

We use a simple wrapper to solve this. It has no CSS overrides, abstracts away the default icon styling for the entire app in only 1 place, but there's one extra import.

//icon_wrap.tsx
import { Icon } from "@tabler/icons-react";

export default function IconWrap(props: { icon: Icon, stroke?: number, size?: number }) {
  const Component = props.icon;
  return <Component stroke={props.stroke ?? 1.5} size={props.size ?? 32}/>;
}

To use it

//some_component.tsx
import { Icon12Hours } from "@tabler/icons-react";
import IconWrap from "./icon_wrap";

export default function SomeComponent() {
  return <IconWrap icon={Icon12Hours} />;
}