Apply one style to array of components with styled components in react

Question

I have some SVG icons and i want them all to have same style. how can i apply one style to all of them ??

import {ReactComponent as clearSky} from "./weather_fullmoon.svg";
import {ReactComponent as WeatherCloud} from "./weather_cloud.svg";
import {ReactComponent as VariableSun} from "./weather_variable_sun.svg";
import {ReactComponent as ShowerRain} from "./weather_rain.svg";
import styled from "styled-components"

const Icon = styled(clearSky)`
width: 3.2rem;
height: 3.2rem;
fill: ${ props => props.theme["LightText"]};
`;

Answer 1

Here's one way that could work. Wrap the images in a empty div wrapper and apply a separate class .svgs to each image.

 function SvgImages() {
    return 
<SvgImagesWrapper>
<clearsky className="svgs"/>
<WeatherCloud className="svgs"/>
<VariableSun className="svgs"/>
<ShowerRain className="svgs"/>
<SvgImagesWrapper/>;
}

const SvgImagesWrapper = styled.div`
.svgs {
width: 3.2rem;
height: 3.2rem;
fill: ${ props => props.theme["LightText"]};
}
`;