unable to use list-style with imported SVG

[samOpenforce]

I am having trouble attempting to use an .svg as a custom list-style icon. Everything appears to be working as expected except that nothing is visible. Can you please confirm the dev-tools output I'm seeing is what I should expect here? Any pointers gratefully received! Many thanks.

• svg filepath: src/assets/file.svg

  • gatsby-config.js

    {
    resolve: 'gatsby-plugin-react-svg',
    options: {
    rule: {
      include: /assets/,
    },
    },
    }

• component scss

  ul {
  list-style: url(../assets/file.svg);
  }

• dev-tools output for element inspect

  ul {
  list-style: url(http://localhost:8000/de/karriere/function ArrowOpenforce (props) {\n return React.createElement(\"svg\",props,[React.createElement(\"path\",{\"d\":\"M14.6122 15.9323L20 12.6493L0 0.466064L14.6122 15.9323Z\",\"fill\":\"#E1B83D\",\"key\":0}),React.createElement(\"path\",{\"d\":\"M14.6125 9.36963L20.0002 12.6492L0.00292969 24.8324L14.6125 9.36963Z\",\"fill\":\"#FFCE44\",\"key\":1})]);\n});
  }

[jacobmischka]

This plugin does not support SVGs in CSS, it's for importing them and including them directly in JSX. I think the CSS you're trying to do should work out of the box in Gatsby without this plugin, please disable it or change the path so that this plugin doesn't include it.

[samOpenforce]

Thanks, I appreciate the fast response! Have re-read the docs a bit more carefully and got it working :/