How can i use svg file in scss file?-CodePudding

I have icon.svg in src/assets directory.

And I want to use this svg file in some scss file.

like this

select {
    background: url("/src/assets/icon.svg") no-repeat ...;
}

but it doesn't work. and i can see this error

ERROR in ./src/components/atoms/Common/Dropdown/styles.module.scss (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[8].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[8].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[1].oneOf[8].use[3]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[8].use[4]!./src/components/atoms/Common/Dropdown/styles.module.scss) 5:36-104

i have tried these:

background: url("data:image/svg xml;, /src/assets/icon.svg")
background: url(`data:image/svg xml;, ${/src/assets/icon.svg}`)
background: url("data:image/svg xml;"   "/src/assets/icon.svg")

and finally i solved this problem to this

 background: url("data:image/svg xml,")

but i don't want this. i want short code with using my svg file.

How can i do?

CodePudding user response：

You should be able to do it with the same url.

I think you can use (/assets/icon.svg). try this:

.select {
  display: block;
  content: ' ';
  background-image: url('/assets/icon.svg');
  background-size: 50px 50px;
  height: 50px;
  width: 50px;
}

CodePudding user response：

This looks like a webpack error. Try appropriate svg loaders like: svg-url-loader. Good luck!