Possible Bug in RuxIcon React Component

[jlawton22]

Hello, When trying to access styling from a css file for a RuxIcon, className property doesn't seem to read from css file as expected. Below is an example of the difference between accessing the style directly in the html tag and attempting to read from css file. Notice difference in button styling to the left.

Code with style property:

import './styles.css'
import { React, useState } from 'react'
import {
    RuxIcon,
    RuxInput,
    RuxSelect,
    RuxCheckbox,
    RuxCheckboxGroup,
    RuxRadio,
    RuxRadioGroup,
    RuxSlider,
    RuxButton,
    RuxOption,
} from '@astrouxds/react'
export default function App() {
    const [firstName, setFirstName] = useState('')
    const [lastName, setLastName] = useState('')
    const [email, setEmail] = useState('')
    const [countryRegion, setCountryRegion] = useState('United States')
    const [options, setOptions] = useState('')
    const [range, setRange] = useState(50)
    const [things, setThings] = useState([])

    const handleSubmit = (e) => {
        e.preventDefault()
        alert(`
     First Name: ${firstName} \n
     Last Name: ${lastName} \n
     Email: ${email} \n
     Country/Region: ${countryRegion} \n
     Options: ${options} \n
     Things: ${things} \n
     Range: ${range} \n
    `)
    }
    const handleThings = (e) => {
        let arr = things
        if (e.target.checked) {
            arr.push(e.target.value)
            let unique = [...new Set(arr)]
            setThings(unique)
        } else {
            setThings(arr.filter((item) => item !== e.target.value))
        }
    }
    return (
        <div className="container">
            <form onSubmit={(e) => handleSubmit(e)}>
                <div>
                    <RuxButton type="submit" size="large">
                       <RuxIcon icon="tune" size="28px" style={{width:"28px", height:"28px"}}/>
                    </RuxButton>
                </div>
            </form>
        </div>
    )
} 

Code: with CSS:

    return (
        <div className="container">
            <form onSubmit={(e) => handleSubmit(e)}>
                <div>
                    <RuxButton type="submit" size="large">
                       <RuxIcon icon="tune" size="28px" className="myIcon"/>
                    </RuxButton>
                </div>
            </form>
        </div>
    )
}

.container {
    /* text-align: center; */
    width: 60%;
    margin: auto;
}
form {
    padding: 1rem;
}
div {
    margin-bottom: 20px;
}

.myIcon {
  width: "28px";
  height: "28px";
}

Thanks!

[micahjones13]

Hey there,

I've tried to reproduce the issue in a codesandbox here. In your CSS, does the .myIcon class use strings for the width and height? That may be the issue, as I had to remove those for my example to work. Let me know if you can reproduce it and I'll investigate some more.

Thanks!

[jlawton22]

Hey, Thanks for taking a look at this for me. It seems that strings were used in the CSS and that was completely overlooked in the review process on my end. Looks like everything works as intended. Thanks for your time.