0

In my webpack configuration, I have

 {
    test: /\.(woff|ttf|otf|eot|woff2|png|svg)$/i,
    loader: 'file-loader',
 }

which correctly reads the file and produced a hash when I attempt to import the file (this is the console.log of the import)

8c0ac5df695d44661b940bfba0814236.svg

Now the problem is when I pass this url to a styled component, it doesn't display it. Here is my folder structure 

src
  components
       component1
           index
           styled
  icons
    svg
     send.svg

I import the svg file from the index like this (all imports are relative to the src) 

import send from 'icons/svg/send.svg';

and then use a styled component which accepts the URL:

export const FooterButton = styled.div`
       mask: url(${props => props.icon}) ;
       -webkit-mask-size: contain;
   `;
Andrew Regan
  • 5,087
  • 6
  • 37
  • 73
Youssef
  • 110
  • 1
  • 10
  • Did you use the alias feature before? because I see that you have used the icons folder into nested folders without writing the icons relative path. – Ali Torki Sep 21 '19 at 15:50
  • No,i haven't used it before.Can you explain further? – Youssef Sep 21 '19 at 15:57
  • Clear informations are documented here: [official webpack document](https://webpack.js.org/configuration/resolve/#resolvealias) – Ali Torki Sep 21 '19 at 16:02
  • Oh wait you are talking about importing the send from inside the component? If so,then yes I have and it is imported correctly – Youssef Sep 21 '19 at 16:03
  • The first and foremost things you need to know is you can't pass the SVG generated file string to a component because that will change after a new rebuild or starting the project. You should use that path directly into an image tag or load as a component. – Ali Torki Sep 21 '19 at 16:04

0 Answers0