jacobmischka/gatsby-plugin-react-svg

unable to use list-style with imported SVG

samOpenforce opened this issue · 2 comments

samOpenforce commented

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 commented

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 commented

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

  • 👍1