Can I make one styled-component container to dynamically render different SVGs?

I have several SVG icons I want to render. Currently, I am importing each one as a ReactComponent, and then making a styled-component for each one:

import styled from 'styled-components';
import { ReactComponent as JS_LOGO } from '../../resources/icons/JS_logo.svg';
import { ReactComponent as REACT_LOGO } from '../../resources/icons/React_logo.svg';
import { ReactComponent as REDUX_LOGO } from '../../resources/icons/Redux_logo.svg';
import { ReactComponent as SASS_LOGO } from '../../resources/icons/Sass_logo.svg';

export const JSLogoContainer = styled(JS_LOGO)`
  height: 50px;
  width: 50px;
`;

export const ReactLogoContainer = styled(REACT_LOGO)`
  height: 50px;
  width: 50px;
`;

export const ReduxLogoContainer = styled(REDUX_LOGO)`
  height: 50px;
  width: 50px;
`;

export const SassLogoContainer = styled(SASS_LOGO)`
  height: 50px;
  width: 50px;
`;

And then I am making an array where I place those containers so I can map them:

const data = [
    { name: 'Javascript', icon: <JSLogoContainer /> },
    { name: 'React', icon: <ReactLogoContainer /> },
    { name: 'Redux', icon: <ReduxLogoContainer /> },
    { name: 'Sass', icon: <SassLogoContainer /> },
  ];

Since I just want to apply the same CSS to all of them, is there a way to make one container that I can pass the SVG I want to render dynamically instead?