fix(APP-993): Prefix SVG asset ids to prevent url(#id) collisions between inlined icons and illustrations (#723)

Signed-off-by: Milos Dzepina <milos@aragon.org>

Author: milosh86

.changeset/giant-oranges-like.md

@@ -0,0 +1,5 @@
+---
+"@aragon/gov-ui-kit": patch
+---
+
+Fix SVG build config with missing `prefixIds` plugin

.storybook/main.ts

@@ -5,6 +5,7 @@ import type { RollupOptions } from 'rollup';
 import { mergeConfig } from 'vite';
 import { viteStaticCopy } from 'vite-plugin-static-copy';
 import svgr from 'vite-plugin-svgr';
+import svgoConfig from '../svgo.config.js';
 
 const config: StorybookConfig = {
     stories: ['../docs/**/*.@(md|mdx)', '../src/**/*.stories.@(js|jsx|ts|tsx)', '../src/**/*.@(md|mdx)'],
@@ -24,7 +25,12 @@ const config: StorybookConfig = {
     viteFinal: (viteConfig) => {
         // Add source-map-js alias and plugins for importing svg files and copying fonts
         const plugins = [
-            svgr({ include: '**/*.svg' }),
+            // Run the same SVGO pass (including id namespacing, see svgo.config.js) as the
+            // published library build, so Storybook previews match production markup.
+            svgr({
+                include: '**/*.svg',
+                svgrOptions: { plugins: ['@svgr/plugin-svgo', '@svgr/plugin-jsx'], svgoConfig },
+            }),
             viteStaticCopy({ targets: [{ src: './src/theme/fonts/*.ttf', dest: './fonts' }] }),
         ];
         const resolve = { alias: { 'source-map-js': 'source-map' } };

package.json

@@ -104,6 +104,8 @@
         "@rollup/plugin-typescript": "^12.3.0",
         "@storybook/addon-docs": "^10.4.6",
         "@storybook/react-vite": "^10.4.6",
+        "@svgr/plugin-jsx": "^8.1.0",
+        "@svgr/plugin-svgo": "^8.1.0",
         "@svgr/rollup": "^8.1.0",
         "@tailwindcss/postcss": "^4.3.1",
         "@tailwindcss/typography": "^0.5.20",
@@ -133,6 +135,7 @@
         "rollup-plugin-postcss": "^4.0.2",
         "rollup-plugin-visualizer": "^7.0.1",
         "storybook": "^10.4.6",
+        "svgo": "^3.3.3",
         "tailwindcss": "^4.3.1",
         "ts-jest": "^29.4.11",
         "tslib": "^2.8.1",

pnpm-lock.yaml

@@ -8,6 +8,7 @@ import svgr from '@svgr/rollup';
 import peerDepsExternal from 'rollup-plugin-peer-deps-external';
 import postcss from 'rollup-plugin-postcss';
 import { visualizer } from 'rollup-plugin-visualizer';
+import svgoConfig from './svgo.config.js';
 
 const require = createRequire(import.meta.url);
 const tsConfig = require('./tsconfig.json');
@@ -52,19 +53,7 @@ export default [
                 ],
             }),
             images({ include: ['**/*.png', '**/*.jpg'] }),
-            svgr({
-                // Keep the viewBox so icons scale instead of getting clipped when
-                // rendered at a size other than their intrinsic 16px (e.g. size-3 in
-                // small buttons). SVGO's preset-default removes it by default.
-                svgoConfig: {
-                    plugins: [
-                        {
-                            name: 'preset-default',
-                            params: { overrides: { removeViewBox: false } },
-                        },
-                    ],
-                },
-            }),
+            svgr({ svgoConfig }),
             terser(),
         ],
     },

rollup.config.mjs

@@ -0,0 +1,26 @@
+// Shared SVGO config used by the Rollup library build (rollup.config.mjs), the
+// Storybook/dev Vite build (.storybook/main.ts) and the svgIds test, so icon/illustration
+// SVGs are optimized identically everywhere and this file is the single source of truth
+// for the id collision fix below. Authored as CommonJS so all three can import it.
+/** @type {import('svgo').Config} */
+module.exports = {
+    plugins: [
+        {
+            name: 'preset-default',
+            params: {
+                overrides: {
+                    // Keep the viewBox so icons scale instead of getting clipped when
+                    // rendered at a size other than their intrinsic 16px (e.g. size-3 in
+                    // small buttons). SVGO's preset-default removes it by default.
+                    removeViewBox: false,
+                },
+            },
+        },
+        // Icons/illustrations are inlined as <svg> markup in the DOM, so `<mask id="a">`,
+        // `<clipPath id="a">`, etc. resolve against the whole document's id space, not
+        // per-<svg>. Without this, every source file that (independently) authors the
+        // same short id collides with every other one as soon as two such components are
+        // rendered on the same page, and `url(#a)` silently resolves to the wrong element.
+        'prefixIds',
+    ],
+};