diff --git a/.gitignore b/.gitignore
index 73d5936..aad5bc4 100644
--- a/.gitignore
+++ b/.gitignore
@@ -8,6 +8,7 @@
 *.d.ts
 *.js
 !/@types/*.d.ts
+!/src/build-config/*.js
 
 # don't ignore test files
 !/tests/**/*.js
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1f582ec..6ecb343 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,9 @@
+2.3.0
+=====
+
+* (feature) Add common Webpack Build Config for NextJS projects and Storybook for a shared SVGR integration. 
+
+
 2.2.1
 =====
 
diff --git a/finalize-build.mjs b/finalize-build.mjs
index 085523b..d94e053 100644
--- a/finalize-build.mjs
+++ b/finalize-build.mjs
@@ -6,7 +6,11 @@ console.log("");
 
 console.log("Copying additional files");
 
+
 await Promise.all(
+	[
+		copy("src/build-config/webpack.js", `dist/build-config/webpack.js`),
+	],
 	[
 		"CHANGELOG.md",
 		"README.md",
diff --git a/package.json b/package.json
index b796765..1f3e69d 100644
--- a/package.json
+++ b/package.json
@@ -20,24 +20,25 @@
 		"xtend": "^4.0.2"
 	},
 	"optionalDependencies": {
-		"next": "^14.1",
-		"react": "^18.0",
-		"react-dom": "^18.0"
+		"@svgr/webpack": "^8.1.0",
+		"next": "^14.2.3",
+		"react": "^18.3.1",
+		"react-dom": "^18.3.1"
 	},
 	"devDependencies": {
-		"@types/node": "^18.15.1",
-		"@types/qunit": "^2.19.4",
-		"@types/react": "^18.0.28",
-		"@types/react-dom": "^18.0.11",
-		"@types/xtend": "^4.0.4",
-		"fs-extra": "^11.1.0",
+		"@types/node": "^18.19.33",
+		"@types/qunit": "^2.19.10",
+		"@types/react": "^18.3.3",
+		"@types/react-dom": "^18.3.0",
+		"@types/xtend": "^4.0.6",
+		"fs-extra": "^11.2.0",
 		"next": "^14.1.3",
 		"prettier-package-json": "^2.8.0",
-		"publint": "^0.2.7",
-		"qunit": "^2.19.4",
+		"publint": "^0.2.8",
+		"qunit": "^2.20.1",
 		"react": "^18.0",
 		"react-dom": "^18.0",
-		"typescript": "^5.4.2"
+		"typescript": "^5.4.5"
 	},
 	"publishConfig": {
 		"access": "public"
diff --git a/src/build-config/webpack.js b/src/build-config/webpack.js
new file mode 100644
index 0000000..4dbcc93
--- /dev/null
+++ b/src/build-config/webpack.js
@@ -0,0 +1,48 @@
+export const registerSvgWebpackLoader = (config) =>
+{
+	// Grab the existing rule that handles SVG imports
+	const fileLoaderRule = config.module.rules.find((rule) => rule.test?.test?.(".svg") && rule.resourceQuery?.toString() !== "/raw/");
+	// Modify the file loader rule to ignore *.svg, since we have it handled now.
+	fileLoaderRule.exclude = /\.svg$/i;
+
+	// Convert all other *.svg imports to React components
+	config.module.rules.push({
+		test: /\.svg$/i,
+		issuer: { not: /\.(css|scss|sass)$/ },
+		resourceQuery: { not: /url/ }, // exclude if *.svg?url
+		use: [{
+			loader: "@svgr/webpack",
+			options: {
+				dimensions: true,
+				svgo: true,
+				svgoConfig: {
+					plugins: [
+						{
+							name: "preset-default",
+							params: {
+								overrides: {
+									// ensure unique IDs when embedding multiple times
+									cleanupIds: false,
+									// don't remove the viewbox, to avoid scaling issues
+									removeViewBox: false,
+								},
+							},
+						},
+						{
+							name: "removeAttrs",
+							params: {
+								attrs: "data-.*",
+							},
+						},
+						{
+							// ensure unique IDs when embedding multiple times
+							name: "prefixIds",
+						},
+					],
+				},
+			},
+		}],
+	});
+
+	return config;
+};