Applying default settings in React

[scarf005]

hello, awesome library. One thing I'm wondering would there be any way to apply default settings for all icons?
for example, i'd wish every icons to have stroke-width of 1.25 so I don't have to do <IconPlus stroke={1.25} /> for every imported icons.

[ghost]

If you mean a config, I don't think so, but you can create a file where you'll be exporting your default props and share them across your app, for example:

/** styles/index.ts */

export const iconProps = {
    size: 18,
    stroke: 1.25
}

/** Component.tsx */

import { IconPlus } from "@tabler/icons"
import { iconProps } from "styles"

export default Component = () => {
    return <IconPlus {...iconProps} />
}

[ShahriarKh]

react-loading-skeleton has something called <SkeletonTheme /> to apply settings to all <Skeleton /> children. Implement something similar sounds good:

<IconTheme size={18} stroke={1.25}>
   <IconPlus />
   <IconMinus />
</IconTheme>

[JonDum]

For anyone coming across this from google, you can override the default with a global css selector:

svg.tabler-icon {
    stroke-width: 1;
    width: 16px;
    height: 16px;
 }