USWDS and Next.js scss icons not compiling.

[snmln]

Hi all I am working through a project and trying to implement the USWDS Accordion and USWDS Checkbox components in a next.js application. These items function correctly but all icons or .svg elements that are applied through a background-image: url({URL HERE})

I can not seem to get Next.js to compile the usa-icon or uswds package icons to compile. Below is my next.js config

const path = require('path');

const sassOptions = require('./scripts/sassOptions');
const basePath = process.env.NEXT_PUBLIC_BASE_PATH;
const appSassOptions = sassOptions(basePath);
module.exports = {
  typescript: {
    // !! WARN !!
    // Dangerously allow production builds to successfully complete even if
    // your project has type errors.
    // !! WARN !!
    ignoreBuildErrors: true,
  },
  async rewrites() {
    return [
      {
        source: '/public/:path*',
        destination: '/:path*',
      },
    ];
  },
  reactStrictMode: false,
  webpack: (config) => {
    config.resolve.alias = {
      ...(config.resolve.alias || {}),
      // The following aliases are added to ensure that both the Next.js instance and
      // the `veda-ui` library use the same instances of Jotai for state management.
      // This resolves the issue of "Detected multiple Jotai instances," which can cause
      // unexpected behavior due to multiple instances of Jotai's default store.
      // For more details, refer to the GitHub discussion:
      // https://github.com/pmndrs/jotai/discussions/2044
      jotai: path.resolve(__dirname, 'node_modules', 'jotai'),
      'jotai-devtools': path.resolve(
        __dirname,
        'node_modules',
        'jotai-devtools',
      ),
      'jotai-location': path.resolve(
        __dirname,
        'node_modules',
        'jotai-location',
      ),
      'jotai-optics': path.resolve(__dirname, 'node_modules', 'jotai-optics'),
    };
    return config;
  },
  sassOptions: appSassOptions,
};

Here is the script referenced:

// @ts-check
const sass = require("sass");

/**
 * Configure Sass to load USWDS assets, and expose a Sass function for setting the
 * correct relative path to image or font assets, when the site is hosted from a subdirectory.
 */
function sassOptions(basePath = "") {
  return {
    includePaths: [
        'node_modules/@uswds/uswds',
        'node_modules/@uswds/uswds/dist',
        'node_modules/@uswds/uswds/packages',
        // path.join(__dirname, 'node_modules', '@uswds', 'uswds', 'packages'),
      ], transpilePackages: [
        // https://github.com/trussworks/react-uswds/issues/2605
        '@trussworks/react-uswds',
      ],
      functions: {
        'add-base-path($path)': (path) => {
          return new sass.SassString(`${basePath}${path.getValue()}`);
        },
      },
  };
}

module.exports = sassOptions;

Specifically I am looking to get usa-icon/add.svg, usa-icon/remove.svg, correct8.svg