use styled componnents instead of inline

Author: SaraVieira

packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/EntryIcons/elements.js

@@ -7,6 +7,7 @@ export const RedIcon = styled.span`
 `;
 
 export const SVGIcon = styled.span`
+  background-image: url(${props => props.url});
   background-size: ${props => props.width}px;
   background-position: 0;
   background-repeat: no-repeat;

packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/EntryIcons/index.js

@@ -28,21 +28,16 @@ class GetIcon extends Component {
 
   render() {
     const { type, error, width, height } = this.props;
+    const { icon } = this.state;
+
     if (error) {
       return (
         <RedIcon>
           <ErrorIcon width={width} height={height} />
         </RedIcon>
       );
     }
-    return (
-      <SVGIcon
-        style={{ 'background-image': `url(${this.state.icon})` }}
-        type={type}
-        width={width}
-        height={height}
-      />
-    );
+    return <SVGIcon url={icon} type={type} width={width} height={height} />;
   }
 }