Integration of svgr into bud build

bud
1

I am using bud with sage 10 and would like to use svgr (Webpack - SVGR) to include SVGs in my gutenberg blocks. Is there any documentation about howto accomplish this?
I somehow managed to load the SVGs directly using the SVGr webpack loader with !@svgr/webpack!../../svgs/image.svg' but I would rather not specify the loader directly in the script files.

2

Apologies for resurrecting an old thread, but posting here in case anyone else runs into this looking for a solution. Mentioning Webpack-SVGR was a good starting point and following this from Bud’s documentation - Customizing loaders | bud.js - I arrived at the following solution:

  1. Install @svgr/webpack by running
yarn add @svgr/webpack --save-dev
  1. In bud.config.ts, add the code below. Note that I unshift the rule to add it at the beginning - there are some other SVG-related loaders that ended up giving me just the URL to the public SVG, instead of the React component.
bud.hooks.on(`build.module.rules.oneOf`, (rules = []) => {
  rules.unshift({
    test: /\.svg$/,
    use: [`@svgr/webpack`],
  });

  return rules;
});
  1. Optionally add an alias in bud.config.ts:
bud.alias(`@icons`, bud.path(`resources/images/icons`));
  1. Also optionally I added the following alias in tsconfig.json(not sure if this is required or not :person_shrugging: ) - I added it to the compilerOptions.paths object
"@icons/*": ["images/icons/*"]
  1. Import the component in a block:
import FacebookIcon from '@icons/facebook-logo.svg';
  1. Use in your component :tada: :
<FacebookIcon />

The result is that the SVG is inlined, instead of being used via an src attribute :slightly_smiling_face:

Btw - I’m doing this in Radicle, but I would venture a guess that you can do the same in other Roots-based things as long as they use Bud as the build system.

I hope this helps!

3 Likes