 +      throw new Error(
 +        `File ${file.path} not found in svg list during id generation`
 +      );
-+    const id = svgItem.path.match(/([^\/.]+)\.[^\/.]+$/)[1];
++    const id = basename(svgItem.path, ".svg");
 +    return id;
    }
  
    return generator;
-@@ -80,7 +84,7 @@ function compileSprite(spriter) {
+@@ -80,7 +85,7 @@ function compileSprite(spriter) {
        if (error) return reject(error);
  
        const { contents } = result.symbol.sprite;

diff --git a/node_modules/parcel-plugin-svg-sprite/src/asset.js b/node_modules/parcel-plugin-svg-sprite/src/asset.js
index ad32b24..41e7044 100644
--- a/node_modules/parcel-plugin-svg-sprite/src/asset.js
+++ b/node_modules/parcel-plugin-svg-sprite/src/asset.js
@@ -1,5 +1,5 @@
-const { Asset } = require('parcel-bundler');
-const { createHash } = require('./utils');
+const { Asset } = require("parcel-bundler");
+const { createHash } = require("./utils");
 
 class SvgAsset extends Asset {
   /**
@@ -12,8 +12,9 @@ class SvgAsset extends Asset {
   async generate() {
     // this is used to keep original behavior with files imported by css for font
     // here `parentBundle` is null so we can't know if svg is imported by a css file
-    const isFromAssets = this.name.includes('/assets/');
+    const isFromAssets = this.name.includes("/assets/");
     const hash = await this.generateHash();
+    const id = this.name.match(/([^\/.]+)\.[^\/.]+$/)[1];
 
     if (isFromAssets) {
       return {};
@@ -21,7 +22,7 @@ class SvgAsset extends Asset {
 
     return [
       {

         value: {
           hash,
           path: this.name,
@@ -29,8 +31,8 @@ class SvgAsset extends Asset {
         },
       },
       {
