Как оформить условно отображаемый тернарный оператор в отдельный файл CSS?

Question

Мне поручено удалить все встроенные CSS в моем проекте.Это проект React с sass.Я смог удалить все встроенные CSS и поместить в отдельный каталог "styles", кроме этого.Я сказал своему боссу, что мы можем просто оставить его, поскольку он минимален и делает код более читабельным, но он настаивает на том, чтобы удалить его и поместить в отдельный файл в каталоге стилей.
Как можно поступить так?Любая помощь приветствуется.

**** Вот код **** (это фрагмент из файла компонента)

               isLoggedIn ? (
                    <span
                        className='share-icon cursor'
                        style={
                            {
                                height: '20px',
                                width: '100px'
                            }
                        }
                    >
                        <img src={shareImage}/>
                    </span>
                ) : (
                    <span
                        className='people-icon cursor'
                        style={
                            {
                                height: '20px',
                                width: '100px'
                            }
                        }
                    >
                        <img src={groupImage}/>
                    </span>

Answer 1

Просто создайте класс с этими значениями высоты и ширины и используйте его в обоих случаях:

 isLoggedIn ? (
                <span
                    className='share-icon cursor whatever-classname-makes-sense'>
                    <img src={shareImage}/>
                </span>
            ) : (
                <span
                    className='people-icon cursor whatever-classname-makes-sense'>
                    <img src={groupImage}/>
                </span>

CSS:

.whatever-classname-makes-sense {
    width: 100px;
    height: 20px;
}