react-icons: exclude the injected styles and classes

microsoft / fluentui-system-icons

Fluent System Icons are a collection of familiar, friendly and modern icons from Microsoft.

https://aka.ms/fluentui-system-icons

MIT License

5.9k stars 516 forks source link

react-icons: exclude the injected styles and classes #411

Open terraelise opened 2 years ago

terraelise commented 2 years ago

Is there a way to not add the mergeClasses styles ("___1yjlmar f1w7gpdv fez10in f1kxrtqx")? I don't understand why these are added nor how to exclude them. Any help appreciated, it's causing styling issues and unwanted CSS generated.

tomi-msft commented 1 year ago

Hi @terraelise, is it possible for you to add your own user defined styles to override the unwanted style using makeStyles and mergeClasses? This default styling is to help folks who are migrating from an older icon set switch easier

terraelise commented 1 year ago

@tomi-msft That is what we are doing now, was just hoping there was a way to remove the injected styles. I have not yet been able to and generally I find it a mess to constantly override or !important styles and to have these unwanted classes in our CSS deliverables. I haven't tried more with makeStyles and mergeClasses, though, I'll have a look at the source code - is there documentation about them? Thank you!

tomi-msft commented 1 year ago

@terraelise Here is the fluentui docs page on styling: Style guide

terraelise commented 1 year ago

@tomi-msft ah, well, we do not use fluentui, only the icons set via React Icons and are unable to stop that library from injecting the classes noted in my OP.

terraelise commented 1 year ago

We have this package installed as a dependency in our ReactJS app: "@fluentui/react-icons": "^2.0.182"

We have a component that calls a predetermined list from the icon set based on our designers choices.

The SVG output includes classes we add for sizing and other styling needs, but also comes along with classes out of our control we often have to override and we'd like to have a way to tell the package we do not want those classes and have them not a part of our app.

___12fm75w_v8ls9a0 (nothing other than extra text near as I can tell)
f1w7gpdv (display: inline;) which we override often with a class sometimes to solve alignment issues
fez10in (line-height: 0;)
fg4l7m0 (nothing other than extra text near as I can tell)
width attribute which we override with a class
height attribute which we override with a class

effectivetom commented 9 months ago

I'm also running into this issue using "@fluentui/react-icons": "^2.0.223". The inability to exclude the bundled styles makes it very difficult to override the display: inline rule. Relying on the generated class names feels unreliable.