0

Is there a way how to align an icon horizontally using just props, without styles

Code - https://codesandbox.io/s/smoosh-hill-nr230p?file=/src/App.js:113-349

There you go:

export default function App() {
    return (
        <div className="App">
            <Radio
                label="I cannot be unchecked"
                // How to align horizontally?
                icon={() => <IconAdjustments size={18} color='red'/>}
            />
        </div>
    );
}
zhulien
  • 5,145
  • 3
  • 22
  • 36
HackerMF
  • 475
  • 7
  • 18

1 Answers1

1

icon property is used to change the icon of the Radio button itself. If you want to add icon to the label, you should use:

<Radio
    label={
        <>
            <IconAdjustments size={14} color="red" />
            I cannot be unchecked
        </>
    }  
/>

Edit:

As for now it is still not clear what you want to achieve after all, so here are all the possible scenarios.

  1. If you want icon in the label => the solution above.
  2. If you want to change the icon in the radio button itself:
  • You either provide the icon element itself => icon={IconAdjustments} or..
  • You provide a react component that accepts className as a property and applies it to the returned element:
icon={({ className }) => (
    <IconAdjustments className={className} color="red" />
)}

Passing size to the tabler icon element won't work for you as size is calculated internally based on the size of the Radio button and fixed width and height are applied to the icon.

zhulien
  • 5,145
  • 3
  • 22
  • 36
  • Yeah, it's a way, thank you. In truth, I've had this option. There is a wish to use the icon prop – HackerMF Nov 03 '22 at 12:00
  • @HackerMF I don't understand. What are you trying to do after all? – zhulien Nov 03 '22 at 13:44
  • Just understand there is a chanсe to use the prop icon for this case – – HackerMF Nov 03 '22 at 16:50
  • No, there is no chance. Like I told you already, the `icon` property is used to change the dot inside the `Radio` button. – zhulien Nov 03 '22 at 17:04
  • No, it's not for that. Look at my codesandbox. There is still the dot in the radio – HackerMF Nov 04 '22 at 08:42
  • @HackerMF Because you aren't even using it properly. You have to pass an SVG element, not a function. It should be: `icon={IconAdjustments}`. Furthermore, it is clearly stated in the docs: https://mantine.dev/core/radio/?t=props – zhulien Nov 05 '22 at 08:18
  • Try to use it properly as u think. U'll see what u will get. Yeah, right it's clear stated in the docs, FC – HackerMF Nov 07 '22 at 19:50
  • @HackerMF It is not about what I think, it is about what IT IS. I tell you how it is working and how it is supposed to be used and I give you concrete example on how to achieve the thing you want. You're just ignorant and don't want to face the facts. Good luck then. – zhulien Nov 08 '22 at 10:57
  • FC I guess u don't understand what it means, that's why u think that is about what IT IS. Nice. Try to use your example using my codesandbox and I hope U will understand something – HackerMF Nov 08 '22 at 15:56
  • @HackerMF There is a difference between a function and a react component, my man. Instead of being toxicly arrogant, appreciate the help you get. I'll make an edit to the post so you can understand the issue better. – zhulien Nov 08 '22 at 18:42
  • it's not the toxic arrogant. I've just tried as u said before and there were not any changes, then I tried to add just svg and nothing, so I thought you didn't try it but advised it, Now I checked it then I click radio and noticed that the icon was inside of radio. Apologies, my bad – HackerMF Nov 09 '22 at 16:11