Svgs referenced in .scss files not being included in build

Hey, I am using Nuxt 3 in ssr mode and I have a directory of svgs that are returning 404s on production because they are not being included in the build. They are being referenced dynamically from within a .scss file, so I'm guessing that its not including them as it doesn't read their explicit paths? Is there a way I can force the build to include these files?

My code structure is:

- assets
  -- scss
    --- icons.scss
  -- svgs
    --- icons
      ---- account.svg
      ---- calendar.svg

Then I am using a mixin to add the list of icons to essentially create my own icon library

$icon-types: account, calendar;

// Generate type classes
@each $type in $icon-types {
  .icon-#{$type} {
    background-color: currentColor; //default to text color
    display: inline-block;
    width: 1rem;
    height: 1rem;
    mask-repeat: no-repeat;
    mask-size: contain;
    mask-position: center;
    mask-image: url('~/assets/svgs/icons/#{$type}.svg');
  }
}

There are obviously more than two icons in the list but just using 2 to illustrate my point. Does anyone know how I can make sure these get added to the build?

Relevant package versions:

"devDependencies": {
    "nuxt": "^3.6.0",
    "postcss": "^8.4.24",
    "sass": "^1.63.6",
    "sass-loader": "^13.3.2",
    "tailwindcss": "^3.3.2"
  },
  "dependencies": {
    "vite-svg-loader": "^4.0.0"
  }

Nuxt.config.js:

import svgLoader from 'vite-svg-loader'
...
...
vite: {
    plugins: [svgLoader()],
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: "@use '@/assets/scss/variables.scss' as *;",
        },
      },
    },
    optimizeDeps: {
      include: ['fast-deep-equal'],
    },
  },

jpkleemans / vite-svg-loader

Svgs referenced in .scss files not being included in build #118