Is there any option to set icon size by default globally

[salih0313]

How can i set icon size from 24 to some other size by default

[embee8]

I ended up solving this with a CSS rule:

[fdev]

For backwards compatibility this library could use a Context that defines default icon options (which defaults to size 24px). That way everyone can safely upgrade, but you could choose to use a different default size by adding the context:

import { FeatherContext, Camera, Clock, Compass } from "react-feather"

const App = () => (
  <>
    <Camera /> {/* color currentColor, size 24px */}

    <FeatherContext.Provider
      value={{
        size: "1em",
        color: "maroon",
      }}
    >
      <Clock /> {/* color maroon, size 1em */}
      <Compass size={32} /> {/* color maroon, size 32px */}
    </FeatherContext.Provider>
  </>
)

[jiayinghsu]

@fdev I noticed that the size attribute does not modify the viewBox size, which is fixed to be viewBox="0 0 24 24".

[fdev]

@jiayinghsu I've since switched to react-icons which includes feather icons, defaults to 1em and provides the aforementioned context for overriding the defaults.

[Ayagoumi]

This is an ongoing issue, and it really frustrates me that I cannot change the size of the icon using the attribute.

[zhangyu1818]

I think it is possible to change the icon's defaultProps.

// icon.js
import * as icons from 'react-feather'

Object.values(icons).forEach((icon) => {
  icon.defaultProps = {
    size: '1em',
  }
})

export * from 'react-feather'

import { Home } from "./icon"