url.css

@import "./imported.css";

.class {
  background: url('./img.png');
}

.class {
  background: url("./img.png");
}

.class {
  background: url(./img.png);
}

.class {
  background: url("./img.png#hash");
}

.class {
  background: url(
    "./img.png"
  );
}

.class {
  background: green url( './img.png' ) xyz;
}

.class {
  background: green url( "./img.png" ) xyz;
}

.class {
  background: green url( ./img.png ) xyz;
}

.class {
  background: green url(~package/img.png) url(./other-img.png) xyz;
}

.class {
  background: green url( "./img img.png" ) xyz;
}

.class {
  background: green url( './img img.png' ) xyz;
}

.class {
  background: green url(/img.png) xyz;
}

.class {
  background: green url(data:image/png;base64,AAA) url(http://example.com/image.jpg) url(//example.com/image.png) xyz;
}

.class {
  background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 26' fill='%23007aff'><rect width='4' height='4'/><rect x='8' y='1' width='34' height='2'/><rect y='11' width='4' height='4'/><rect x='8' y='12' width='34' height='2'/><rect y='22' width='4' height='4'/><rect x='8' y='23' width='34' height='2'/></svg>");
}

.class {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2042%2026%27%20fill%3D%27%2523007aff%27%3E%3Crect%20width%3D%274%27%20height%3D%274%27%2F%3E%3Crect%20x%3D%278%27%20y%3D%271%27%20width%3D%2734%27%20height%3D%272%27%2F%3E%3Crect%20y%3D%2711%27%20width%3D%274%27%20height%3D%274%27%2F%3E%3Crect%20x%3D%278%27%20y%3D%2712%27%20width%3D%2734%27%20height%3D%272%27%2F%3E%3Crect%20y%3D%2722%27%20width%3D%274%27%20height%3D%274%27%2F%3E%3Crect%20x%3D%278%27%20y%3D%2723%27%20width%3D%2734%27%20height%3D%272%27%2F%3E%3C%2Fsvg%3E");
}

.class {
  filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur in="SourceAlpha" stdDeviation="0" /><feOffset dx="1" dy="2" result="offsetblur" /><feFlood flood-color="rgba(255,255,255,1)" /><feComposite in2="offsetblur" operator="in" /><feMerge><feMergeNode /><feMergeNode in="SourceGraphic" /></feMerge></filter></svg>#filter');
}

.class {
  filter: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%5C%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%5C%22%3E%3Cfilter%20id%3D%5C%22filter%5C%22%3E%3CfeGaussianBlur%20in%3D%5C%22SourceAlpha%5C%22%20stdDeviation%3D%5C%220%5C%22%20%2F%3E%3CfeOffset%20dx%3D%5C%221%5C%22%20dy%3D%5C%222%5C%22%20result%3D%5C%22offsetblur%5C%22%20%2F%3E%3CfeFlood%20flood-color%3D%5C%22rgba(255%2C255%2C255%2C1)%5C%22%20%2F%3E%3CfeComposite%20in2%3D%5C%22offsetblur%5C%22%20operator%3D%5C%22in%5C%22%20%2F%3E%3CfeMerge%3E%3CfeMergeNode%20%2F%3E%3CfeMergeNode%20in%3D%5C%22SourceGraphic%5C%22%20%2F%3E%3C%2FfeMerge%3E%3C%2Ffilter%3E%3C%2Fsvg%3E%23filter');
}

.highlight {
  filter: url(#highlight);
}

.highlight {
  filter: url('#line-marker');
}

@font-face {
  src: url(./font.woff) format('woff'),
    url('./font.woff2') format('woff2'),
    url("./font.eot") format('eot'),
    url(~package/font.ttf) format('truetype'),
    url("./font with spaces.eot") format("embedded-opentype"),
    url('./font.svg#svgFontName') format('svg'),
    url('./font.woff2?foo=bar') format('woff2'),
    url("./font.eot?#iefix") format('embedded-opentype'),
    url("./font with spaces.eot?#iefix") format('embedded-opentype');
}

@media (min-width: 500px) {
  body {
    background: url("./img.png");
  }
}

a {
  content: "do not use url(path)";
}

b {
  content: 'do not "use" url(path)';
}

@keyframes anim {
  background: green url('./img.png') xyz;
}

.a {
  background-image: -webkit-image-set(url('./img1x.png') 1x, url('./img2x.png') 2x)
}

.a {
  background-image: image-set(url('./img1x.png') 1x, url('./img2x.png') 2x)
}

.class {
  background: green url() xyz;
}

.class {
  background: green url('') xyz;
}

.class {
  background: green url("") xyz;
}

.class {
  background: green url('   ') xyz;
}

.class {
  background: green url(
  ) xyz;
}

.class {
  background: green url(https://raw.githubusercontent.com/webpack/media/master/logo/icon.png) xyz;
}

.class {
  background: green url(//raw.githubusercontent.com/webpack/media/master/logo/icon.png) xyz;
}

.class {
  background: url("./img.png?foo");
}

.class {
  background: url("./img.png?foo=bar");
}

.class {
  background: url("./img.png?foo=bar#hash");
}

.class {
  background: url("./img.png?foo=bar#hash");
}

.class {
  background: url("./img.png?");
}

.class {
  background-image: url('./img.png') url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 26' fill='%23007aff'><rect width='4' height='4'/><rect x='8' y='1' width='34' height='2'/><rect y='11' width='4' height='4'/><rect x='8' y='12' width='34' height='2'/><rect y='22' width='4' height='4'/><rect x='8' y='23' width='34' height='2'/></svg>") url('./img.png');
}

.class {
  background: ___CSS_LOADER_URL___;
  background: ___CSS_LOADER_URL___INDEX___;
  background: ___CSS_LOADER_URL___99999___;
  background: ___CSS_LOADER_IMPORT___;
  background: ___CSS_LOADER_IMPORT___INDEX___;
  background: ___CSS_LOADER_IMPORT___99999___;
}

.pure-url {
  background: url('img-simple.png');
}

.root-relative {
  background: url('/url/img-simple.png');
}

.above-below {
  background: url('../url/img-simple.png');
}

.tilde {
  background: url('~package/img.png');
}

.aliases {
  background: url('~aliasesImg/img.png') ;
}

a {
  background: url(./nested/img.png);
}

a {
  background: url(nested/img.png);
}

@font-face {
  src: url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.eot");
}

.class {
  /* Broken */
  background-image: -webkit-image-set();
  background-image: -webkit-image-set('');
  background-image: image-set();
  background-image: image-set('');
  background-image: image-set("");
  background-image: image-set("" 1x);
  background-image: image-set(url());
  background-image: image-set(
    url()
  );
  background-image: image-set(URL());
  background-image: image-set(url(''));
  background-image: image-set(url(""));
  background-image: image-set(url('') 1x);
  background-image: image-set(1x);
  background-image: image-set(
    1x
  );
  background: image-set(calc(1rem + 1px) 1x);

  /* Strings */
  background-image: -webkit-image-set("./img1x.png" 1x, "./img2x.png" 2x);
  background-image: image-set("./img1x.png" 1x);
  background-image: image-set("./img1x.png" 1x, "./img2x.png" 2x);
  background-image: image-set("./img img.png" 1x, "./img img.png" 2x);
  background-image: image-set("./img1x.png" 1x, "./img2x.png" 2x),
    image-set("./img1x.png" 1x, "./img2x.png" 2x);
  background-image: image-set(
    "./img1x.png" 1x,
    "./img2x.png" 2x,
    "./img3x.png" 600dpi
  );
  background-image: image-set("./img1x.png?foo=bar" 1x);
  background-image: image-set("./img1x.png#hash" 1x);
  background-image: image-set("./img1x.png?#iefix" 1x);

  /* With `url` function */
  background-image: -webkit-image-set(url("./img1x.png") 1x, url("./img2x.png") 2x);
  background-image: -webkit-image-set(url("./img1x.png") 1x);
  background-image: -webkit-image-set(
    url("./img1x.png") 1x
  );
  background-image: image-set(url(./img1x.png) 1x);
  background-image: image-set(
    url(./img1x.png) 1x
  );
  background-image: image-set(url("./img1x.png") 1x, url("./img2x.png") 2x);
  background-image: image-set(
    url(./img1x.png) 1x,
    url(./img2x.png) 2x,
    url(./img3x.png) 600dpi
  );
  background-image: image-set(url("./img img.png") 1x, url("./img img.png") 2x);

  background-image: image-set(url("./img1x.png") 1x, "./img2x.png" 2x);
}

.class {
  /* Not allowed on windows */
  /* background: url(./img\"img.png); */
  background: url(./img\'img.png);
  background: url(./img\'\'\'img.png);
  background: url(./img\(img.png);
  background: url(./img\)img.png);
  background: url(./img\ img.png);
  background: url(./img\'\(\)\ img.png);

  background-image: image-set(
    /* Not allowed on windows */
    /* url(./img\"img.png) 1x, */
    url(./img\'\'\'img.png) 2x,
    url(./img\'img.png) 3x,
    url(./img\(img.png) 4x,
    url(./img\)img.png) 5x,
    url(./img\ img.png) 6x,
    url(./img\'\(\)\ img.png) 7x
  );
}

.class-class-class {
  background: url("./img'''img.png");
  background: url("./img'() img.png");
  background: url("./img'img.png");
  background: url("./img(img.png");
  background: url("./img)img.png");
  background: url('./img img.png');
  background: url("./img img.png");
}

/* Comment */

.class.class.class {
  background: url('./img\
(img.png');
  background: url('./img\
(img.png');
  background: url('./img\
(img.png');
  background: url('./img\
\
\
\
(img.png');
}

.other-test-case {
  background: url("./img%27%27%27img.png");
  background: url("./img%27%28%29%20img.png");
  background: url("./img%27img.png");
  background: url("./img%28img.png");
  background: url("./img%29img.png");
  background: url("./img%20img.png");
  background: url(./img%27%27%27img.png);
  background: url(./img%27%28%29%20img.png);
  background: url(./img%27img.png);
  background: url(./img%28img.png);
  background: url(./img%29img.png);
  background: url(./img%20img.png);
}

.qqq {
  background: url('img.png');
}

.www {
  background: url("./img\'\'\'img.png");
  background: url("./img\'\(\)\ img.png");
  background: url("./img\'img.png");
  background: url("./img\(img.png");
  background: url("./img\)img.png");
  background: url("./img\ img.png");
  background: url("./\69\6D\67.png");
  background: url(./\69\6D\67.png);
  background: url("./img\27img.png");
  background: url("./img\'\28%29 img.png");
  background: url(./img\'\28%29\ img.png);
}

.class {
  /* Should be one import */
  background: url('./something.png');
  background: url('./something.png');

  background: url('./something.png?foo=bar');
  background: url('./something.png?foo=bar');

  background: url('./something.png?foo=bar#hash');
  background: url('./something.png?foo=bar#hash');

  /* Should be two imports */
  background: url('./something.png?foo=bar');
  background: url('./something.png?bar=foo');

  background: url('./something.png?foo=bar#foo');
  background: url('./something.png?bar=foo#bar');

  background: url('./something.png?foo=1&bar=2');
  background: url('./something.png?foo=2&bar=1');
}

.base {
  background: url("data:image/svg+xml;charset=UTF-8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%0A%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0A%09%20width%3D%22191px%22%20height%3D%22191px%22%20viewBox%3D%220%200%20191%20191%22%20enable-background%3D%22new%200%200%20191%20191%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cpath%20fill%3D%22%23636363%22%20d%3D%22M95.5%2C0C42.8%2C0%2C0%2C42.8%2C0%2C95.5S42.8%2C191%2C95.5%2C191S191%2C148.2%2C191%2C95.5S148.2%2C0%2C95.5%2C0z%20M95.5%2C187.6%0A%09c-50.848%2C0-92.1-41.25-92.1-92.1c0-50.848%2C41.252-92.1%2C92.1-92.1c50.85%2C0%2C92.1%2C41.252%2C92.1%2C92.1%0A%09C187.6%2C146.35%2C146.35%2C187.6%2C95.5%2C187.6z%22%2F%3E%0A%3Cg%3E%0A%09%3Cpath%20fill%3D%22%23636363%22%20d%3D%22M92.9%2C10v8.6H91v-6.5c-0.1%2C0.1-0.2%2C0.2-0.4%2C0.3c-0.2%2C0.1-0.3%2C0.2-0.4%2C0.2c-0.1%2C0-0.3%2C0.1-0.5%2C0.2%0A%09%09c-0.2%2C0.1-0.3%2C0.1-0.5%2C0.1v-1.6c0.5-0.1%2C0.9-0.3%2C1.4-0.5c0.5-0.2%2C0.8-0.5%2C1.2-0.7h1.1V10z%22%2F%3E%0A%09%3Cpath%20fill%3D%22%23636363%22%20d%3D%22M97.1%2C17.1h3.602v1.5h-5.6V18c0-0.4%2C0.1-0.8%2C0.2-1.2c0.1-0.4%2C0.3-0.6%2C0.5-0.9c0.2-0.3%2C0.5-0.5%2C0.7-0.7%0A%09%09c0.2-0.2%2C0.5-0.4%2C0.7-0.6c0.199-0.2%2C0.5-0.3%2C0.6-0.5c0.102-0.2%2C0.301-0.3%2C0.5-0.5c0.2-0.2%2C0.2-0.3%2C0.301-0.5%0A%09%09c0.101-0.2%2C0.101-0.3%2C0.101-0.5c0-0.4-0.101-0.6-0.3-0.8c-0.2-0.2-0.4-0.3-0.801-0.3c-0.699%2C0-1.399%2C0.3-2.101%2C0.9v-1.6%0A%09%09c0.7-0.5%2C1.5-0.7%2C2.5-0.7c0.399%2C0%2C0.8%2C0.1%2C1.101%2C0.2c0.301%2C0.1%2C0.601%2C0.3%2C0.899%2C0.5c0.3%2C0.2%2C0.399%2C0.5%2C0.5%2C0.8%0A%09%09c0.101%2C0.3%2C0.2%2C0.6%2C0.2%2C1s-0.102%2C0.7-0.2%2C1c-0.099%2C0.3-0.3%2C0.6-0.5%2C0.8c-0.2%2C0.2-0.399%2C0.5-0.7%2C0.7c-0.3%2C0.2-0.5%2C0.4-0.8%2C0.6%0A%09%09c-0.2%2C0.1-0.399%2C0.3-0.5%2C0.4s-0.3%2C0.3-0.5%2C0.4s-0.2%2C0.3-0.3%2C0.4C97.1%2C17%2C97.1%2C17%2C97.1%2C17.1z%22%2F%3E%0A%3C%2Fg%3E%0A%3Cg%3E%0A%09%3Cpath%20fill%3D%22%23636363%22%20d%3D%22M15%2C95.4c0%2C0.7-0.1%2C1.4-0.2%2C2c-0.1%2C0.6-0.4%2C1.1-0.7%2C1.5C13.8%2C99.3%2C13.4%2C99.6%2C12.9%2C99.8s-1%2C0.3-1.5%2C0.3%0A%09%09c-0.7%2C0-1.3-0.1-1.8-0.3v-1.5c0.4%2C0.3%2C1%2C0.4%2C1.6%2C0.4c0.6%2C0%2C1.1-0.2%2C1.5-0.7c0.4-0.5%2C0.5-1.1%2C0.5-1.9l0%2C0%0A%09%09C12.8%2C96.7%2C12.3%2C96.9%2C11.5%2C96.9c-0.3%2C0-0.7-0.102-1-0.2c-0.3-0.101-0.5-0.3-0.8-0.5c-0.3-0.2-0.4-0.5-0.5-0.8%0A%09%09c-0.1-0.3-0.2-0.7-0.2-1c0-0.4%2C0.1-0.8%2C0.2-1.2c0.1-0.4%2C0.3-0.7%2C0.6-0.9c0.3-0.2%2C0.6-0.5%2C0.9-0.6c0.3-0.1%2C0.8-0.2%2C1.2-0.2%0A%09%09c0.5%2C0%2C0.9%2C0.1%2C1.2%2C0.3c0.3%2C0.2%2C0.7%2C0.4%2C0.9%2C0.8s0.5%2C0.7%2C0.6%2C1.2S15%2C94.8%2C15%2C95.4z%20M13.1%2C94.4c0-0.2%2C0-0.4-0.1-0.6%0A%09%09c-0.1-0.2-0.1-0.4-0.2-0.5c-0.1-0.1-0.2-0.2-0.4-0.3c-0.2-0.1-0.3-0.1-0.5-0.1c-0.2%2C0-0.3%2C0-0.4%2C0.1s-0.3%2C0.2-0.3%2C0.3%0A%09%09c0%2C0.1-0.2%2C0.3-0.2%2C0.4c0%2C0.1-0.1%2C0.4-0.1%2C0.6c0%2C0.2%2C0%2C0.4%2C0.1%2C0.6c0.1%2C0.2%2C0.1%2C0.3%2C0.2%2C0.4c0.1%2C0.1%2C0.2%2C0.2%2C0.4%2C0.3%0A%09%09c0.2%2C0.1%2C0.3%2C0.1%2C0.5%2C0.1c0.2%2C0%2C0.3%2C0%2C0.4-0.1s0.2-0.2%2C0.3-0.3c0.1-0.1%2C0.2-0.2%2C0.2-0.4C13%2C94.7%2C13.1%2C94.6%2C13.1%2C94.4z%22%2F%3E%0A%3C%2Fg%3E%0A%3Cg%3E%0A%09%3Cpath%20fill%3D%22%23636363%22%20d%3D%22M176%2C99.7V98.1c0.6%2C0.4%2C1.2%2C0.602%2C2%2C0.602c0.5%2C0%2C0.8-0.102%2C1.1-0.301c0.301-0.199%2C0.4-0.5%2C0.4-0.801%0A%09%09c0-0.398-0.2-0.699-0.5-0.898c-0.3-0.2-0.8-0.301-1.3-0.301h-0.802V95h0.701c1.101%2C0%2C1.601-0.4%2C1.601-1.1c0-0.7-0.4-1-1.302-1%0A%09%09c-0.6%2C0-1.1%2C0.2-1.6%2C0.5v-1.5c0.6-0.3%2C1.301-0.4%2C2.1-0.4c0.9%2C0%2C1.5%2C0.2%2C2%2C0.6s0.701%2C0.9%2C0.701%2C1.5c0%2C1.1-0.601%2C1.8-1.701%2C2.1l0%2C0%0A%09%09c0.602%2C0.1%2C1.102%2C0.3%2C1.4%2C0.6s0.5%2C0.8%2C0.5%2C1.3c0%2C0.801-0.3%2C1.4-0.9%2C1.9c-0.6%2C0.5-1.398%2C0.7-2.398%2C0.7%0A%09%09C177.2%2C100.1%2C176.5%2C100%2C176%2C99.7z%22%2F%3E%0A%3C%2Fg%3E%0A%3Cg%3E%0A%09%3Cpath%20fill%3D%22%23636363%22%20d%3D%22M98.5%2C179.102c0%2C0.398-0.1%2C0.799-0.2%2C1.199C98.2%2C180.7%2C98%2C181%2C97.7%2C181.2s-0.601%2C0.5-0.9%2C0.601%0A%09%09c-0.3%2C0.1-0.7%2C0.199-1.2%2C0.199c-0.5%2C0-0.9-0.1-1.3-0.3c-0.4-0.2-0.7-0.399-0.9-0.8c-0.2-0.4-0.5-0.7-0.6-1.2%0A%09%09c-0.1-0.5-0.2-1-0.2-1.601c0-0.699%2C0.1-1.399%2C0.3-2c0.2-0.601%2C0.4-1.101%2C0.8-1.5c0.4-0.399%2C0.7-0.699%2C1.2-1c0.5-0.3%2C1-0.3%2C1.6-0.3%0A%09%09c0.6%2C0%2C1.2%2C0.101%2C1.5%2C0.199v1.5c-0.4-0.199-0.9-0.399-1.4-0.399c-0.3%2C0-0.6%2C0.101-0.8%2C0.2c-0.2%2C0.101-0.5%2C0.3-0.7%2C0.5%0A%09%09c-0.2%2C0.199-0.3%2C0.5-0.4%2C0.8c-0.1%2C0.301-0.2%2C0.7-0.2%2C1.101l0%2C0c0.4-0.601%2C1-0.8%2C1.8-0.8c0.3%2C0%2C0.7%2C0.1%2C0.9%2C0.199%0A%09%09c0.2%2C0.101%2C0.5%2C0.301%2C0.7%2C0.5c0.199%2C0.2%2C0.398%2C0.5%2C0.5%2C0.801C98.5%2C178.2%2C98.5%2C178.7%2C98.5%2C179.102z%20M96.7%2C179.2%0A%09%09c0-0.899-0.4-1.399-1.1-1.399c-0.2%2C0-0.3%2C0-0.5%2C0.1c-0.2%2C0.101-0.3%2C0.201-0.4%2C0.301c-0.1%2C0.101-0.2%2C0.199-0.2%2C0.4%0A%09%09c0%2C0.199-0.1%2C0.299-0.1%2C0.5c0%2C0.199%2C0%2C0.398%2C0.1%2C0.6s0.1%2C0.3%2C0.2%2C0.5c0.1%2C0.199%2C0.2%2C0.199%2C0.4%2C0.3c0.2%2C0.101%2C0.3%2C0.101%2C0.5%2C0.101%0A%09%09c0.2%2C0%2C0.3%2C0%2C0.5-0.101c0.2-0.101%2C0.301-0.199%2C0.301-0.3c0-0.1%2C0.199-0.301%2C0.199-0.399C96.6%2C179.7%2C96.7%2C179.4%2C96.7%2C179.2z%22%2F%3E%0A%3C%2Fg%3E%0A%3Ccircle%20fill%3D%22%23636363%22%20cx%3D%2295%22%20cy%3D%2295%22%20r%3D%227%22%2F%3E%0A%3C%2Fsvg%3E%0A") 50% 50%/191px no-repeat;
}

.strange {
  background: url('%2E/img.png');
}

.my-background {
  background-image: url("/guide/img/banWord/addCoinDialogTitleBg.png");
}

.class {
  background: url('./img.png', 'foo', './img.png', url('./img.png'));
  background-image: image-set(url('./img.png', 'foo', './img.png', url('./img.png')) 1x, url("./img2x.png") 2x);
}

.button {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><rect width="100%" height="100%" style="stroke: rgb(223,224,225); stroke-width: 2px; fill: none; stroke-dasharray: 6px 3px" /></svg>');
}

/* We need to use `resourceQuery: /inline/` */
/* Hard to test on webpack v4 */
.qqq {
  background: url('!!../../helpers/url-loader.js?esModule=false!~package/img-single.png?ignore-asset-modules')
}

.class {
  background: url("img.png");
}

.class {
  background: url("~img.png");
}

/** Prefer relative **/
.class {
  background: url("nested/img.png");
}

/** Prefer from modules **/
.class {
  background: url("nested/other.png");
}

.class {
  background: url("package/img.png");
}

.foo {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

.bar {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10"><rect fill="gray" width="5" height="5" y="0" x="0" /></svg>');
}