Clever way to use image sprite resizing with Styled component?

I'm trying to use Image Sprite with styled component with React

 "frames": {
        "dc.png": {
            "frame": {
                "x": 0,
                "y": 0,
                "w": 64,
                "h": 64
            }
        },
        "nneo.png": {
            "frame": {
                "x": 0,
                "y": 64,
                "w": 64,
                "h": 64
            }
        }
    },

I have JSON about sprite position and size and was able to use and resize it, but my code doesn't seems to be a good answer

import styled, { css } from 'styled-components';
import { default as sprite } from './sprite.json';

const dcFrame = sprite.frames['dc.png'].frame;
export const DCImage = styled.div`
    width: ${dcFrame.w + 'px'};
    height: ${dcFrame.h + 'px'};
    background-image: url('/spritesmith-generated/sprite.png');
    background-position: ${`${dcFrame.x}px ${dcFrame.y}px`};
`;

export const DCHalfImage = styled.div`
    width: ${dcFrame.w / 2 + 'px'};
    height: ${dcFrame.h / 2 + 'px'};
    background-image: url('/spritesmith-generated/sprite.png');
    background-position: ${`${dcFrame.x / 2}px ${dcFrame.y / 2}px`};
    background-size: 200%;
`;

......

Is there anyway to implement this in much better way?