Gatsby - Boxicon icons are not showing after I implemented SVG

user_7280509 0
Viewed 291

I manage to implement gatsby-plugin-react-svg and make it work, but after that I saw that all the library icons are bye bye.

If I add more SVG in my svg folder it's okay, but all the icons from Boxicon library are gone.

I would like to use the icons library and my custom svg.

This is how my gatsby-config.js file looks like

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

In JSX I use the icon like this:

 <i className="bx bxs-user-circle"/>

But now is showing me a small square

gatsby svg
1 Answers

What is happening is that the plugin is creating React components for everything that is inside /svg folder so, they can be used as it like:

import SomeSvg from '../svg/someSvg.svg'

Of course, it can break the previous SVG from Boxicon if they are not used as a component.

The easiest solution is to create a separate folder for your custom SVG components that will be used as React components and another folder to use images with an SVG source.

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

/svgComponents will only contain custom SVG components. Then, you can leave the /svg folder for your Boxicon SVGs.

user_55853710
Related