CODEWITHSUNDEEP
javascriptreactjsstyled-components
Nishant Rai
Nishant Rai

Reputation: 15

not able to set icon using style component, however same style is working perfectly fine in ".css" file

this is styled component i am using and in HTML i am not able see my icon how ever same thing working in .css file

// CSS
.name {
    width: 70%;
    height: 40px;
    margin-top: 20px;
    background-image: url("../../Icons/icons8-male-user-24.png");
    background-position: 2% 50%;
    background-repeat: no-repeat;
    padding-left: 30px;
    border: none;
    background-color: rgb(255, 255, 255);
}

// js
export const Username = styled.input`
    width: 70%;
    height: 40px;
    margin-top: 20px;
    background-image: url("../../Icons/icons8-male-user-24.png");
    background-position: 2% 50%;
    background-repeat: no-repeat;
    padding-left: 30px;
    border: none;
    background-color: rgb(255, 255, 255);
`;

Upvotes: 0

Views: 114

Answers (1)

Dennis Vash
Dennis Vash

Reputation: 53874

It will work if you resolve the path.

This tells webpack to include that file in the bundle. Unlike CSS imports, importing a file gives you a string value. This value is the final path you can reference in your code.

import path from "../../Icons/icons8-male-user-24.png";

export const Username = styled.input`
  background-image: url(${path});
`;

See Adding Images Fonts and Files.

Upvotes: 1

Related Questions